天地图监听多边形是否改变

前端进阶者2025-07-24 14:21

天地图4.0截止2025年3月24日，并没有提供多边形改变后的回调函数，其实多边形的应用在地图GIS系统中有很多用处，比方说点子围栏编辑告警；离不开多边形的绘制和编辑能力;

效果图

核心方法

typescript 复制代码

/*
 多边形默认经纬度
 应该是天地图BUG,直接用等于用了相同的引用改变会同步改变,后面无法计算是否改变;
*/
var prePolygonLngLats = JSON.parse(JSON.stringify(polygon.getLngLats()[0]));
// change定时器,防止重复触发
var polygonEditChangeTime = null;
// 绑定地图事件;曲线救国;
map.addEventListener('touchend', function(e) {
    handlePolygonChange();
});
// 绑定触发事件
function handlePolygonChange() {
   // 不在编辑状态直接退出
   if (!polygon.isEditable()) {
        return;
    }
    if (polygonEditChangeTime) {
        clearTimeout(polygonEditChangeTime)
        polygonEditChangeTime = null;
    }
    polygonEditChangeTime = setTimeout(() => {
        var curBou = polygon.getLngLats()[0]
        var isChange = handlePolygonCompare(prePolygonLngLats, curBou);
        if (isChange) {
            console.log('多边形改变了', isChange);
        };
        prePolygonLngLats = JSON.parse(JSON.stringify(polygon.getLngLats()[0]));
    }, 200);
}
// 比较经纬度是否一致
function handlePolygonCompare(oldArray, newArray) {
    // 如果长度不同，直接返回true（表示改变了）
    if (oldArray.length !== newArray.length) {
        return true;
    }
    // 如果长度相同，逐项对比
    for (let i = 0; i < oldArray.length; i++) {
        if (oldArray[i].lng !== newArray[i].lng || oldArray[i].lat !== newArray[i].lat) {
            return true; // 只要有一项不同，返回true
        }
    }
    // 如果所有项都相同，返回false
    return false;
}

调用

typescript 复制代码

map.addEventListener('touchend', function(e) {
    handlePolygonChange();
});