差分

このページの2つのバージョン間の差分を表示します。

--- osm4_ol_marker [2018/05/22 11:35] – 管理者
+++ osm4_ol_marker [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: 5});
+  //マップ表示
+  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 marker0=[];
+  //1個目のマーカー位置指定(東京都庁)
+  marker0[0] = new ol.Feature({
+    geometry: new ol.geom.Point(ol.proj.fromLonLat([139.692,35.689])),
+  });
+  //マップにマーカー追加
+  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])),
+  });
+  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: 5});
+  //マップ表示
+  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 marker0=[];
+  //1個目のマーカー位置指定(東京都庁)
+  marker0[0] = new ol.Feature({
+    geometry: new ol.geom.Point(ol.proj.fromLonLat([139.692,35.689])),
+  });
+  //マップにマーカー追加
+  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])),
+  });
+  map0.addLayer(new ol.layer.Vector({source: new ol.source.Vector({
+    features: [marker0[1]]
+  })}));
+</script>
+</code>
+===== 備考 =====
+この部分でマーカーを設定・表示しています。
+<code javascript>
+  var marker0=[];
+  //1個目のマーカー位置指定(東京都庁)
+  marker0[0] = new ol.Feature({
+    geometry: new ol.geom.Point(ol.proj.fromLonLat([139.692,35.689])),
+  });
+  //マップにマーカー追加
+  map0.addLayer(new ol.layer.Vector({source: new ol.source.Vector({
+    features: [marker0[0]]
+</code>
+座標指定がGoogleMapと逆で「経度,緯度」の順番なので注意。
+----
+[[start]]＞[[programming_start]]