叶片中的多边形边界

Question

我在地图中有几个标记，我想为不同颜色的地图内部区域着色。我已经尝试过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); 

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

Answer 1

您也可以使用L.Polygon。

做这样的事情：

var polygon = L.polygon([
    marker1,
    marker2,
    marker3,
], {
   fillColor: '#f03' // My custom color here
}
).addTo(mymap);

Answer 2

不确定你想要达到的目的是什么？

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

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

编辑：

至于创建Convex Hull，您还可以使用Turf，特别是turf.convex。

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