javascript - 使用 Leaflet 和 GeoJSON 将同心圆添加到标记周围特定距离的 map 上

Question

这个问题( leaflet concentric circles (angular 2) )很相似，但由于它不完全相同并且没有人回答它，我想我会重新开始。

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

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

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

我找不到任何例子，唯一的类似问题还没有得到解答。有人可以告诉我该怎么做吗？我使用 OSM map 。

使每个标记的代码(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 Hook ，该 Hook 调用使用 L.circle 向 map 添加圆圈的函数。

编辑:所以我查看了您网站的源代码，每个标记的 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 ...
  }