差分

この文書の現在のバージョンと選択したバージョンの差分を表示します。

--- osm4_ol_icon [2018/05/22 11:21]
管理者
+++ osm4_ol_icon [2018/05/22 13:54] (現在)
管理者
@@ ライン 1: / ライン 1: @@
+[[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]]を見てください。
+.アイコンの設定を変数に格納します。
+<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|公式サイト]]参照
+.座標設定したマーカーにアイコンをセット
+<code javascript>
+//1個目のマーカーにアイコン1をセット
+marker0[0].setStyle(icontype0[0]);
+</code>
+[[start]]＞[[programming_start]]

あちあち情報局

ユーザ用ツール

サイト用ツール

差分

ページ用ツール