在天蓝色地图上切换符号图钉可见性时出现黑色闪烁问题

Question

因此，我创建了一个 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;
  }
});

因此，此屏幕截图的左上角有一个单击按钮，我使用该功能来切换引脚的可见性。

我错过了什么吗？

Answer 1

在天蓝色地图上切换符号图钉可见性时出现黑色闪烁问题

出现黑闪是因为按比例添加/删除或操作图层会触发地图的频繁重绘或重新渲染。

您正在为每个引脚创建一个新的

DataSource

，并为每个引脚创建两个

SymbolLayer

（一个用于标签，一个用于标记），这会增加复杂性和渲染开销。

将所有引脚分组到单个数据源下。

• 一层用于标记图标，一层用于标签。我们没有添加多个图层，而是使用形状的属性来过滤形状。

修改后的代码：

const dataSource = new atlas.source.DataSource();
map?.sources.add(dataSource);

// Add all pins to a single DataSource
r.stops.forEach(coord => {
  const shape = new atlas.Shape(new atlas.data.Point(coord), {
    id: r.pinname,
    labelColor: r.pincolor,
    iconColor: r.pincolor
  });
  dataSource.add(shape);
});

// Add SymbolLayer for icons
const symbolLayer = new atlas.layer.SymbolLayer(dataSource, null, {
  iconOptions: {
    image: 'marker-thick',
    allowOverlap: true,
    ignorePlacement: true
  }
});
map?.layers.add(symbolLayer);

// Add SymbolLayer for labels
const symbolLayerLabel = new atlas.layer.SymbolLayer(dataSource, null, {
  textOptions: {
    textField: ['get', 'id'],
    anchor: 'top',
    offset: [0, -3.9],
    size: 13
  },
  iconOptions: {
    allowOverlap: true,
    ignorePlacement: true
  }
});
map?.layers.add(symbolLayerLabel);

// Toggle visibility function
function togglePinVisibility(pinname: string, visible: boolean) {
  const filter = visible
    ? ['==', ['get', 'id'], pinname] // Show specific pin
    : ['!=', ['get', 'id'], pinname]; // Hide specific pin

  symbolLayer.setOptions({ filter });
  symbolLayerLabel.setOptions({ filter });
}

如果您想切换特定引脚的可见性，请使用

filter

属性按 ID 隐藏/显示引脚。

symbolLayer.setOptions({
  filter: visible ? ['==', ['get', 'id'], pinname] : ['!=', ['get', 'id'], pinname]
});

symbolLayerLabel.setOptions({
  filter: visible ? ['==', ['get', 'id'], pinname] : ['!=', ['get', 'id'], pinname]
});

• ['get', 'id']

  ：检索每个形状的

  id

  属性。
• 根据引脚的

  id

  动态过滤引脚。

结果：