人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

OpenStreetMapのOpenLayersで質問です。衛星写真(航空写真)の規定レイヤーか重ねあわせレイヤーを実装したいのですが、どうすれば良いのでしょうか?
なお実装するレイヤー情報は、商用利用自由のものが望ましいです。
よろしくお願いいたします。

●質問者: くじぇ
●カテゴリ:コンピュータ インターネット
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● 星花
●0ポイント

各レイヤーは、上にしたり下にしたり、表示のON/OFFを制御できます。これらは、レイヤーウィンドウ中の下部にあるアイコンで制御できます。ウィンドウ中の各レイヤーをクリックして選択した後、上向きの↑と下向きの↓で、レイヤーの改装を変更できます。また、目が表示されているアイコンをクリックすることで、そのレイヤーの表示のON/OFFを制御することが出来ます。そのほかに、レイヤーの有効/無効の制御、レイヤーの併合、レイヤーを削除することも出来ます。


くじぇさんのコメント
あんたはPhotoShopでも使っててください! 言うだけ無駄だとは思いますが、今回の質問はOpenStreetMapです。 HTML(Java Script)でのコードの書き方を聞いているのです!

星花さんのコメント
あ、すみませんOpenStreetMapなら父親が使っていたのでちゃんとそれを書いたのですが… 御免なさい私フォトショップ派です(^^; ご迷惑おかけしました。

くじぇさんのコメント
星花?さんすみません。 てっきりBotがそれっぽい答えを検索して載せたのかと思ったので強い口調で答えてしまいましたが、何か凄い勘違いされているだけのようですね。 OpenStreetMapのOpenLayersを用いることで、自分のHTMLページ上に地図を載せることができます。 http://wiki.openstreetmap.org/wiki/JA:OpenLayers_Simple_Example 私はこの載せる地図を(商用利用自由な)衛星写真・航空写真にしたいと考えています。 その為にはどのようにコードを書けば良いのか悩んでいます。 ですので、アイコンで制御できると書いてくるのは、(HTMLにアイコンもへったくれもないですから)ちっとも「ちゃんとそれを書いた」事にはならないのです。 いかがでしょうか?

2 ● a-kuma3
●100ポイント

http://workshops.opengeo.org/stack-intro/openlayers.html#a-multi-layer-map

ここのコードが参考になると思います。


サンプルコード、ほぼ、そのままですが、こんな感じで動作するのを確認しました。

<html>
<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAl9RMqSzhPUXAfeBCXOussRTQDbvAygy0cfGJr8dEMAYKf3RWNBQqP9mjKIsqTfmAlz5LOJ3Xpy5s4w'></script>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>

<body>
<div id="demoMap"></div>

<script>
var map;

// Avoid pink error tiles
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
OpenLayers.Util.onImageLoadErrorColor = "transparent";

function init(){
 // Map is in mercator this time, so over-ride the default
 // options that assume lat/lon.
 var options = {
 projection: new OpenLayers.Projection("EPSG:900913"),
 displayProjection: new OpenLayers.Projection("EPSG:4326"),
 units: "m",
 numZoomLevels: 20,
 maxResolution: 156543.0339,
 maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
 20037508, 20037508.34)
 };
 // Create the map object
 map = new OpenLayers.Map('demoMap', options);

 // create Google Maps layer
 var gmap = new OpenLayers.Layer.Google(
 "Google Streets", // the default
 {'sphericalMercator': true, numZoomLevels: 20}
 );

 // create Google Satellite layer
 var gsat = new OpenLayers.Layer.Google(
 "Google Satellite",
 {type: G_SATELLITE_MAP, 'sphericalMercator': true, numZoomLevels: 20}
 );

 // create WMS taxlots layer
 var wmslayer = new OpenLayers.Layer.WMS(
 "Medford Taxlots",
 "http://localhost:8080/geoserver/wms", 
 {'layers': 'postgis:taxlot_ply', 'format':'image/png', 'transparent':'true'},
 {'opacity': 1.0, 'isBaseLayer': false, 'visibility': true}
 );
 
 map.addLayers([gsat, gmap, wmslayer]);// ★レイヤーの順序を変えてます!
 map.addControl(new OpenLayers.Control.LayerSwitcher());
 // Coordinate display at bottom of map
 map.addControl(new OpenLayers.Control.MousePosition());
 // Zoom to Medford, Oregon
 var point = new OpenLayers.LonLat(-122.8764, 42.3263); 
 // Need to convert zoom point to mercator too
 point.transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()); 
 
 map.setCenter(point, 17); 
 
}

init();

</script>

</body>
</html>

初期表示で衛星写真が表示されるように、レイヤーの順番を変えてます。

Google Map API のキーは、適切なものに変えてください。


くじぇさんのコメント
a-kuma3さんありがとうございます。 「なお実装するレイヤー情報は、商用利用自由のものが望ましいです。」は満たされていませんが、第一条件はクリアしてますね。 参考にさせて頂きます。

3 ● kodairabase
●100ポイント

http://workshops.opengeo.org/stack-intro/openlayers.html#a-multi-layer-map

ここのコードが参考になると思います


くじぇさんのコメント
kodairabaseさんありがとうございます。 a-kuma3さんと同意見ですね。ありがとうございます。 参考にさせて頂きます。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ