差分

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

--- osm4_ol_infowindow [2018/05/22 12:35] – 管理者
+++ osm4_ol_infowindow [2018/05/25 03:58] (現在) – [備考] 管理者
@@ 行 1: / 行 1: @@
+[[start]]＞[[programming_start]]
+====== OpenLayers4での吹き出し表示(仮) ======
+注意：「OL4勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」
+東京都庁と千葉県庁のマーカーをクリックすると吹き出し表示するサンプルデモです。（見にくいかもしれませんが薄い青色の丸が標準マーカーです）
+===== デモ =====
+<html>
+<style>
+  .mapdiv{height: 400px;width: 100%;}
+  /*吹き出し用のスタイル*/
+  .ol-popup {position: absolute;background-color: white;-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));padding: 15px;border-radius: 10px;border: 1px solid #cccccc;bottom: 12px;left: -50px;min-width: 280px; }
+  .ol-popup:after, .ol-popup:before { top: 100%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none; }
+  .ol-popup:after {border-top-color: white;border-width: 10px;left: 48px;margin-left: -10px; }
+  .ol-popup:before {border-top-color: #cccccc;border-width: 11px;left: 48px;margin-left: -11px; }
+  .ol-popup-closer {text-decoration: none;position: absolute;top: 2px;right: 8px; }
+  .ol-popup-closer:after {content: "✖";}
+</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>
+<!-- 吹き出し用のDIV -->
+<div id="popup" class="ol-popup">
+  <a href="#" id="popup-closer" class="ol-popup-closer"></a>
+  <div id="popup-content"></div>
+</div>
+<script>
+  //吹き出し用オーバレイ設定
+  var container = document.getElementById('popup');
+  var content = document.getElementById('popup-content');
+  var closer = document.getElementById('popup-closer');
+  var popoverlay = new ol.Overlay({
+    element: container,
+    autoPan: true,
+    autoPanAnimation: {
+      duration: 250
+    }
+  });
+  //吹き出し閉じる用？
+  closer.onclick = function() {
+    popoverlay.setPosition(undefined);
+    closer.blur();
+    return false;
+  };
+  //---- マップ表示 ----
+  //吹き出し用のレイヤー準備
+  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() })],
+    overlays: [popoverlay],
+    view: view0,
+    controls: ol.control.defaults({attributionOptions: {collapsible: false}}),
+  });
+  map0.addControl(new ol.control.ZoomSlider());
+  //---- マーカー関連 ----
+  var marker0=[];
+  //1個目のマーカー：吹き出しに表示するnameを追加
+  marker0[0] = new ol.Feature({
+    geometry: new ol.geom.Point(ol.proj.fromLonLat([139.692,35.689])),
+    name: '<a href="http://www.metro.tokyo.jp/" target="_blank">東京都庁</a>'
+  });
+  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])),
+    name: '<a href="https://www.pref.chiba.lg.jp/" target="_blank">千葉県庁</a>'
+  });
+  map0.addLayer(new ol.layer.Vector({source: new ol.source.Vector({
+    features: [marker0[1]]
+  })}));
+  //吹き出しを表示するためのクリックイベント
+  map0.on('click', function(evt) {
+    var feature = map0.forEachFeatureAtPixel(evt.pixel,function(feature) {return feature;});
+    if (feature) {
+      //var coordinate = evt.coordinate; クリック座標
+      content.innerHTML = '<p>'+feature.get('name')+ '</p>';
+      var coordinate = feature.getGeometry().getCoordinates();
+      popoverlay.setPosition(coordinate);
+    }
+  });
+  //【座標やズーム変更】
+  //view0.setCenter(ol.proj.fromLonLat([138.73,35.362]));
+  //view0.setZoom(0);
+</script>
+</html>
+===== ソースコード =====
+<code javascript>
+<style>
+  .mapdiv{height: 400px;width: 100%;}
+  /*吹き出し用のスタイル*/
+  .ol-popup {position: absolute;background-color: white;-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));padding: 15px;border-radius: 10px;border: 1px solid #cccccc;bottom: 12px;left: -50px;min-width: 280px; }
+  .ol-popup:after, .ol-popup:before { top: 100%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none; }
+  .ol-popup:after {border-top-color: white;border-width: 10px;left: 48px;margin-left: -10px; }
+  .ol-popup:before {border-top-color: #cccccc;border-width: 11px;left: 48px;margin-left: -11px; }
+  .ol-popup-closer {text-decoration: none;position: absolute;top: 2px;right: 8px; }
+  .ol-popup-closer:after {content: "✖";}
+</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>
+<!-- 吹き出し用のDIV -->
+<div id="popup" class="ol-popup">
+  <a href="#" id="popup-closer" class="ol-popup-closer"></a>
+  <div id="popup-content"></div>
+</div>
+<script>
+  //吹き出し用オーバレイ準備
+  var container = document.getElementById('popup');
+  var content = document.getElementById('popup-content');
+  var closer = document.getElementById('popup-closer');
+  var popoverlay = new ol.Overlay({
+    element: container,
+    autoPan: true,
+    autoPanAnimation: {
+      duration: 250
+    }
+  });
+  //吹き出し閉じる用
+  closer.onclick = function() {
+    popoverlay.setPosition(undefined);
+    closer.blur();
+    return false;
+  };
+  //---- マップ表示 ----
+  //吹き出し用のレイヤー追加
+  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() })],
+    overlays: [popoverlay],
+    view: view0,
+    controls: ol.control.defaults({attributionOptions: {collapsible: false}}),
+  });
+  map0.addControl(new ol.control.ZoomSlider());
+  //---- マーカー関連 ----
+  var marker0=[];
+  //1個目のマーカー：吹き出しに表示するnameを追加
+  marker0[0] = new ol.Feature({
+    geometry: new ol.geom.Point(ol.proj.fromLonLat([139.692,35.689])),
+    name: '<a href="http://www.metro.tokyo.jp/" target="_blank">東京都庁</a>'
+  });
+  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])),
+    name: '<a href="https://www.pref.chiba.lg.jp/" target="_blank">千葉県庁</a>'
+  });
+  map0.addLayer(new ol.layer.Vector({source: new ol.source.Vector({
+    features: [marker0[1]]
+  })}));
+  //吹き出しを表示するためのクリックイベント
+  map0.on('click', function(evt) {
+    var feature = map0.forEachFeatureAtPixel(evt.pixel,function(feature) {return feature;});
+    if (feature) {
+      content.innerHTML = '<p>'+feature.get('name')+ '</p>';
+      var coordinate = feature.getGeometry().getCoordinates();
+      popoverlay.setPosition(coordinate);
+    }
+  });
+</script>
+</code>
+===== 備考 =====
+.吹き出し以外の部分は[[osm4_ol_marker]]など確認して下さい。
+.GoogleMapと違い吹き出しは自分でdivを用意しなければならないので、スタイルとdivを用意します
+<code css>
+  /*吹き出し用のスタイル*/
+  .ol-popup {position: absolute;background-color: white;-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));padding: 15px;border-radius: 10px;border: 1px solid #cccccc;bottom: 12px;left: -50px;min-width: 280px; }
+  .ol-popup:after, .ol-popup:before { top: 100%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none; }
+  .ol-popup:after {border-top-color: white;border-width: 10px;left: 48px;margin-left: -10px; }
+  .ol-popup:before {border-top-color: #cccccc;border-width: 11px;left: 48px;margin-left: -11px; }
+  .ol-popup-closer {text-decoration: none;position: absolute;top: 2px;right: 8px; }
+  .ol-popup-closer:after {content: "✖";}
+</code>
+<code html>
+<!-- マップ用DIVの次の行に、吹き出し用のDIVを追加 -->
+<div id="popup" class="ol-popup">
+  <a href="#" id="popup-closer" class="ol-popup-closer"></a>
+  <div id="popup-content"></div>
+</div>
+</code>
+.吹き出し用のオーバーレイの準備と閉じるボタンを押した時の動作を設定
+<code javascript>
+  //吹き出し用オーバレイ準備
+  var container = document.getElementById('popup');
+  var content = document.getElementById('popup-content');
+  var closer = document.getElementById('popup-closer');
+  var popoverlay = new ol.Overlay({
+    element: container,
+    autoPan: true,
+    autoPanAnimation: {
+      duration: 250
+    }
+  });
+  //吹き出し閉じる用
+  closer.onclick = function() {
+    popoverlay.setPosition(undefined);
+    closer.blur();
+    return false;
+  };
+</code>
+.マップのオーバーレイを追加
+<code>
+    overlays: [popoverlay],
+</code>
+.マーカー設定に表示するテキストを追加、HTMLも使えます
+<code>
+  name: '<a href="http://www.metro.tokyo.jp/" target="_blank">東京都庁</a>'
+</code>
+.吹き出しを表示するためのクリックイベントを追加、クリックするとマーカー上か判断してマーカー上ならdivの内容を書き換えてマーカーのある座標に吹き出しを表示します。
+<code javascript>
+  //吹き出しを表示するためのクリックイベント
+  map0.on('click', function(evt) {
+    var feature = map0.forEachFeatureAtPixel(evt.pixel,function(feature) {return feature;});
+    if (feature) {
+      content.innerHTML = '<p>'+feature.get('name')+ '</p>';
+      var coordinate = feature.getGeometry().getCoordinates();
+      popoverlay.setPosition(coordinate);
+    }
+  });
+</code>
+----
+[[start]]＞[[programming_start]]