在layerGroup Leaflet.js的每个标记中添加圆圈

Posted 2021-04-13

我正在使用Leaflet来实现一些“地图的东西”。我将创建一些组，但我想知道是否可以将circle应用于layerGroup的每个标记而不是单独执行。

我知道：

L.circle([-33.519604, -70.596107], 1609.34, {
    color: 'blue',
    fillColor: 'blue'
  }

但有更好的方法吗？

var L41 = L.marker([-33.431484, -70.584641]).bindPopup('Francisco Bilbao'),
    L42 = L.marker([-33.426224, -70.590973]).bindPopup('Cristóbal Colón'),
    L43 = L.marker([-33.569405, -70.583611]).bindPopup('Elisa Correa');

var L4 = L.layerGroup([L41, L42, L43]);

var mymap = L.map('map', {
  center: [-33.4560406, -70.6681727],
  zoom: 11,
  layers: L4
});

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
  attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
  maxZoom: 18,
  id: 'mapbox.streets',
  accessToken: 'xxxxxxxxx'
}).addTo(mymap);

var linea4 = {
  "Línea 4": L4
}

L.control.layers(null, linea4).addTo(mymap);

答案

LayerGroup有一个getLayers method，它返回添加到组中的所有图层的数组。您可以使用该数组为每个标记对象创建一个圆。例如 ：

L4.getLayers().forEach(function(obj) {
    if (obj instanceof L.Marker) { // test if the object is a marker
        // get the position of the marker with getLatLng
        // and draw a circle at that position

        L.circle(obj.getLatLng(), 1609.34, {
            color: 'blue',
            fillColor: 'blue'
        }).addTo(map);
    }
});

你也可以使用更简洁的eachLayer作为评论中提到的@ghybs：

L4.eachLayer(function(obj) { ...

还有一个演示

var L41 = L.marker([-33.431484, -70.584641]).bindPopup('Francisco Bilbao'),
    L42 = L.marker([-33.426224, -70.590973]).bindPopup('Cristóbal Colón'),
    L43 = L.marker([-33.569405, -70.583611]).bindPopup('Elisa Correa');

var L4 = L.layerGroup([L41, L42, L43]);

var map = L.map('map', {
  center: [-33.4560406, -70.6681727],
  zoom: 11,
  layers: L4
});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L4.getLayers().forEach(function(l) {
    if (l instanceof L.Marker) {
        L.circle(l.getLatLng(), 1609.34, {
            color: 'blue',
            fillColor: 'blue'
        }).addTo(map);
    }
});

html, body {
  height: 100%;
  margin: 0;
}
#map {
  width: 100%;
  height: 100%;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>

<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
 
 <div id='map'></div>

以上是关于在layerGroup Leaflet.js的每个标记中添加圆圈的主要内容，如果未能解决你的问题，请参考以下文章

Leaflet.js 地图不占用全宽 [React.js]

Leaflet.js - 在地图视图上拟合 geoJSON 坐标

Leaflet.js 将地图集中在一组标记上

如何在 iframe 中使用 Leaflet.js 中的地图

在 Leaflet.js 地图周围包裹 GeoJSON 对象

Leaflet.js 中未显示自定义 Mapbox 瓦片集