如何在Angular中弹出显示多边形坐标

Question

这里是在传单地图中绘制多边形的功能。

onDrawCreated(e: any) {
const { layerType, layer } = e;
if (layerType === "polygon") {
const polygonCoordinates = layer._latlngs;
console.log(polygonCoordinates);

}
this.drawnItems.addLayer(e.layer);
}

这里是多边形坐标；

Array(1)
0
: 
Array(4)
0
: 
LatLng {lat: 54.23955053156179, lng: -112.10449218750001}
1
: 
LatLng {lat: 50.064191736659104, lng: -108.4130859375}
2
: 
LatLng {lat: 48.19538740833338, lng: -116.80664062500001}
3
: 
LatLng {lat: 52.07950600379697, lng: -115.66406250000001}
length
: 
4
[[Prototype]]
: 
Array(0)
length
: 
1
[[Prototype]]
: 
Array(0)

如何用弹出窗口在函数上显示此坐标？

提前感谢您的帮助！

Answer 1

有很多方法可以做到这一点。一种方法是构建一个包含所有lat lngs的数组，然后将它们连接到弹出窗口中，以便将它们可视化。然后使用多边形的bindPopup和openPopup方法可以显示它们。

onDrawCreated(e: any) {
const { layerType, layer } = e;
if (layerType === "polygon") {
const polygonCoordinates = layer._latlngs;
console.log(polygonCoordinates);
const allCoordsInOneArray = [];
polygonCoordinates[0].forEach((item) => {
allCoordsInOneArray.push(item.lat.toFixed(2));
allCoordsInOneArray.push(item.lng.toFixed(2));
});
console.log(allCoordsInOneArray);
layer
.bindPopup(`Polygon coordinates are ${allCoordsInOneArray.join(", ")}`)
.openPopup();
}
this.drawnItems.addLayer(e.layer);
}

演示

通常情况下，一旦形成多边形，弹出窗口就会自动触发。如果它不简单地点击多边形，你就会打开它。