Javascript OL3:按坐标从图层获取要素
我想通过坐标获得图层的特征。 此外,我想在弹出窗口中打开此功能,到目前为止,我已通过onclick事件解决了此问题。但我想通过给出特征的坐标并打开特征的弹出窗口来实现 我有一个带有地图的图层和一个带有以下特征的图层:Javascript OL3:按坐标从图层获取要素,javascript,openlayers-3,Javascript,Openlayers 3,我想通过坐标获得图层的特征。 此外,我想在弹出窗口中打开此功能,到目前为止,我已通过onclick事件解决了此问题。但我想通过给出特征的坐标并打开特征的弹出窗口来实现 我有一个带有地图的图层和一个带有以下特征的图层: if (trackMap != null) { for (var i = 0; i < trackMap.length; i++) { var trackInfo = trackMap[i]; lat = parseFloat(trackInfo.lat)
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);
}
}
但我不希望通过在地图上单击此功能来打开此功能,而是希望通过在文本字段中输入坐标来打开此功能,然后地图将打开此弹出窗口,就像在onclick事件中一样。查看此示例,看看它是否有助于您:
根据您所了解的情况,您希望从这个图层rgpx图层获得一个功能,对吗?为什么,您不想从选择的回调函数创建弹出窗口吗?你可以使用任何JS函数作为回调函数。我想,我已经实现了你的建议,只是没有发布。对不起。问题是,我不知道特征的像素,但我知道特征的坐标。我想打开弹出窗口,就像onclick事件一样,但是通过输入坐标。你可以添加一个向量层,在其中添加一个特征(点),然后获取该点(特征)的像素。查看我的更新,你可以放弃我以前的评论。只需输入坐标,就可以得到像素。我如何调用这个函数?我试过:
ol.Map.prototype.getPixelFormCoordinate(ol.proj.transform([doubleLon,doubleLat],'EPSG:4326','EPSG:3857'))
和Map.getPixelFormCoordinate(ol.proj.transform([doubleLon,doubleLat],'EPSG:4326','EPSG:3857'))
但我有点卡住或困惑:-/只需在地图对象中使用它。myMap=newol.Map(…);像素=myMap.getPixelFormCoordinate(ol.proj….)
/**
* 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');
}
}
});
});
var displayFeatureInfo = function(pixel) {
map.getFeatures({
pixel: pixel,
layers: [vector],
success: function(featuresByLayer) {
var features = featuresByLayer[0];
var info = [];
for (var i = 0, ii = features.length; i < ii; ++i) {
info.push(features[i].get('name'));
}
document.getElementById('info').innerHTML = info.join(', ') || ' ';
}
});
/**
* @param {ol.Coordinate} coordinate Coordinate.
* @return {ol.Pixel} Pixel.
*/
ol.Map.prototype.getPixelFromCoordinate = function(coordinate) {
var frameState = this.frameState_;
if (goog.isNull(frameState)) {
return null;
} else {
var vec2 = coordinate.slice(0, 2);
return ol.vec.Mat4.multVec2(frameState.coordinateToPixelMatrix, vec2, vec2);
}
};