Leafletjs中的L.polygon边界

Posted 2023-02-23

【中文标题】Leafletjs中的L.polygon边界

【英文标题】：L.polygon boundings in leafletjs

【发布时间】：2016-07-13 08:09:57

【问题描述】：

我在地图中有几个标记，我想为地图内的区域涂上不同颜色的颜色。我试过 L.multiPolygon 、 L.polygon 、 L.rectangle ，但除了我想要什么都没有。我想我唯一的选择是计算所有标记的边界并根据这些点绘制多边形，对吧？

这里是代码

<c:forEach var="marker" items="$markers" varStatus="rowIndex">
        var marker$rowIndex.index = L.marker([$marker.lat,$marker.lng],icon: yellowIcon,title: '$marker.title').addTo(mymap)
        .bindPopup( "$marker.htmlMarkerPopupCode").openPopup();
        storeCoordinate($marker.lat, $marker.lng, polygonPoints);
</c:forEach>

 var polygon = L.polygon(polygonPoints);

polygon.setStyle(fillColor: '#0000FF');
polygon.setStyle(color: 'red');
polygon.setStyle(weight:1);   
polygon.setStyle(fillOpacity: 0.5);
mymap.addLayer(polygon); 

我想实现类似这张图的东西：

【参考方案1】：

您也可以使用 L.Polygon。

只要做这样的事情：

var polygon = L.polygon([
    marker1,
    marker2,
    marker3,
], 
   fillColor: '#f03' // My custom color here

).addTo(mymap);

【参考方案2】：

不确定您要达到的具体目标是什么？

您可能对计算标记区域的Convex Hull 感兴趣。

在这种情况下，您应该能够在 Internet 上找到一些 javascript 实现。例如，您可以在 Leaflet.markercluster 插件中查看它是如何完成的：https://github.com/Leaflet/Leaflet.markercluster/blob/master/src/MarkerCluster.QuickHull.js

---

编辑：

至于创建凸包，你也可以使用Turf，特别是turf.convex。

Turf 还为您提供了许多其他功能，包括turf.concave。