Leaflet在更新时调整geoJson图层的大小

时间:2017-03-27 12:09:53

标签: javascript maps leaflet

我需要使用缩放更改的聚合数据更新传单地图,以便在用户更改缩放时,在后端执行聚合,并将数据发送到地图。

我在显示来自后端的数据时遇到问题,因为当数据更改时,地图不会更新,然后如果我平移,地图会更新,但是带有标记的图层会移动并调整大小以适合视口,所以标记不在它们的实际坐标中(附图中更好地解释了这一点)。

初始地图状态: Initial state

缩放和更新后(地图未检测到更改): After zoom and update

小平移后(地图检测到更改,但geoJson图层被移动并调整大小): After small pan

更新地图的代码(它删除旧的geoJson图层并创建要绘制的新图层):

refreshMap(data) {
    if (this.layer) {
        this.layer.clearLayers();
    }

    let pointToLayer = (feature, latlng) => {
        let radius = 10 + Math.log2(feature.properties.count);
        let circleMarker = L.circleMarker(latlng, {
            radius,
            fillColor: uiSettings.map.cluster.fillColor,
            fillOpacity: uiSettings.map.cluster.fillOpacity,
            color: uiSettings.map.cluster.strokeColor,
            weight: uiSettings.map.cluster.strokeWeight,
            opacity: uiSettings.map.cluster.strokeOpacity,
        });
        circleMarker.bindTooltip(`${feature.properties.count}`, { permanent: true });
        return circleMarker;
    };

    this.layer = L.geoJSON(data, { pointToLayer });
    this.layer.addTo(this.map);
}

我无法谷歌类似的案例,所以也许有人有这个问题,或者可以说是什么原因导致它?

0 个答案:

没有答案