問題描述

我有一張使用 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);
});

這篇關于傳單:使用 CircleMarkers 包含元數據的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！

【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題，如果有圖片或者內容侵犯了您的權益，請聯系我們刪除處理，感謝您的支持！