天地图编辑多边形和折线时，双击删除编辑点

天地图的编辑不支持删除编辑点的操作，于是研究写了一个。

// 使用 lodash 的防抖函数，防止双击时触发两次
const removeDotEventListener = debounce((e: T.MapEvent) => {// 获取被点击的目标// @ts-ignoreconst classList: DOMTokenList = e.originalEvent.target.classList// 线、面中编辑点会包含以下类名，包含则表示双击了编辑点if (!classList.contains('tdt-marker-icon') || !classList.contains('tdt-div-icon-black')) {return}const overlays = map.getOverlays()// 获取正在编辑的线、面覆盖物const editableOverlays = overlays.filter(overlay => overlay instanceof T.Polyline).filter(overlay => overlay.isEditable())// 找到最可能被双击的编辑点interface MaybePoint {lnglat: T.LngLatdistance: numberoverlay: T.Polyline}let maybePoints: MaybePoint | undefinedconst addMaybePoint = (lnglats: T.LngLat[], overlay: T.Polyline) => {for (const lnglat of lnglats) {const distance = lnglat.distanceTo(e.lnglat)if (!maybePoints || distance < maybePoints.distance) {maybePoints = { lnglat, distance, overlay }}}}for (const overlay of editableOverlays) {if (overlay instanceof T.Polygon) {const lnglats = (overlay as T.Polygon).getLngLats()addMaybePoint(lnglats[0], overlay)}else if (overlay instanceof T.Polyline) {const lnglats = (overlay as T.Polyline).getLngLats()addMaybePoint(lnglats, overlay)}}if (maybePoints) {const { lnglat, overlay } = maybePoints// 编辑中双击编辑点时，操作覆盖物会导致地图锁死不能移动，这里脱离调用栈即可解决setTimeout(() => {let otherLnglats: T.LngLat[]if (overlay instanceof T.Polygon) {otherLnglats = overlay.getLngLats()[0].filter(_lnglat => _lnglat !== lnglat)}else {otherLnglats = overlay.getLngLats().filter(_lnglat => _lnglat !== lnglat)}// 取消编辑以删除编辑点overlay.disableEdit()overlay.setLngLats(otherLnglats)overlay.enableEdit()})}
}, 500, {leading: true, // 立即执行trailing: false, // 不在延迟结束后执行
})const map = new T.Map(domRef.value)
map.addEventListener('dblclick', removeDotEventListener)