「OpenLayers」を利用して、中心位置にマーカーを表示させる

近々、Web用のGIS開発をすることになっったので、久々に「OpenLayers」を使うことになりました。

まず手始めに、中心位置にマーカーを表示させます。

なぜこの処理が必要になったのか説明すると、今回のGIS開発では、スマホ利用での地図操作を考えています。スマホで図形を操作する場合、指で操作するため、図形の選択がうまくいかず、思ったように図形を動かせない場合があります。そのため、図形ではなく背景地図を移動させて、図形を動かす方法が必要と考えました。

手順としては
・マーカー用のレイヤを作成
・地図の中心位置が変わった際のイベント処理を追加
・イベント処理で、マーカー用の座標位置に、地図の中心位置を設定

１．マーカー用のレイヤを作成

マーカー用のレイヤは、中心位置を同じ位置の図形を作成しておきます。イベント発生時に、この図形の座標を変更します。図形だけだと位置情報がわからないので、背景に電子国土基本図(標準地図)を設定しています。

var center = [15027856, 4115521];
var layer1 = new ol.layer.Tile({
    name: '電子国土基本図(標準地図)',
    type: 'base',
    source: new ol.source.XYZ({
        attributions: [
            new ol.control.Attribution({
                html: "<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank" rel="noopener">標準地図</a>"
            })
        ],
        url: "http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png",
        projection: "EPSG:3857"
    })
});

var layer2 = new ol.layer.Vector({
    name: 'Vecteur',
    source: new ol.source.Vector({ wrapX: false }),
    style: function (feature) {
        return [new ol.style.Style({
            image: new ol.style.Icon({
                src: "../Content/image/map-marker.png"
            })
        })];
    }
});

var feature = new ol.Feature(new ol.geom.Point(center));
layer2.getSource().addFeature(feature);

var map = new ol.Map({
    target: 'map',
    view: new ol.View({
        center: center,
        zoom: 11,
        minZoom: 10,
        maxZoom: 18
    }),
    layers: [layer1, layer2]
});

var center = [15027856, 4115521];

var layer1 = new ol.layer.Tile({

name: '電子国土基本図(標準地図)',

type: 'base',

source: new ol.source.XYZ({

attributions: [

new ol.control.Attribution({

html: "<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank" rel="noopener">標準地図</a>"

})

url: "http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png",

projection: "EPSG:3857"

})

});

var layer2 = new ol.layer.Vector({

name: 'Vecteur',

source: new ol.source.Vector({ wrapX: false }),

style: function (feature) {

return [new ol.style.Style({

image: new ol.style.Icon({

src: "../Content/image/map-marker.png"

})

})];

}

});

var feature = new ol.Feature(new ol.geom.Point(center));

layer2.getSource().addFeature(feature);

var map = new ol.Map({

target: 'map',

view: new ol.View({

center: center,

zoom: 11,

minZoom: 10,

maxZoom: 18

}),

layers: [layer1, layer2]

});

２．地図の中心位置が変わった際のイベント処理を追加

Viewクラスに、中心位置が変わった際のイベント処理を追加し、マーカー用の座標位置に、地図の中心位置を設定します。

function onChangeCenter(evt) {
    var center2 = map.getView().getCenter();
    feature.setGeometry(new ol.geom.Point(center2));
    map.render();
}
map.getView().on('change:center', onChangeCenter);