Azure Map切换符号标记可见性时出现黑屏闪烁问题求助

我创建了一个Vue项目并添加azure-maps-control依赖：

npm install azure-maps-control

在main.ts中引入CSS：

import "azure-maps-control/dist/atlas.min.css";

当地图准备就绪后，我通过以下代码加载标记：

const labelId = 'label-'+r.pinname;
await map?.imageSprite.add(labelId, icons.Label.replace("{stroke}", r.pincolor));
await map?.imageSprite.createFromTemplate(r.pinname, 'marker-thick', r.pincolor, '#fff');
const stops = r.stops.map(m => m.coordinates);
stops.forEach(coord => {
  var dataSource = new atlas.source.DataSource();
  map?.sources.add(dataSource);

  var shape = new atlas.Shape(new atlas.data.Point(coord), r.pinname);
  dataSource.add(shape);

  const symbolLayerLabel = new atlas.layer.SymbolLayer(dataSource, '', {
    iconOptions: {
      image: labelId,
      allowOverlap: true,
      ignorePlacement: true
    },
  });
  map?.layers.add(symbolLayerLabel);

  const symbolLayer = new atlas.layer.SymbolLayer(dataSource, '', {
    iconOptions: {
      image: r.pinname,
      allowOverlap: true,
      ignorePlacement: true
    },
    textOptions: {
      allowOverlap: true,
      ignorePlacement: true,
      anchor: 'top',
      textField: r.pinname,
      offset: [0, -3.9],
      size: 13
    }
  });
  map?.layers.add(symbolLayer);

  dataSources.value.push(dataSource);
  symbolLayers.value.push(symbolLayer);
});

之后我编写了切换标记可见性的函数：

symbolLayers.value.forEach(layer => {
  const opts = layer.getOptions() as LayerOptions;
  if (opts.iconOptions.image==pinname) {
    layer.setOptions({visible: visible});
    return;
  }
});

点击按钮调用该函数切换标记可见性时，出现黑屏闪烁问题。请问是否遗漏了什么配置或步骤？

核心问题1：图层与数据源冗余导致渲染压力过大 #

你当前的代码为每个坐标点单独创建DataSource和SymbolLayer，这会让地图上存在大量独立的图层和数据源。批量切换可见性时，地图需要同时更新数十甚至上百个图层的状态，渲染压力陡增，最终引发黑屏闪烁。

核心问题2：可见性切换逻辑存在缺陷 #

切换函数里的return语句会导致找到第一个匹配图层后就停止遍历，无法切换同类型的所有标记图层；同时你只处理了symbolLayers里的图层，没处理symbolLayerLabel这类标签图层，图层状态不一致会进一步加重渲染异常。

优化方案 #

1. 合并数据源与图层
   按pinname分类，将同类型的所有坐标点放在同一个DataSource中，对应创建一套SymbolLayer和SymbolLayerLabel，大幅减少图层数量：

// 按pinname分组整理坐标点
const groupedStops = {};
r.stops.forEach(m => {
  if (!groupedStops[r.pinname]) {
    groupedStops[r.pinname] = [];
  }
  groupedStops[r.pinname].push(m.coordinates);
});

for (const pinname in groupedStops) {
  const labelId = 'label-' + pinname;
  await map?.imageSprite.add(labelId, icons.Label.replace("{stroke}", r.pincolor));
  await map?.imageSprite.createFromTemplate(pinname, 'marker-thick', r.pincolor, '#fff');

  // 单个数据源存储同类型所有坐标点
  const dataSource = new atlas.source.DataSource();
  map?.sources.add(dataSource);

  // 批量创建并添加图形
  const shapes = groupedStops[pinname].map(coord => 
    new atlas.Shape(new atlas.data.Point(coord), pinname)
  );
  dataSource.add(shapes);

  // 创建标签图层
  const symbolLayerLabel = new atlas.layer.SymbolLayer(dataSource, '', {
    iconOptions: {
      image: labelId,
      allowOverlap: true,
      ignorePlacement: true
    },
  });
  map?.layers.add(symbolLayerLabel);

  // 创建标记图层
  const symbolLayer = new atlas.layer.SymbolLayer(dataSource, '', {
    iconOptions: {
      image: pinname,
      allowOverlap: true,
      ignorePlacement: true
    },
    textOptions: {
      allowOverlap: true,
      ignorePlacement: true,
      anchor: 'top',
      textField: pinname,
      offset: [0, -3.9],
      size: 13
    }
  });
  map?.layers.add(symbolLayer);

  // 保存图层时关联pinname，方便后续切换
  symbolLayers.value.push({ pinname, layer: symbolLayer });
  symbolLayers.value.push({ pinname, layer: symbolLayerLabel });
}

2. 修复可见性切换逻辑
   移除return语句，确保遍历所有匹配的图层，同时处理标签层和标记层：

symbolLayers.value.forEach(item => {
  if (item.pinname === pinname) {
    item.layer.setOptions({ visible: visible });
  }
});

3. 额外渲染优化
   开启地图的preserveDrawingBuffer选项，避免图层状态变更时出现渲染断层：

const map = new atlas.Map('map', {
  // 其他配置参数...
  preserveDrawingBuffer: true
});

内容的提问来源于stack exchange，提问作者Lacey