Как отобразить значок маркера только на некластерных маркерах, а не на кластерах? - PullRequest
0 голосов
/ 23 июня 2019

Я использую кластеризацию, поэтому у меня есть некоторые маркеры, например кластеры, а другие просто обычные маркеры.

Я хочу добавить пользовательский значок только для отдельных маркеров.

Прямо сейчас, это добавляет пользовательский маркер ко всему, кластерам и отдельным маркерам.

Чтобы добавить пользовательский маркер, я делаю это:

    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"
          }
        });

}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...