Leaflet: Включая метаданные с CircleMarkers

Question

У меня есть карта Leaflet, которую я заполняю с помощью CircleMarkers.Я хотел бы включить дополнительное значение (идентификатор базы данных) в каждый круг, чтобы при нажатии на круг я мог получить значение и перейти в другое место.

Я хотел бы добавить значение непосредственно к маркеру и использовать функцию обратного вызова для всего featureGroup вместо добавления функции обратного вызова для каждого маркера, поскольку мы имеем дело с более чем 500 маркерами, и этобыть перетаскиванием производительности.

Стоит упомянуть: я использую Typescript внутри приложения Angular, но это все еще 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 (обычно 2-й аргумент фабрики создания экземпляров), как показано @nikoshr. Как и ранее, избегайте конфликтов с именами опций библиотеки.

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

• Используйте слой GeoJSON properties. Буклет не использует их для внутренних целей, поэтому у вас есть полная свобода этих данных без риска столкновения.

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

• События, генерируемые членами FeatureGroup, распространяются на объект FeatureGroup
• Объекты событий предоставляют элемент sourceTarget, дающий вам доступ к исходному маркеру
• Опции в слое доступны как marker.options

Оттуда вы можете передать свой идентификатор в качестве члена объекта параметров при построении маркеров и получить это значение при нажатии на маркер. Например:

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>

<div id='map'></div>