如何仅在未聚类的标记上显示标记图标,而不在群集上显示标记图标?

时间:2019-06-23 17:39:13

标签: javascript mapbox

我正在使用聚类,因此我有一些标记是聚类的,而其他标记只是常规的单个标记。

我只想向单个标记添加自定义图标。

现在,它将自定义标记添加到所有标记,群集标记和单个标记。

要添加自定义标记,请执行以下操作:

    map.loadImage("https://i.imgur.com/MK4NUzI.png", function(
      error,
      image
    ) {
      if (error) throw error;
      map.addImage("custom-marker", image);
      /* Style layer: A style layer ties together the source and image and specifies how they are displayed on the map. */
      map.addLayer({
        id: "markers",
        type: "symbol",
        /* Source: A data source specifies the geographic coordinate where the image marker gets placed. */
        source: 'users',
        layout: {
          "icon-image": "custom-marker"
        }
      });
    });

其余的代码是这样,其中数据或源是users,我还有一层叫做clusters

     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('users', {
        type: "geojson",
        // Point to GeoJSON data. This example visualizes all M1.0+ users
        // from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
        data: markers,
        cluster: true,
        clusterMaxZoom: 14, // Max zoom to cluster points on
        clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
        });

        map.loadImage("https://i.imgur.com/MK4NUzI.png", function(
          error,
          image
        ) {
          if (error) throw error;
          map.addImage("custom-marker", image);
          /* Style layer: A style layer ties together the source and image and specifies how they are displayed on the map. */
          map.addLayer({
            id: "markers",
            type: "symbol",
            /* Source: A data source specifies the geographic coordinate where the image marker gets placed. */
            source: 'users',
            layout: {
              "icon-image": "custom-marker"
            }
          });
        });

        map.addLayer({
          id: "clusters",
          type: "circle",
          source: "users",
          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: "users",
          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: "users",
          filter: ["!", ["has", "point_count"]],
          paint: {
          "circle-color": "#11b4da",
          "circle-radius": 4,
          "circle-stroke-width": 1,
          "circle-stroke-color": "#fff"
          }
        });

}

0 个答案:

没有答案