如何仅在非聚簇标记上而不在群集上显示标记图标

时间:2019-09-06 06:32:25

标签: angular mapbox-gl

仅在非聚集标记上显示标记图标,而在群集上不显示标记图标。我正在使用mapbox gl聚类,因此我有一些标记是聚类的,而其他标记只是常规的单个标记。 仅在非聚集标记上显示标记图标,而不在群集上显示标记图标 仅在非聚簇标记上显示标记图标,而不在群集上显示

    map.on('load', function() {
            // Add a new source from our GeoJSON data and set the
            // 'cluster' option to true. GL-JS will add the point_count property to your source data.

             map.addSource("earthquakes", {
               type: "geojson",
               data: geojson,
               cluster: true,
               clusterMaxZoom: 14,
               clusterRadius: 70
            });

            map.addLayer({
               id: "clusters",
               type: "circle",
               source: "earthquakes",
               filter: ["has", "point_count"],
               paint: {

                  "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: "earthquakes",
               filter: ["has", "point_count"],
               layout: {
                  "text-field": "{point_count_abbreviated}",
                  "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
                  "text-size": 12
               }
            });
            map.addLayer({
               id: "unclustered-point",
               type: "circle",
               source: "earthquakes",
               filter: ["!", ["has", "point_count"]],
               paint: {
                  "circle-color": "#11b4da",
                  "circle-radius": 4,
                  "circle-stroke-width": 1,
                  "circle-stroke-color": "#fff"
               }
            });

            map.on('click', 'clusters', function (e) {
               var features = map.queryRenderedFeatures(e.point, { layers: ['clusters'] });
               var clusterId = features[0].properties.cluster_id;
               map.getSource('earthquakes').getClusterExpansionZoom(clusterId, function (err, zoom) {
                  if (err)
                     return;
                  map.easeTo({
                     center: features[0].geometry.coordinates,
                     zoom: zoom

                  });
               });
            });
            console.log("data1", geojson.features);
            map.on('mouseenter', 'clusters', function () {
               map.getCanvas().style.cursor = 'pointer';
            });
            map.on('mouseleave', 'clusters', function () {
               map.getCanvas().style.cursor = '';
            });
         });
         });
    }

0 个答案:

没有答案