Azure Maps如何使用Drawing Manager为Extrusion Layer绘制形状？

解决方案 #

默认Drawing Manager的绘制结果只会输出到内置的普通矢量图层，不会自动关联到拉伸图层，你之前直接修改layers.polygonExtrusionLayer配置不生效的核心原因是，这个图层本身没有被绑定为绘制要素的存储目标。
你可以按照以下步骤实现需求：

1. 初始化Drawing Manager时关闭默认多边形图层的渲染，避免出现重复的面要素：

const drawingManager = new AMap.DrawingManager({
  // 其他原有配置保留
  polygonOptions: {
    visible: false // 关闭默认绘制的普通面要素显示
  }
})

2. 提前创建自定义的Extrusion Layer并添加到地图，保留你写的样式表达式：

const polygonExtrusionLayer = new AMap.ExtrusionLayer({
  zIndex: 120,
  // 你的原有样式配置直接复用
  fillColor: [
    'case',
    ['has', 'fillColor'],
    ['get', 'fillColor'],
    '#000000'
  ],
  fillOpacity: [
    'case',
    ['has', 'fillOpacity'],
    ['get', 'fillOpacity'],
    0.5
  ],
  base: [
    'case',
    ['has', 'base'],
    ['get', 'base'],
    0
  ],
  height: [
    'case',
    ['has', 'height'],
    ['get', 'height'],
    0
  ]
})
map.add(polygonExtrusionLayer)

3. 监听绘制、编辑完成事件，将要素同步到拉伸图层：

// 绘制完成同步
drawingManager.on('drawcomplete', (e) => {
  const feature = new AMap.Feature({
    geometry: e.obj.getPath(), // 取绘制完成的多边形路径
    properties: {
      height: 0, // 初始高度可默认设为0，后续提供控件让用户修改这个属性即可
      fillColor: '#2E8AE6',
      fillOpacity: 0.6
      // 其他自定义属性按需加
    }
  })
  polygonExtrusionLayer.addFeature(feature)
  // 把绘制生成的默认要素删掉，避免重复显示
  e.obj.remove()
})

// 编辑完成同步
drawingManager.on('updatecomplete', (e) => {
  // 编辑后按你的业务逻辑更新对应feature的geometry即可
  const targetFeature = polygonExtrusionLayer.getFeatureById(e.obj._featureId) // 自行绑定的id对应即可
  targetFeature.setGeometry(e.obj.getPath())
})

后续只需要给用户提供修改对应feature的height属性的入口，修改后调用polygonExtrusionLayer.render()就能实时切换立体/平面显示效果，同时全程保留Drawing Manager的编辑能力。

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