2016-07-13 15 views
2

私はマップにいくつかのマーカーを持っています。私は別の色のマップ内の領域を色付けしたいと思います。私はL.multiPolygon、L.polygon、L.rectangleを試しましたが、何もしません。私は私の唯一の選択肢は、すべてのマーカーの境界線を計算し、これらの点に基づいてポリゴンを描画することだと思いますか?リーフレットのL.ポリゴン境界

ここでコード

<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); 

enter image description here

私はこの絵に似た何かを達成したいと思います:

enter image description here

答えて

0

あなたにもL.Polygonを使用することができます。

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

ないあなたが達成しようとしている正確に何を確認してください。

はちょうどこのような何かを?

マーカ領域のConvex Hullを計算したい場合があります。

この場合、インターネット上でJavaScriptの実装を見つけることができるはずです。例えば、あなたはそれがLeaflet.markerclusterプラグインで行われているかを見ることができます:https://github.com/Leaflet/Leaflet.markercluster/blob/master/src/MarkerCluster.QuickHull.js


EDIT:

凸包を作成するとして、あなたはまた、turf.convex特に、Turfを使用することができます。

ターフもturf.concaveを含む他の多くの機能を提供しています。

関連する問題