Azure Maps多边形图层点击事件重叠及zIndex替代方案问询

核心问题原因 #

Azure Maps 中图层的点击事件默认会穿透所有重叠图层，没有像 Bing Maps 那样的 zIndex 属性直接控制层级优先级，但可以通过以下两种方式解决：

方法一：阻止事件冒泡 + 手动管理图层顺序 #

Azure Maps 的图层渲染顺序默认是后添加的图层在顶层，也可通过 map.layers.move() 手动调整图层位置。在顶层图层的点击事件中调用 stopPropagation()，就能阻止事件向下传递到下层图层。

示例代码：

// 创建外层圆形数据源和图层
const outerDataSource = new atlas.source.DataSource();
outerDataSource.add(new atlas.data.Feature(
  atlas.data.Polygon.fromCircle(new atlas.data.Position(-122.33, 47.6), 1000)
));
const outerLayer = new atlas.layer.PolygonLayer(outerDataSource, 'outer-circle', {
  fillColor: 'rgba(255, 0, 0, 0.3)'
});
map.layers.add(outerLayer);

// 外层图层点击事件
outerLayer.events.add('click', () => {
  alert('外层圆形被点击');
});

// 创建内层圆形数据源和图层
const innerDataSource = new atlas.source.DataSource();
innerDataSource.add(new atlas.data.Feature(
  atlas.data.Polygon.fromCircle(new atlas.data.Position(-122.33, 47.6), 500)
));
const innerLayer = new atlas.layer.PolygonLayer(innerDataSource, 'inner-circle', {
  fillColor: 'rgba(0, 255, 0, 0.3)'
});
map.layers.add(innerLayer);

// 内层图层点击事件：阻止冒泡，避免触发下层事件
innerLayer.events.add('click', (e) => {
  e.stopPropagation();
  alert('内层圆形被点击');
});

// 可选：如果内层图层是先添加的，手动将其移到顶层
// map.layers.move(innerLayer, 'top');

方法二：基于Feature属性筛选顶层图形 #

如果图层顺序复杂不好管理，可以给每个圆形的Feature添加自定义层级属性，点击时筛选出层级最高的图形，仅触发它的告警逻辑。

示例代码：

// 创建带层级属性的圆形Features
const circleFeatures = [
  new atlas.data.Feature(
    atlas.data.Polygon.fromCircle(new atlas.data.Position(-122.33, 47.6), 1000),
    { zIndex: 1, label: '外层圆形' }
  ),
  new atlas.data.Feature(
    atlas.data.Polygon.fromCircle(new atlas.data.Position(-122.33, 47.6), 500),
    { zIndex: 2, label: '内层圆形' }
  )
];

// 添加到数据源并创建图层
const dataSource = new atlas.source.DataSource();
dataSource.add(circleFeatures);
map.sources.add(dataSource);

// 创建两个图层（也可用单个图层加filter区分）
const outerLayer = new atlas.layer.PolygonLayer(dataSource, 'outer', {
  fillColor: 'rgba(255, 0, 0, 0.3)',
  filter: ['==', ['get', 'zIndex'], 1]
});
const innerLayer = new atlas.layer.PolygonLayer(dataSource, 'inner', {
  fillColor: 'rgba(0, 255, 0, 0.3)',
  filter: ['==', ['get', 'zIndex'], 2]
});

map.layers.add(outerLayer);
map.layers.add(innerLayer);

// 在地图点击事件中筛选顶层图形
map.events.add('click', async (e) => {
  const hitFeatures = await map.layers.getRenderedFeatures(e.position);
  if (hitFeatures.length === 0) return;

  // 找出zIndex最高的Feature
  const topFeature = hitFeatures.reduce((prev, curr) => {
    return prev.properties.zIndex > curr.properties.zIndex ? prev : curr;
  });

  // 仅触发顶层图形的告警
  alert(`${topFeature.properties.label}被点击`);
});

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