目次

ここは旧トップページ日曜プログラミング

OpenLayers4での自作アイコン表示(仮)

注意:「OL4勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」

東京都庁と千葉県庁の自作アイコンを表示するサンプルです。

デモ

ソースコード

<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>

備考

アイコン以外の部分はOpenLayers4でのマーカー表示(仮)を見てください。

1.アイコンの設定を変数に格納します。

  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'
    }))
  });

オプションの説明

anchorアイコンの中心位置(地図座標と連結する場所)、[0,0]ならアイコンの左上が座標と一致する、ピンのようなアイコン底辺中央なら[0.5,1]、デフォルト値は中央の[0.5,0.5]で省略可能。
crossOriginセキュリティー用:外部サーバーから画像を取得する時'anonymous'が必須?
sec:画像アドレス

その他は公式サイト参照

2.座標設定したマーカーにアイコンをセット

//1個目のマーカーにアイコン1をセット
marker0[0].setStyle(icontype0[0]);

ここは旧トップページ日曜プログラミング