如何通过无限平移获取投影要素的坐标 (OpenLayers)
How to get coordinates of a projected feature with infinite panning (OpenLayers)
我正在创建一个弹出控件,用于在用户将鼠标移到特定图层上的要素上时显示信息。我希望弹出窗口捕捉到要素的几何(点)而不是使用鼠标位置的坐标。
问题是这在主要特征上运行良好,但是,当向左或向右平移地球自转一圈并将鼠标悬停在投影特征上时,弹出窗口会越过原始坐标处的主要特征,而不是扩展平移视图中的功能。
这是我的代码:
const container = document.getElementById('popup');
const content = document.getElementById('popup-content');
var popup = new ol.Overlay({
element: container,
positioning: "bottom-center",
stopEvent: false
});
map.addOverlay(popup);
map.on("pointermove", function (e) {
if (e.dragging) {
popup.setPosition(undefined);
return;
}
const feature = map.forEachFeatureAtPixel(e.pixel,
function (feature, layer) {
if (layer === participantLayer) {
return feature;
}
}, { hitTolerance: 10 });
if (feature) {
popup.setPosition(feature.getGeometry().getCoordinates());
content.innerHTML = "...";
} else {
popup.setPosition(undefined);
}
});
我认为问题与使用 feature.getGeometry().getCoordinates()
有关,因为它 return 只是实际要素的坐标,而不是投影坐标。有没有办法 return 投影要素几何位置的像素坐标?
let featureCoords = feature.getGeometry().getCoordinates();
const projWidth = ol.extent.getWidth(map.getView().getProjection().getExtent());
const worldsAway = Math.round(e.coordinate[0] / projWidth);
featureCoords[0] = featureCoords[0] + worldsAway * projWidth;
popup.setPosition(featureCoords);
试试这个。
我正在创建一个弹出控件,用于在用户将鼠标移到特定图层上的要素上时显示信息。我希望弹出窗口捕捉到要素的几何(点)而不是使用鼠标位置的坐标。
问题是这在主要特征上运行良好,但是,当向左或向右平移地球自转一圈并将鼠标悬停在投影特征上时,弹出窗口会越过原始坐标处的主要特征,而不是扩展平移视图中的功能。
这是我的代码:
const container = document.getElementById('popup');
const content = document.getElementById('popup-content');
var popup = new ol.Overlay({
element: container,
positioning: "bottom-center",
stopEvent: false
});
map.addOverlay(popup);
map.on("pointermove", function (e) {
if (e.dragging) {
popup.setPosition(undefined);
return;
}
const feature = map.forEachFeatureAtPixel(e.pixel,
function (feature, layer) {
if (layer === participantLayer) {
return feature;
}
}, { hitTolerance: 10 });
if (feature) {
popup.setPosition(feature.getGeometry().getCoordinates());
content.innerHTML = "...";
} else {
popup.setPosition(undefined);
}
});
我认为问题与使用 feature.getGeometry().getCoordinates()
有关,因为它 return 只是实际要素的坐标,而不是投影坐标。有没有办法 return 投影要素几何位置的像素坐标?
let featureCoords = feature.getGeometry().getCoordinates();
const projWidth = ol.extent.getWidth(map.getView().getProjection().getExtent());
const worldsAway = Math.round(e.coordinate[0] / projWidth);
featureCoords[0] = featureCoords[0] + worldsAway * projWidth;
popup.setPosition(featureCoords);
试试这个。