在 openlayers 4 中使用外部超链接正确显示弹出窗口
show popups correctly with external hyperlinks in openlayers 4
我有一个 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]);),显示弹出窗口, 但是弹出窗口是空的。如果当用户从左侧菜单中单击时该功能可见,则弹出窗口会正确显示。
为了清楚起见,假设您正在看一张可以看到欧洲部分地区的地图,然后单击位于加拿大的某个项目(使用地图外菜单),您会看到地图在加拿大重新定位,但显示的弹出窗口是空的。如果您再次单击完全相同的地图外 link 或在该 location/zoom 视图中可见的任何其他要素,则弹出窗口会正确显示。
我尝试使用 "moveend (ol.MapEvent)" 来解决此问题,因此在重新定位地图后加载了弹出窗口,但它对我不起作用。 moveend 事件在地图开始使用 overlay.setPosition([xx,yy]) 移动之前被调用,我一直无法找到我可以使用的其他 "after-relocation" 事件。
我已经为此苦苦挣扎了很多天,所以非常感谢您的帮助。
问候!!
问题是当前地图视图之外的特征不是"AtPixel",所以你不会用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);
}
我有一个 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]);),显示弹出窗口, 但是弹出窗口是空的。如果当用户从左侧菜单中单击时该功能可见,则弹出窗口会正确显示。
为了清楚起见,假设您正在看一张可以看到欧洲部分地区的地图,然后单击位于加拿大的某个项目(使用地图外菜单),您会看到地图在加拿大重新定位,但显示的弹出窗口是空的。如果您再次单击完全相同的地图外 link 或在该 location/zoom 视图中可见的任何其他要素,则弹出窗口会正确显示。
我尝试使用 "moveend (ol.MapEvent)" 来解决此问题,因此在重新定位地图后加载了弹出窗口,但它对我不起作用。 moveend 事件在地图开始使用 overlay.setPosition([xx,yy]) 移动之前被调用,我一直无法找到我可以使用的其他 "after-relocation" 事件。
我已经为此苦苦挣扎了很多天,所以非常感谢您的帮助。
问候!!
问题是当前地图视图之外的特征不是"AtPixel",所以你不会用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);
}