[[start]]＞[[programming_start]] ====== OpenLayers4での吹き出し表示(仮) ====== 注意：「OL4勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」東京都庁と千葉県庁のマーカーをクリックすると吹き出し表示するサンプルデモです。（見にくいかもしれませんが薄い青色の丸が標準マーカーです） ===== デモ =====

===== ソースコード =====

===== 備考 ===== 0.吹き出し以外の部分は[[osm4_ol_marker]]など確認して下さい。 1.GoogleMapと違い吹き出しは自分でdivを用意しなければならないので、スタイルとdivを用意します


  /*吹き出し用のスタイル*/
  .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: "✖";}

2.吹き出し用のオーバーレイの準備と閉じるボタンを押した時の動作を設定


  //吹き出し用オーバレイ準備
  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;
  };

3.マップのオーバーレイを追加


    overlays: [popoverlay],

4.マーカー設定に表示するテキストを追加、HTMLも使えます


  name: '東京都庁'

5.吹き出しを表示するためのクリックイベントを追加、クリックするとマーカー上か判断してマーカー上ならdivの内容を書き換えてマーカーのある座標に吹き出しを表示します。


  //吹き出しを表示するためのクリックイベント
  map0.on('click', function(evt) {
    var feature = map0.forEachFeatureAtPixel(evt.pixel,function(feature) {return feature;});
    if (feature) {
      content.innerHTML = ''+feature.get('name')+ '';
      var coordinate = feature.getGeometry().getCoordinates();
      popoverlay.setPosition(coordinate);
    }
  });

---- [[start]]＞[[programming_start]]