天地图监听圆是否改变

前端进阶者2025-07-23 17:54

天地图4.0截至2025年3月24日还不支持编辑监听改变，但是不妨碍我们使用技术手段进行实现，达到监听半径和圆点是否改变的方法;

效果图

核心方法

typescript 复制代码

// 定义圆默认半径
var preRadius = 5000;
// 定义圆默认中心点
var circleDefCenter = {lng: 116.40093, lat: 39.90313}
// 定时器放置重复触发
var circleEditChangeTime = null;
// 地图绑定事件
map.addEventListener('touchend', function(e) {
    circleEditChange();
});

function circleEditChange() {
    // 不在编辑状态就不处理
	if (!circle.isEditable()) {return;}
    if (circleEditChangeTime) {
        clearTimeout(circleEditChangeTime)
        circleEditChangeTime = null;
    }
    circleEditChangeTime = setTimeout(function() {
        /*  禁用: 业务不让改变中心点
  			【天地图Bug】改变中心点后, 重置到默认编辑手柄不会归位;
        */
        circle.disableEdit();
        var curCenter = circle.getCenter();
        var curRadius = circle.getRadius();
        // 中心点改变了
        if (curCenter.lng !== circleDefCenter.lng || curCenter.lat !== circleDefCenter.lat) {
            circle.setCenter(new T.LngLat(116.40093, 39.90313));
            console.log('中心点改变了');
        }
        // 表示半径改变了
        if (curRadius !== preRadius) {
            preRadius = curRadius;
            console.log('半径改变了', curRadius);
        }
        // 启用编辑
        circle.enableEdit();
    }, 200);
};

使用

typescript 复制代码

circle = new T.Circle(new T.LngLat(116.40093, 39.90313), 5000,{color:"blue",weight:5,opacity:0.5,fillColor:"#FFFFFF",fillOpacity:0.5,lineStyle:"solid"});
map.addEventListener('touchend', function(e) {
	circleEditChange();
});

其它方法

typescript 复制代码

// 判断经纬度是否在圆形范围内 is: boolean;
var is = circle.getBounds().contains(new T.LngLat(116.40093, 39.90313));