Azure Maps多边形挤出层轮廓高亮实现方案问询

方案1：叠加高度匹配的Line Layer（最简单） #

复用多边形数据源，创建一个Line Layer，将其高度设置为与Polygon Extrusion Layer完全一致，以此在挤出多边形的顶部边缘生成黑色线条，提升轮廓辨识度：

// 先创建多边形挤出层
const extrusionLayer = new atlas.layer.PolygonExtrusionLayer(
  buildingDataSource,
  'room-extrusion',
  {
    height: ['get', 'floorHeight'], // 绑定楼层高度属性
    base: 0,
    fillColor: 'rgba(210, 210, 210, 0.6)'
  }
);
map.layers.add(extrusionLayer);

// 创建边缘高亮的Line Layer
const edgeHighlightLayer = new atlas.layer.LineLayer(
  buildingDataSource,
  'room-edge',
  {
    height: ['get', 'floorHeight'], // 与挤出层高度同步
    lineColor: '#000000',
    lineWidth: 2,
    lineOffset: 0.3 // 让线条稍微向外偏移，避免被挤出层遮挡
  }
);
map.layers.add(edgeHighlightLayer);

如果需要隐藏挤出层的顶面，可在挤出层配置中添加topFillColor: 'rgba(0,0,0,0)'，让顶面完全透明，只保留侧面和边缘线条。

方案2：使用LineExtrusionLayer实现3D边缘 #

若需要更立体的边缘效果，可将多边形要素转换为线要素，使用LineExtrusionLayer将边缘挤出为3D线条：

// 从多边形数据源提取线要素
const lineFeatures = [];
buildingDataSource.getAllFeatures().forEach(polyFeature => {
  // 提取多边形的外环坐标作为线要素
  const lineGeom = new atlas.data.LineString(polyFeature.geometry.coordinates[0]);
  lineFeatures.push(new atlas.data.Feature(lineGeom, polyFeature.properties));
});

// 创建线数据源并添加到地图
const lineDataSource = new atlas.source.DataSource();
lineDataSource.add(lineFeatures);
map.sources.add(lineDataSource);

// 创建LineExtrusionLayer
const edgeExtrusionLayer = new atlas.layer.LineExtrusionLayer(
  lineDataSource,
  '3d-room-edge',
  {
    height: ['get', 'floorHeight'],
    base: 0,
    lineWidth: 3,
    lineColor: '#000000'
  }
);
map.layers.add(edgeExtrusionLayer);

// 原有多边形挤出层保持不变
map.layers.add(extrusionLayer);

这种方式的3D边缘会沿着垂直方向拉伸，和多边形挤出层的侧面完全贴合，辨识度更高。

关键注意事项 #

• 确保Line Layer/LineExtrusionLayer的高度表达式与Polygon Extrusion Layer完全一致，避免出现错位。
• 若线条被挤出层遮挡，可通过lineOffset（Line Layer）或调整图层添加顺序（先加挤出层，再加线条层）来解决。
• 若使用Web SDK v1版本，LineExtrusionLayer不可用，只能采用方案1。

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