レイヤーの特徴を座標で取得したい。さらに、これまでonclickイベントで解決したポップアップでこの機能を開きたいです。しかし、フィーチャの座標を指定して、フィーチャのポップアップを開くことで実現したいと考えています。
マップを含むレイヤーと、機能を含むレイヤーがあります。
if (trackMap != null) {
for (var i = 0; i < trackMap.length; i++) {
var trackInfo = trackMap[i];
lat = parseFloat(trackInfo.lat);
lon = parseFloat(trackInfo.lon);
var layergpx = new ol.layer.Vector({
source: new ol.source.Vector({
parser: new ol.parser.GPX(),
url: '${contextRoot}/gps/gpx2' + trackInfo.url
})
});
layers.push(layergpx);
}
}
このレイヤーの機能を別の Javascript 関数で取得したいと考えています。
マップをクリックしてポップアップを開く方法:
/**
* The Click Event to show the data
*/
var element = document.getElementById('popup');
var popup = new ol.Overlay({
element: element,
positioning: ol.OverlayPositioning.BOTTOM_CENTER,
stopEvent: false
});
map.addOverlay(popup);
map.on('singleclick', function(evt) {
map.getFeatures({
pixel: evt.getPixel(),
layers: vectorLayers,
success: function(layerFeatures) {
var feature = layerFeatures[0][0];
if (feature) {
var geometry = feature.getGeometry();
var coord = geometry.getCoordinates();
popup.setPosition(coord);
$(element).popover({
'placement': 'top',
'html': true,
'content': feature.get('desc')
});
$(element).popover('show');
} else {
$(element).popover('destroy');
}
}
});
});
しかし、マップ上をクリックしてこの機能を開くのではなく、テキストフィールドに座標を入力すると、マップが onclick イベントのようにこのポップアップを開きます。