使用 Leaflet 和 GeoJSON 在标记周围特定距离处向地图添加同心圆

Question

这个问题（传单同心圆（角 2））是相似的，但由于它不完全相同并且没有人回答它，我想我会重新开始。

My Leaflet 地图由在 PHP 中从 MySql 数据库创建的标记填充。如果你想看，这里有一个链接；https://net-control.us/map1Test.php。

我希望能够右键单击任何给定的标记，并在该标记周围以英里 ( example: 2, 5, 10, 15)为单位的不同距离绘制一系列同心圆。

我想我需要用GeoJSON来做到这一点，但是任何可以满足我需要的方法都可以。我只是还没有想出如何首先在我需要的距离处绘制圆圈，其次如何允许右键单击标记以显示它们。

我找不到任何例子，唯一类似的问题还没有得到回答。有人可以告诉我如何做到这一点吗？我使用 OSM 地图。

使每个标记看起来像这样的代码（PHP）；

$markers .= " var $callsign = new L.Marker(new L.LatLng($row[koords]),{ icon: new L.{$row[iconColor]}({number: '$rowno' }), title: \"marker_$rowno\"}).addTo(fg).bindPopup(\"$rowno<br>$row[mrkrfill]\").openPopup(); $($callsign._icon).addClass(\"$row[classColor]\"); markers.push($callsign); \n";

Answer 1

您不共享创建标记的代码，因此这必然是理论上的...创建标记时，添加一个contextmenu钩子，该钩子调用用于L.circle向地图添加圆圈的函数。编辑：所以我偷看了你网站的源代码，你的每个标记的 Javascript 片段应该是这样的：var WA0TJT = new L.Marker(new L.LatLng(39.202911,-94.602887),{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; icon: new L.NumberedDivIcon({number: '1' }),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "marker_1"}).addTo(fg).bindPopup("1<br><b>#0013</b><br>WA0TJT<br>Keith Kaiser<br>Platte&nbsp; Co., MO Dist: A<br>39.202911, -94.602887<br>EM29QE").openPopup().on("contextmenu", drawCircles);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(WA0TJT._icon).addClass("bluemrkr");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; markers.push(WA0TJT);有了这样的新功能function drawCircles(event e) {&nbsp; L.circle(e.target.getLatLng(),&nbsp; {radius: <radius in metres>}).addTo(map);&nbsp; // ... any more circles you need ...&nbsp; }

Answer 2

var i;&nbsp; &nbsp;var r = 1609.34;&nbsp; // in meters = 1 mile, 4,828.03 meters in 3 miles&nbsp; &nbsp;var circleOptions = {&nbsp; &nbsp; &nbsp; &nbsp;color: 'blue',&nbsp; &nbsp; &nbsp; &nbsp;fillColor: '#69e',&nbsp; &nbsp; &nbsp; &nbsp;fillOpacity: 0&nbsp; &nbsp;}&nbsp; &nbsp;for (i=0 ; i < 3; i++ ) {&nbsp; &nbsp; &nbsp; &nbsp;r = (r * i) + r;&nbsp; &nbsp; &nbsp; &nbsp;alert(lat+", "+lng);&nbsp; &nbsp; &nbsp; &nbsp;var circle = L.circle([lat, lng], r, circleOptions);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; circle.addTo(map);&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; r = 1609.34;&nbsp; // reset r so r calculation above works for each 1 mile step&nbsp;&nbsp; &nbsp; }