8

我正在使用 mapBoxGL 1.0 版 JS 库，并且正在使用集群地图功能。但我注意到，在某些缩放级别上，图层中的某些符号会消失，然后会在其他缩放级别上再次出现。我似乎无法弄清楚配置有什么问题。我附上了图像，并注意到集群总大小也不对应于总符号。 在此处输入图像描述

在此处输入图像描述

在此处输入图像描述

map.addSource("dayplaces", {
    type: "geojson",
    // Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
    // from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
    data: geojson,
    cluster: true,
    clusterMaxZoom: 12, // Max zoom to cluster points on
    clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
});

map.addLayer({
    id: "clusters",
    type: "circle",
    source: "dayplaces",
    filter: ["has", "point_count"],
    paint: {
        // Use step expressions (https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-step)
        // with three steps to implement three types of circles:
        //   * Blue, 20px circles when point count is less than 100
        //   * Yellow, 30px circles when point count is between 100 and 750
        //   * Pink, 40px circles when point count is greater than or equal to 750
        "circle-color": [
            "step",
            ["get", "point_count"],
            "#51bbd6",
            100,
            "#f1f075",
            750,
            "#f28cb1"
        ],
        "circle-radius": [
            "step",
            ["get", "point_count"],
            20,
            100,
            30,
            750,
            40
        ]
    }
});

map.addLayer({
    id: "cluster-count",
    type: "symbol",
    source: "dayplaces",
    filter: ["has", "point_count"],
    layout: {
        "text-field": "{point_count_abbreviated}",
        "text-font": ["Open Sans Semibold"],
        "text-size": 12,
        "text-allow-overlap": true
    }
});

// https://svgtopng.com/
// https://www.flaticon.com/free-icon/map-marker_34468
map.loadImage('https://cdn.glitch.com/0a178325-3429-4356-9e0e-c6aed80fea14%2F34468green.png?v=1560084647010', function(error, image) {
    if (!error) {
        map.addImage('pin', image);
        map.addLayer({
            id: "unclustered-point",
            type: "symbol",
            source: "dayplaces",
            filter: ["!", ["has", "point_count"]],
            "layout": {
                "visibility": "visible",
                "icon-image": "pin",
                "icon-size": 0.08,
                "icon-allow-overlap": true,
                "text-field": ["get", "order"],
                "text-font": ["Open Sans Semibold"],
                "text-allow-overlap": true,
                "text-size": 11,
                "text-offset": [0, 0.2],
                "text-anchor": "bottom"
            }
        });
    } else {
        console.log("MAP LOAD IMAGE ERROR:" + error);
    }

});



// inspect a cluster on click
map.on('click', 'clusters', function(e) {
    var features = map.queryRenderedFeatures(e.point, {
        layers: ['clusters']
    });
    var clusterId = features[0].properties.cluster_id;
    map.getSource('dayplaces').getClusterExpansionZoom(clusterId, function(err, zoom) {
        if (err)
            return;

        map.easeTo({
            center: features[0].geometry.coordinates,
            zoom: zoom
        });
    });
});
4

1 回答 1

2

在Mapbox GL JS 中处理大型 GeoJSON 源的文档中，它指出：

Mapbox GL GeoJSON 源由客户端即时转换为 Mapbox 矢量图块

在此过程中，会进行简化以提高性能。在添加源时， 可以使用容差属性来控制这种简化。公差的 Mapbox 文档如下：

可选号码。默认为 0.375。Douglas-Peucker 简化容差（更高意味着更简单的几何形状和更快的性能）。

因此，要停止简化，必须tolerance: 0在添加源时进行设置。添加不简化的 GeoJSON 源的示例：

this.map.addSource(`example-source`, <any>{
  type: 'geojson',
  data: exampleData,
  tolerance: 0
});

这解决了我的问题，希望它有所帮助。

于 2020-12-18T16:25:58.863 回答