[[start]]＞[[programming_start]]
====== OpenLayers4での自作アイコン表示(仮) ======
注意：「OL4勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」
東京都庁と千葉県庁の自作アイコンを表示するサンプルです。
===== デモ =====
===== ソースコード =====
===== 備考 =====
アイコン以外の部分は[[osm4_ol_marker]]を見てください。
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:|画像アドレス|
その他は[[https://openlayers.org/en/latest/apidoc/ol.style.Icon.html|公式サイト]]参照
2.座標設定したマーカーにアイコンをセット
//1個目のマーカーにアイコン1をセット
marker0[0].setStyle(icontype0[0]);
[[start]]＞[[programming_start]]