Question

我有一张Leaflet地图，我用CircleMarkers填充。我想在每个圆圈中包含一个附加值（数据库ID），这样当我点击圆圈时，我可以获得值并导航到其他地方。

我想将值直接添加到标记并在整个featureGroup上使用回调函数，而不是为每个标记添加回调函数，因为我们正在处理超过500个标记并且它将是一个性能拖累。

值得一提：我在Angular应用程序中使用Typescript，但它仍然是Leaflet。

我尝试过的事情：

  var data = [
    {lat: 20.45, lng: -150.2, id: 44},
    {lat: 23.45, lng: -151.7, id: 45},
  ]
  var points = [];

  data.forEach((d) => {
    // How do I add an additional variable to this circleMarker?
    points.push(circleMarker(latLng(d.lat, d.lng), { radius: 5}));
  })

  var group = featureGroup(points);

  group.on("click", function (e) {
    console.log(e);
    // This is where I would like to get the ID number of the record
  });

Answer 1

针对FeatureGroup成员触发的事件将传播到FeatureGroup对象
事件对象公开sourceTarget成员，允许您访问源标记
图层中的选项可以marker.options

从那里开始，您可以在构建标记时将id作为options对象的成员传递，并在单击标记时检索此值。例如：

var points = data.map((datum) => {
    return L.circleMarker(datum, {radius: 5, id: datum.id});
});

var group = L.featureGroup(points);
group.addTo(map);

group.on("click", (e) => {
    console.log(e.sourceTarget.options.id);
});

和演示

var data = [
	{lat: 20.45, lng: -150.2, id: 44},
	{lat: 23.45, lng: -151.7, id: 45},
]
var points = [];

var map = L.map('map', {
    center: [20.45, -150.2],
    zoom: 4
});

var points = data.map(function (datum) {
    return L.circleMarker(datum, {radius: 5, id: datum.id});
});

var group = L.featureGroup(points);
group.addTo(map);

group.on("click", function (e) {
    console.log(e.sourceTarget.options.id);
});

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>

<div id='map'></div>

Answer 2

FWIW，您有很多方法可以将自己的数据添加到Leaflet图层（没有特定于Circle Markers，对于Markers来说也是如此，但是Polygons，Polylines等也是如此。）

例如参见：Leaflet/Leaflet #5629 (Attach business data to layers)

简而言之，主要有三种可能的方式：

在实例化后，直接将一些属性添加到Leaflet Layer。确保避免与库属性和方法发生冲突。您可以将自己的前缀添加到属性名称以减少发生冲突的可能性。

var marker = L.marker(latlng);
marker.myLibTitle = 'my title';

使用Layer options（通常是实例化工厂的第二个参数），如@nikoshr所示。如前所述，避免与库选项名称冲突。

L.marker(latlng, {
  myLibTitle: 'my title'
});

使用Layer GeoJSON properties。 Leaflet不会将这些内容用于内部目的，因此您可以完全自由地获取此数据，而不会有任何冲突风险。

L.Layer.include({
  getProps: function () {
    var feature = this.feature = this.feature || {}; // Initialize the feature, if missing.
    feature.type = 'Feature';
    feature.properties = feature.properties || {}; // Initialize the properties, if missing.
    return feature.properties;
  }
});

var marker = L.marker(latlng);

// set data
marker.getProps().myData = 'myValue';

// get data
myFeatureGroup.on('click', function (event) {
  var source = event.sourceTarget;
  console.log(source.getProps().myData);
});

Leaflet：包含CircleMarkers的元数据

2 个答案: