如何 select 在 OpenLayers 中重叠或相同几何图形的情况下哪个要素重叠
How to select which feature overlay in case of overlapping or same geometry in OpenLayers
我创建了一个地图,在其中单击要素会打开叠加层。但是如果多个特征重叠,或者更糟的是,当特征具有相同的几何形状时,我会遇到问题。
我使用此代码来显示叠加层。但是,当两个要素具有相同的几何形状时,只会显示一个叠加层。
const overlayContainerElement = document.querySelector('.overlay-container');
const overlayLayer = new ol.Overlay ({
element: overlayContainerElement
});
map.addOverlay(overlayLayer);
const overlayFeatureName = document.getElementById('feature-name');
const overlayFeatureAdditionalinfo = document.getElementById('feature-additionalinfo');
map.on('click', function(e){
overlayLayer.setPosition(undefined);
map.forEachFeatureAtPixel(e.pixel, function (feature, layer){
let clickedCoordinate = e.coordinate;
let clickedFeatureName = feature.get('Number')
let clickedFeatureInfo = feature.get('Text');
overlayLayer.setPosition(clickedCoordinate);
overlayFeatureName.innerHTML = clickedFeatureName;
overlayFeatureAdditionalinfo.innerHTML = clickedFeatureInfo;
},
{
layerFilter: function(layerCandidate){
if (layerCandidate.get('title') === "Title") {
return 1;
}
}
})
});
知道如何配置方法以便 select 我想查看哪个功能详细信息吗?因此,单击后,如果鼠标下有两个功能,则会显示一个列表 select 我想打开的叠加层。
您可以使用 map.forEachFeatureAtPixel
方法收集所有被点击的特征,然后使用 特征数组,而不是在 map.forEachFeatureAtPixel
方法中更新叠加层.
像这样的东西(未测试/未完成):
var features = [];
map.forEachFeatureAtPixel(e.pixel, function (feature, layer){
features.push(feature);
},
{
layerFilter: function(layerCandidate){
if (layerCandidate.get('title') === "Title") {
return 1;
}
}
});
// And then, you could iterate on your features and show information as a list in your overlay.
// todo - loop here
/*
let clickedCoordinate = e.coordinate;
let clickedFeatureName = feature.get('Number')
let clickedFeatureInfo = feature.get('Text');
overlayLayer.setPosition(clickedCoordinate);
overlayFeatureName.innerHTML = clickedFeatureName;
overlayFeatureAdditionalinfo.innerHTML = clickedFeatureInfo;
*/
您可以让叠加层以“摘要”方式显示结果列表,然后单击其中一个功能名称(例如)可以在叠加层中显示其完整详细信息。
HTH
我创建了一个地图,在其中单击要素会打开叠加层。但是如果多个特征重叠,或者更糟的是,当特征具有相同的几何形状时,我会遇到问题。
我使用此代码来显示叠加层。但是,当两个要素具有相同的几何形状时,只会显示一个叠加层。
const overlayContainerElement = document.querySelector('.overlay-container');
const overlayLayer = new ol.Overlay ({
element: overlayContainerElement
});
map.addOverlay(overlayLayer);
const overlayFeatureName = document.getElementById('feature-name');
const overlayFeatureAdditionalinfo = document.getElementById('feature-additionalinfo');
map.on('click', function(e){
overlayLayer.setPosition(undefined);
map.forEachFeatureAtPixel(e.pixel, function (feature, layer){
let clickedCoordinate = e.coordinate;
let clickedFeatureName = feature.get('Number')
let clickedFeatureInfo = feature.get('Text');
overlayLayer.setPosition(clickedCoordinate);
overlayFeatureName.innerHTML = clickedFeatureName;
overlayFeatureAdditionalinfo.innerHTML = clickedFeatureInfo;
},
{
layerFilter: function(layerCandidate){
if (layerCandidate.get('title') === "Title") {
return 1;
}
}
})
});
知道如何配置方法以便 select 我想查看哪个功能详细信息吗?因此,单击后,如果鼠标下有两个功能,则会显示一个列表 select 我想打开的叠加层。
您可以使用 map.forEachFeatureAtPixel
方法收集所有被点击的特征,然后使用 特征数组,而不是在 map.forEachFeatureAtPixel
方法中更新叠加层.
像这样的东西(未测试/未完成):
var features = [];
map.forEachFeatureAtPixel(e.pixel, function (feature, layer){
features.push(feature);
},
{
layerFilter: function(layerCandidate){
if (layerCandidate.get('title') === "Title") {
return 1;
}
}
});
// And then, you could iterate on your features and show information as a list in your overlay.
// todo - loop here
/*
let clickedCoordinate = e.coordinate;
let clickedFeatureName = feature.get('Number')
let clickedFeatureInfo = feature.get('Text');
overlayLayer.setPosition(clickedCoordinate);
overlayFeatureName.innerHTML = clickedFeatureName;
overlayFeatureAdditionalinfo.innerHTML = clickedFeatureInfo;
*/
您可以让叠加层以“摘要”方式显示结果列表,然后单击其中一个功能名称(例如)可以在叠加层中显示其完整详细信息。
HTH