传单:使用CircleMarkers包含元数据 [英] Leaflet: Including metadata with CircleMarkers

问题描述

我有一个用CircleMarkers填充的Leaflet地图.我想在每个圆圈中包含一个附加值(数据库ID)，以便当我单击该圆圈时，我可以获取该值并导航到其他地方.

I have a Leaflet map that I am populating with CircleMarkers. I would like to include an additional value (a database ID) with each circle so that when I click on the circle, I can get the value and navigate somewhere else.

我想直接将值添加到标记，并在整个featureGroup上使用回调函数，而不是向每个标记添加回调函数，因为我们要处理500多个标记，这将是一种性能拖动.

I would like to add the value directly to the marker and use a callback function on the entire featureGroup instead of adding a callback function to each marker, since we're dealing with over 500 markers and it would be a performance drag.

值得一提的是:我在Angular应用中使用Typescript，但它仍然是Leaflet.

Worth mentioning: I'm using Typescript inside an Angular app, but it's still 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
  });

推荐答案

FWIW，您有很多方法可以将自己的数据添加到Leaflet层(没有特定于Circle Markers，它与Markers相同，但也包括Polygons，Polylines等).

FWIW, you have plenty ways of adding your own data to Leaflet Layers (nothing specific to Circle Markers, it is the same for Markers, but also Polygons, Polylines, etc.).

例如参见:传单/传单#5629(将业务数据附加到图层)

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

In short, there are mainly 3 possible ways:

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

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

• 使用图层options(通常是实例化工厂的第二个参数)，如@nikoshr所示.和以前一样，避免与库选项名称冲突.
• Use the Layer options (usually the 2nd argument of the instantiation factory), as shown by @nikoshr. As previously, avoid collision with library option names.

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

• 使用图层GeoJSON properties. Leaflet不会将其用于内部目的，因此您可以完全自由地使用这些数据，而不会发生碰撞的风险.
• Use the Layer GeoJSON properties. Leaflet does not use those for internal purpose, so you have total freedom of this data, without any risk of collision.

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

这篇关于传单:使用CircleMarkers包含元数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！