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

オプションの説明

その他は公式サイト参照

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

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

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