問(wèn)題描述

我有一張使用 CircleMarkers 填充的傳單地圖.我想在每個(gè)圓圈中包含一個(gè)附加值(數(shù)據(jù)庫(kù) ID)，這樣當(dāng)我單擊圓圈時(shí)，我可以獲取該值并導(dǎo)航到其他地方.

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.

我想將值直接添加到標(biāo)記并在整個(gè) featureGroup 上使用回調(diào)函數(shù)，而不是為每個(gè)標(biāo)記添加回調(diào)函數(shù)，因?yàn)槲覀円幚沓^(guò) 500 個(gè)標(biāo)記和這會(huì)拖累性能.

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 應(yīng)用程序中使用 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，你有很多方法可以將你自己的數(shù)據(jù)添加到 Leaflet Layers (沒(méi)有特定于圓形標(biāo)記，標(biāo)記相同，還有多邊形，折線等).

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

參見(jiàn)例如:Leaflet/Leaflet #5629(將業(yè)務(wù)數(shù)據(jù)附加到層)

簡(jiǎn)而言之，主要有3種可能的方式:

In short, there are mainly 3 possible ways:

• 在 Leaflet Layer 實(shí)例化后直接添加一些屬性即可.確保避免與庫(kù)屬性和方法發(fā)生沖突.您可以在屬性名稱(chēng)中添加自己的前綴以減少?zèng)_突的機(jī)會(huì).

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

• 使用層 options(通常是實(shí)例化工廠的第二個(gè)參數(shù))，如 @nikoshr 所示.如前所述，避免與庫(kù)選項(xiàng)名稱(chēng)沖突.
• 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 不會(huì)將這些數(shù)據(jù)用于內(nèi)部目的，因此您可以完全自由地使用這些數(shù)據(jù)，沒(méi)有任何碰撞風(fēng)險(xiǎn).
• 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);
});

這篇關(guān)于傳單:使用 CircleMarkers 包含元數(shù)據(jù)的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！

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