使用 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),{

                icon: new L.NumberedDivIcon({number: '1' }),

                title:

                "marker_1"}).addTo(fg).bindPopup("1<br><b>#0013</b><br>WA0TJT<br>Keith Kaiser<br>Platte  Co., MO Dist: A<br>39.202911, -94.602887<br>EM29QE").openPopup().on("contextmenu", drawCircles);

                $(WA0TJT._icon).addClass("bluemrkr");

                markers.push(WA0TJT);

有了这样的新功能

function drawCircles(event e) {

  L.circle(e.target.getLatLng(),  {radius: <radius in metres>}).addTo(map);

  // ... any more circles you need ...

  }

Answer 2

var i;

   var r = 1609.34;  // in meters = 1 mile, 4,828.03 meters in 3 miles

   var circleOptions = {

       color: 'blue',

       fillColor: '#69e',

       fillOpacity: 0

   }

   for (i=0 ; i < 3; i++ ) {

       r = (r * i) + r;

       alert(lat+", "+lng);

       var circle = L.circle([lat, lng], r, circleOptions);

            circle.addTo(map); 

            r = 1609.34;  // reset r so r calculation above works for each 1 mile step 

    }