传单标记簇-向每个标记写入持久数据

Question

我有一个通过传单实现的地图，并且有一个按钮将地图的边界发送到服务器，而服务器又用一个元素数组来响应我。每个元素都有一个纬度、一个经度和一个唯一的id。

我从服务器上得到的大致如下所示：

[{
    "poi_marker": "redMarker.png",
    "poi_id": 412, //this is my unique ID
    "poi_pos": {
        "lat": 17.53243,
        "lng": 14.52353
        }
},...]

到目前为止，我的代码如下所示：

function createAndAddMarker(prefill) {
    let marker = createMarker(prefill.poi_pos, prefill.poi_marker);

    map.addLayer(marker);
    marker._icon.dataset.uniqueId = prefill.poi_id;

    return marker;
}

function createMarker(coords, iconUrl) {
    let redMarker = L.icon({
        iconUrl: iconUrl,
        iconSize: [20, 32], // size of the icon
        iconAnchor: [10, 32], // point of the icon which will correspond to marker's location
    });

    let createdMarker = new L.marker(coords, {
        draggable: true,
        zIndexOffset: 101,
        icon: redMarker
    });

    return createdMarker;
}

而且效果很好！现在我尝试实现leaflet.markercluster，第一个函数看起来非常相似：

function createAndAddMarker(prefill) {
    let marker = createMarker(prefill.poi_pos, prefill.poi_marker);

    clusterLayer.addLayer(marker); //clusterLayer = layer that got created & added a when map did
    marker._icon.dataset.uniqueId = prefill.poi_id;

    return marker;
}

但是它已经有两个问题了。

1. 并不是所有的标记实际上都被绘制到地图上，因为有些标记已经聚集在一起了。对于这些没有被绘制的项目，marker._icon.dataset.uniqueId = prefill.poi_id会抛出一个错误，因为它找不到"marker._icon“，因为该标记似乎没有图标，只要它没有绘制。
2. 被绘制的标记会将uniqueId写入到它们上，但是如果我放大并使它们聚集起来，原始的marker+icon就会从DOM中删除，并在我再次放大时读取。不幸的是，它是在没有惟一Id的情况下读取的，因此我不知道如何持久化地将标记链接到唯一的Id.

。

我需要得到相应的唯一ID标记，每次我点击它，但不知道如何实现这一点。

非常感谢您的投入！

如果有什么不清楚的地方，请告诉我，我会尽量澄清。

提前鸣谢！

Answer 1

正如您非常清楚地看到的那样，当Leaflet.markercluster插件需要隐藏标记时(例如，如果它是集群的或远离视图端口)，可以从DOM /从头开始重新创建传单标记图标。

因此，将数据附加到该图标是很麻烦的。

但是您还有其他几种可能将数据附加到标记上，如Leaflet: Including metadata with CircleMarkers中所述

• 直接指向标记对象
• 中的选项，然后将标记
• 创建为标记功能属性

不一定需要使用DOM对象的数据集来附加JavaScript数据。