如何使用 createFromTemplate 函数在 Azure Maps 符号层中创建多个具有相同主色但不同辅助色的图标？

Question

我有一个包含独特元素的 Crafts 数组。（例如 ["Welder","Fitter","Painter"]）。数据源包含一组人，其中包含 uniqueId、craft 和一个属性 active 为 true 或 false。我创建了两个数据源，一个用于活跃的人，另一个用于不活跃的人。我已经通过 createFromTemplate 方法创建了自定义图标，如下所示

let imageTemplates = [];
let inactiveImageTemplates = [];
let iconNamesActive = [];
let iconNamesInactive = [];
crafts.forEach((i) => {
  let iconNameActive = i + '_Active_' + 'Icon';
  let iconNameInactive = i + '_Inactive_' + 'Icon';
  iconNamesActive.push(i, iconNameActive);
  iconNamesInactive.push(i, iconNameInactive);
  let rColor = randomColor().hexString();
  imageTemplates.push(this.map.imageSprite.createFromTemplate(iconNameActive, 'marker-flat', rColor, '#00FF00')); //!Turn it to green
  inactiveImageTemplates.push(this.map.imageSprite.createFromTemplate(iconNameInactive, 'marker-flat', rColor, '#FF0000')); //!Turn it to red
});


Promise.all(imageTemplates).then(() => {
  console.log(imageTemplates);

  this.map.layers.add(
    new atlas.layer.SymbolLayer(this.beaconActiveDataSource, 'craftActiveLayer', {
      filter: ['!', ['has', 'point_count']],

      iconOptions: {
        image: [
          'match',
          ['get', 'role'],
          ...iconNamesActive,
          'marker-blue'
        ]
      }
    })
  );
});
Promise.all(inactiveImageTemplates).then(() => {
  this.map.layers.add(
    new atlas.layer.SymbolLayer(this.beaconInactiveDataSource, 'craftInactiveLayer', {
      filter: ['!', ['has', 'point_count']],
      iconOptions: {
        image: [
          'match',
          ['get', 'role'],
          ...iconNamesInactive,
          'marker-blue'
        ]
      }
    })
  );
});

但是，我收到很多 console.log 错误，提示图标名称已存在。在缩小非活动图标的同时，我在地图中已有的气泡层上呈现出来。我在为每个工艺创建图标图像模板时将“_active”和“inactive”连接到图标名称以使其独一无二。创建图标 names/icons 的最佳方法是什么，特别是对于同一个实体但用辅助颜色区分？谢谢你的时间。

Answer 1

我无法重现该错误。一种可能的想法是，您有两个单独的 Promise.all 调用，一个接一个。它们可能会在大约同一时间执行，并且都尝试同时将图像添加到地图精灵，这可能会导致问题。尝试一些可能的事情；

将所有模板承诺合并到一个数组中并调用 Promise.all 一次，然后在回调中添加两个层。这还可以让您更好地控制哪一层位于另一层之上。（目前，第二层 promise.all 可能会先完成，然后在第一层之前添加第二层。）
将第二个 Promise.all 代码放在第一个的回调中。这比 #1 效率低，但几乎不需要更改即可尝试。

如何使用 createFromTemplate 函数在 Azure Maps 符号层中创建多个具有相同主色但不同辅助色的图标？

How to create multiple icons in Azure Maps symbol layer with same primary color but different secondary color using createFromTemplate function?

azure-maps