传单：包括带有 CircleMarkers 的元数据

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

FWIW，您有很多方法可以将自己的数据添加到传单层（没有特定于圆形标记，标记也是如此，多边形、折线等也是如此）。

参见例如：Leaflet/Leaflet #5629（将业务数据附加到层）

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

• 只需在实例化后直接向 Leaflet 层添加一些属性即可。确保避免与库属性和方法发生冲突。您可以将自己的前缀添加到属性名称以减少冲突的机会。

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

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

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

• 使用层 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);
});

Answer 2

• 在 a 的成员上触发的事件FeatureGroup会传播到该FeatureGroup对象
• 事件对象公开一个sourceTarget成员，使您可以访问源标记
• 图层中的选项可以通过以下方式访问marker.options

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

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 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;
}