传单:使用 CircleMarkers 包含元数据

2022-01-12 00:00:00 leaflet javascript

我有一张使用 CircleMarkers 填充的传单地图.我想在每个圆圈中包含一个附加值(数据库 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 Layers (没有特定于圆形标记，标记相同，还有多边形，折线等).

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.).

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

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

In short, there are mainly 3 possible ways:

  • 在 Leaflet Layer 实例化后直接添加一些属性即可.确保避免与库属性和方法发生冲突.您可以在属性名称中添加自己的前缀以减少冲突的机会.
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);
});

相关文章