Блог

У меня включен пузырьковый слой с кластеризацией.Однако при увеличении я хочу отобразить точки в уникальных цветах в соответствии со свойством компании в данных. Я достигаю этого, создавая отдельные слои символов с уникальными цветами и добавляя их на карту. У меня более 30 компаний (более 1000 точек), поэтому он добавляет 30 дополнительных слоев для удовлетворения требований при масштабировании. Снижает ли производительность добавление 30 слоев к карте? Или есть лучший способ написать одно выражение данных в параметрах символьного слоя, чтобы решить эту проблему?Спасибо

 function addLayers() {
    const company = [...new Set(Data.map((i) => i.company))]; // creating a list of unique companies 
    
    // Looping through each company
    company.forEach((i) => { 
      let layerName = i   "Layer";
      let iconName = i   "Icon";
      let rColor = randomColor().hexString(); // get a random color
      
      map.imageSprite
        .createFromTemplate(iconName, "marker-flat", rColor, "#fff")
        .then(function () {
          map.layers.add(
            new atlas.layer.SymbolLayer(datasource, layerName, {
              filter: [
                "all",
                ["!", ["has", "point_count"]],
                ["==", ["get", "company"], i],
              ], //Filter out clustered points amp; unique company from this layer.
              iconOptions: { image: iconName, allowOverlap: false },
            })
          );

        });
    });
  }
  

Использование одного слоя с выражением будет намного лучше для производительности.

Вот пример блока кода, который загружает 4 значка, а затем создает слой символов с выражением, которое выбирает соответствующий значок для точки данных на основе некоторого свойства в точке данных:

 //Create an array of custom icon promises to load into the map. 
var iconPromises = [
    map.imageSprite.add('gas_station_icon', '../Common/images/icons/gas_station_pin.png'),
    map.imageSprite.add('grocery_store_icon', '../Common/images/icons/grocery_cart_pin.png'),
    map.imageSprite.add('restaurant_icon', '../Common/images/icons/restaurant_pin.png'),
    map.imageSprite.add('school_icon', '../Common/images/icons/school_pin.png'),
];

//Load all the custom image icons into the map resources.
Promise.all(iconPromises).then(function () {

    //Add a layer for rendering point data as symbols.
    map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
        iconOptions: {
            //Use a match expression to select the image icon based on the EntityType property of the data point.
            image: [
                'match',

                ['get', 'EntityType'],

                //For each entity type, specify the icon name to use.
                'Gas Station', 'gas_station_icon',
                'Grocery Store', 'grocery_store_icon',
                'Restaurant', 'restaurant_icon',
                'School', 'school_icon',

                //Default fallback icon.
                'marker-blue'
            ]
        }
    }));
});
  

Вот рабочая версия этого кода: https://azuremapscodesamples.azurewebsites.net/?sample=Data-driven symbol icons