天地图的带洞多边形操作

/** 往 polygon 中添加一个洞 */
function addHole(polygon: T.Polygon) {
  const handler = new T.PolygonTool(map)
  handler.open()
  handler.addEventListener('draw', ({ currentPolygon }) => {
    const oldLnglats = polygon.getLngLats()
    map.removeOverLay(currentPolygon)
    polygon.setLngLats([...oldLnglats, ...currentPolygon.getLngLats()])
  })
}

/** 编辑带洞多边形,实则将其拆分为多个多边形,这里记录其对应关系,完成编辑后重新组合 */
const editableHolePolygon = new Map<T.Polygon, T.Polygon[]>()

/** 开启 polygon 编辑,支持带洞多边形编辑 */
function enableEdit(polygon: T.Polygon) {
  const lnglats = polygon.getLngLats()
  if (lnglats.length > 1) {
    let polygons = editableHolePolygon.get(polygon)
    if (polygons) {
      polygons.forEach((_polygon, index) => {
        _polygon.enableEdit()
        if (index > 0) {
          _polygon.setFillOpacity(0)
        }
      })
    }
    else {
      map.removeOverLay(polygon)
      // 带洞多边形
      polygons = lnglats.map((points, index) => {
        const _polygon = new T.Polygon(points)
        map.addOverLay(_polygon)
        _polygon.enableEdit()
        if (index > 0) {
          _polygon.setFillOpacity(0)
        }
        return _polygon
      })
      editableHolePolygon.set(polygon, polygons)
    }
  }
  else {
    // 普通多边形
    polygon.enableEdit()
  }
}

/** 取消 polygon 编辑,支持带洞多边形 */
function disableEdit(polygon: T.Polygon) {
  const polygons = editableHolePolygon.get(polygon)
  if (polygons) {
    const points = polygons.map((_polygon) => {
      _polygon.disableEdit()
      map.removeOverLay(_polygon)
      return _polygon.getLngLats()[0]
    })
    polygon.setLngLats(points)
    map.addOverLay(polygon)
    editableHolePolygon.delete(polygon)
  }
  else {
    polygon.disableEdit()
  }
}
posted @ 2025-09-13 22:23  东啊東  阅读(43)  评论(0)    收藏  举报