「OpenLayers」を利用して、アイコン画像を下端に表示させる

2021/2/5 GIS, OpenLayers

「OpenLayers」でアイコン画像でポイントを表示させた場合、デフォルトでは、アイコン画像が座標の中心位置に表示されます。
画像にもよりますが、以下のような、ピン画像の場合は中心位置ではなく、下端に表示させる必要があります。

ピン画像を下端に表示

ピン画像を下端に表示させるには、ol.style.Iconクラスのanchorプロパティの値を変更します。
何も設定していない場合は、デフォルトで[0.5, 0.5]が設定されており、アイコンが中心位置に表示されます。
これを、[0.5, 1]に設定し、アイコンを下端に表示させます。

以下、設定例です。

var layer2 = new ol.layer.Vector({
    name: 'Vecteur',
    source: vectorSource,
    style: function (feature) {
        return [new ol.style.Style({
            image: new ol.style.Icon({
                anchor: [0.5, 1],
                src: "../Content/image/pin_red.png"
            })
        })];
    }
});