我有一个openlayers地图,可以加载几个kml文件,每个文件包含大约120个多边形地标。由于它们太多而无法显示每个弹出窗口,因此我必须创建一个外部地图菜单,以便用户可以单击这些功能中的任何一个并查看其信息/位置。
我使用此功能创建外部地图菜单,其中包含所有功能:
vEnergeticos.getSource().on('change', function(evt){
var source = evt.target;
if (source.getState() === 'ready') {
var energeticos = source.getFeatures();
for (var i in energeticos) {
var figura = energeticos[i].getGeometry().getExtent();
var myCenter = ol.extent.getCenter(figura);
$("#containerLeft").append("<a href=javascript:showMenuPopup(" + myCenter + "," + energeticos[i].get('ID') + ")>" + energeticos[i].get('name') + "</a><br>");
}
}
});
然后当用户点击任何这些选项时,会调用此函数:
function showMenuPopup(xx, yy, theID){
var myPixel = map.getPixelFromCoordinate([xx, yy]);
var elNombre = "";
var laDescripcion = "";
map.forEachFeatureAtPixel(myPixel, function(feature, layer) {
if (feature.get('ID') == theID){
elNombre = feature.get('name');
laDescripcion = feature.get('description');
}
});
popupTitle.innerHTML = elNombre;
popupContent.innerHTML = laDescripcion;
overlay.setPosition([xx,yy]);
}
这适用于某些情况,但是,当所选要素位于当前地图视图之外时,地图成功重新定位(overlay.setPosition([xx,yy]);),弹出窗口显示但弹出窗口是空的。如果用户从左侧菜单中单击时可以看到该功能,则弹出窗口会正确显示。
为了清楚,想象一下你看到的地图,你可以看到欧洲的一部分,然后你点击加拿大的一些项目(使用离地图菜单),你会看到地图重新定位在加拿大,但显示的弹出窗口是空的。如果再次单击该相同的离地图链接或该位置/缩放视图中可见的任何其他功能,则会正确显示弹出窗口。
我尝试使用“moveend(ol.MapEvent)”来修复此问题,因此弹出窗口是在重新定位地图后加载的,但它对我不起作用。在使用overlay.setPosition([xx,yy])开始移动地图之前调用moveend事件,并且我无法找到我可以使用的其他“重新定位后”事件。
我一直在努力解决这个问题,所以任何帮助都会非常感激。
此致!!
答案 0 :(得分:2)
问题是当前地图视图之外的功能不是&#34; AtPixel&#34;,所以你不会用map.forEachFeatureAtPixel捕获它们。
我建议您避免将坐标传递给showMenuPopup:您只需要功能ID,而不是检索showMenuPopup中的功能坐标。
$("#containerLeft").append("<a href=javascript:showMenuPopup('" + energeticos[i].getId() + "')>" + energeticos[i].get('name') + "</a><br>");
然后
function showMenuPopup(featureId){
var feature = vEnergeticos.getSource().getFeatureById(featureId);
var elNombre = feature.get('name');
var laDescripcion = feature.get('description');
var figura = feature.getGeometry().getExtent();
var myCenter = ol.extent.getCenter(figura);
popupTitle.innerHTML = elNombre;
popupContent.innerHTML = laDescripcion;
overlay.setPosition(myCenter);
}