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

天地图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();
});
相关推荐
圆肖1 天前
[陇剑杯 2021]简单日志分析(问3)
前端·经验分享·github
王嘉俊9251 天前
Django 入门:快速构建 Python Web 应用的强大框架
前端·后端·python·django·web·开发·入门
IT_陈寒1 天前
Redis性能翻倍的5个冷门技巧,90%的开发者从不知道第3点!
前端·人工智能·后端
WebGIS开发1 天前
新中地三维GIS开发智慧城市效果和应用场景
前端·人工智能·gis·智慧城市·webgis
鱼樱前端1 天前
uni-app快速入门章法(一)
前端·uni-app
zhangxuyu11181 天前
flex布局学习记录
前端·css·学习
掘金一周1 天前
🍏让前端去做 iPhone 的液态玻璃❓ | 掘金一周 10.2
前端·人工智能·后端
Keepreal4961 天前
谈谈对javascript原型链的理解以及原型链的作用
前端·javascript
itslife1 天前
vite 源码 - 配置
前端·javascript
Keepreal4961 天前
Typescript中type和interface的区别
前端·typescript