如何在符号图层中按唯一类别显示点而不创建多个图层？

如何解决如何在符号图层中按唯一类别显示点而不创建多个图层？

我有一个启用群集的气泡层。但是，放大后， 我想根据数据中的公司属性以独特的颜色显示这些点。我是通过创建具有独特颜色的单个Symbol图层 并将其添加到地图中来实现的。我有30多家公司（超过1000个点），因此它增加了30个额外的图层以满足缩放时的要求。 在地图上添加30层会降低性能吗？还是有更好的方法在SymbolLayer选项中编写单个数据表达式来解决此问题？谢谢

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 & 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%20symbol%20icons