内容へ移動
あちあち情報局
趣味や日曜プログラムなどを書いています
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
現在位置:
トップページ
»
OpenLayers4での自作アイコン表示(仮)
osm4_ol_icon
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
[[start]]>[[programming_start]] ====== OpenLayers4での自作アイコン表示(仮) ====== 注意:「OL4勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」 東京都庁と千葉県庁の自作アイコンを表示するサンプルです。 ===== デモ ===== <html> <style> .mapdiv{height: 400px;width: 100%;} </style> <script> /* 外部CSSの読み込み */ function cssLoad(cssFile){ if(document.all){ document.createStyleSheet(cssFile); }else{ var link = document.createElement("link"); link.rel = "stylesheet"; link.href = cssFile; link.type = "text/css" document.getElementsByTagName('head')[0].appendChild(link); } } cssLoad("https://openlayers.org/en/v4.6.5/css/ol.css"); </script> <script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script> <!-- マップ表示領域 --> <div id="mapdiv" class="mapdiv"></div> <script> //---- マップ表示 ---- var view0 = new ol.View({center: ol.proj.fromLonLat([139.692,35.689]),zoom: 8}); var map0 = new ol.Map({ target: 'mapdiv', layers: [new ol.layer.Tile({source: new ol.source.OSM() })], view: view0, controls: ol.control.defaults({attributionOptions: {collapsible: false}}), }); map0.addControl(new ol.control.ZoomSlider()); //---- マーカーアイコン関連 ---- //配列にしたので複数登録可能 var icontype0=[]; //1つめのアイコン icontype0[0]=new ol.style.Style({ image: new ol.style.Icon(({ anchor:[0.5,0.5], crossOrigin: 'anonymous', src: 'https://www.achiachi.net/blog/_outside/mapicon/c1.png' })) }); //2つめのアイコン icontype0[1]=new ol.style.Style({ image: new ol.style.Icon(({ anchor:[0.5,0.5], crossOrigin: 'anonymous', src: 'https://www.achiachi.net/blog/_outside/mapicon/c2.png' })) }); //---- マーカー関連 ---- var marker0=[]; //1個目のマーカー(東京都庁) marker0[0] = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat([139.692,35.689])), }); //1個目のマーカーにアイコン1をセット marker0[0].setStyle(icontype0[0]); map0.addLayer(new ol.layer.Vector({source: new ol.source.Vector({ features: [marker0[0]] })})); //2個目のマーカー(千葉県庁) marker0[1] = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat([140.122,35.604])), }); //2個目のマーカーにアイコン2をセット marker0[1].setStyle(icontype0[1]); map0.addLayer(new ol.layer.Vector({source: new ol.source.Vector({ features: [marker0[1]] })})); </script> </html> ===== ソースコード ===== <code javascript> <style> .mapdiv{height: 400px;width: 100%;} </style> <script> /* 外部CSSの読み込み */ function cssLoad(cssFile){ if(document.all){ document.createStyleSheet(cssFile); }else{ var link = document.createElement("link"); link.rel = "stylesheet"; link.href = cssFile; link.type = "text/css" document.getElementsByTagName('head')[0].appendChild(link); } } cssLoad("https://openlayers.org/en/v4.6.5/css/ol.css"); </script> <script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script> <!-- マップ表示領域 --> <div id="mapdiv" class="mapdiv"></div> <script> //---- マップ表示 ---- var view0 = new ol.View({center: ol.proj.fromLonLat([139.692,35.689]),zoom: 8}); var map0 = new ol.Map({ target: 'mapdiv', layers: [new ol.layer.Tile({source: new ol.source.OSM() })], view: view0, controls: ol.control.defaults({attributionOptions: {collapsible: false}}), }); map0.addControl(new ol.control.ZoomSlider()); //---- マーカーアイコン関連 ---- //配列にしたので複数登録可能 var icontype0=[]; //1つめのアイコン icontype0[0]=new ol.style.Style({ image: new ol.style.Icon(({ anchor:[0.5,0.5], crossOrigin: 'anonymous', src: 'https://www.achiachi.net/blog/_outside/mapicon/c1.png' })) }); //2つめのアイコン icontype0[1]=new ol.style.Style({ image: new ol.style.Icon(({ anchor:[0.5,0.5], crossOrigin: 'anonymous', src: 'https://www.achiachi.net/blog/_outside/mapicon/c2.png' })) }); //---- マーカー関連 ---- var marker0=[]; //1個目のマーカー(東京都庁) marker0[0] = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat([139.692,35.689])), }); //1個目のマーカーにアイコン1をセット marker0[0].setStyle(icontype0[0]); map0.addLayer(new ol.layer.Vector({source: new ol.source.Vector({ features: [marker0[0]] })})); //2個目のマーカー(千葉県庁) marker0[1] = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat([140.122,35.604])), }); //2個目のマーカーにアイコン2をセット marker0[1].setStyle(icontype0[1]); map0.addLayer(new ol.layer.Vector({source: new ol.source.Vector({ features: [marker0[1]] })})); </script> </code> ===== 備考 ===== アイコン以外の部分は[[osm4_ol_marker]]を見てください。 1.アイコンの設定を変数に格納します。 <code javascript> var icontype0=[]; //1つめのアイコン icontype0[0]=new ol.style.Style({ image: new ol.style.Icon(({ anchor:[0.5,0.5], crossOrigin: 'anonymous', src: 'https://www.achiachi.net/blog/_outside/mapicon/c1.png' })) }); </code> オプションの説明 ^anchor|アイコンの中心位置(地図座標と連結する場所)、[0,0]ならアイコンの左上が座標と一致する、ピンのようなアイコン底辺中央なら[0.5,1]、デフォルト値は中央の[0.5,0.5]で省略可能。| ^crossOrigin|セキュリティー用:外部サーバーから画像を取得する時'anonymous'が必須?| ^sec:|画像アドレス| その他は[[https://openlayers.org/en/latest/apidoc/ol.style.Icon.html|公式サイト]]参照 2.座標設定したマーカーにアイコンをセット <code javascript> //1個目のマーカーにアイコン1をセット marker0[0].setStyle(icontype0[0]); </code> [[start]]>[[programming_start]]
osm4_ol_icon.txt
· 最終更新: 2018/05/22 13:54 by
管理者
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ