Azure Maps天气图层移除报错：layers不是函数问题求助

错误原因分析 #

• 点击事件重复绑定：每次调用TriggerWeather都会给.weather按钮绑定一次点击事件，多次触发后会导致逻辑混乱，甚至map或layer变量引用异常。
• 作用域丢失风险：点击事件回调中若map变量的作用域失效，会导致无法正确访问map.layers对象。
• 图层移除后状态未重置：移除图层后未停止动画、清除定时器，也未将layer变量置空，导致后续点击逻辑判断错误。

修复方案 #

1. 绑定点击事件前先解绑原有事件，避免重复绑定。
2. 利用闭包确保点击事件能正确访问map和layer变量。
3. 移除图层时同步停止动画、清除定时器，并重置layer和timer变量。

修改后的代码 #

function TriggerWeather(model, map) {
    // 先解绑按钮原有点击事件，避免重复绑定
    $('.weather').off('click');

    // 若已有图层，先停止动画
    if (layer) {
        layer.stop();
        clearInterval(timer);
    }

    // 获取当前时间
    var now = new Date().getTime();

    // 获取对应天气图层配置
    var layerInfo = weatherLayers[model];

    // 计算时间戳数量
    var numTimestamps = (layerInfo.past + layerInfo.future) / layerInfo.interval;

    var tlOptions = [];

    for (var i = 0; i < numTimestamps; i++) {
        // 计算动画帧的时间周期
        var time = (now - layerInfo.past) + (i + 1) * layerInfo.interval;
        // 创建每个时间戳对应的瓦片图层配置
        tlOptions.push(createTileLayer(model, time));
    }

    if (layer) {
        // 更新已有图层的配置并重新播放
        layer.setOptions({
            "tileLayerOptions": tlOptions
        });
        layer.play();
    } else {
        // 创建动画瓦片图层实例
        layer = new atlas.layer.AnimatedTileLayer({
            "tileLayerOptions": tlOptions,
            "duration": numTimestamps * 800,
            "autoPlay": true,
            "loop": true
        });

        // 将图层添加到地图
        map.layers.add(layer, 'labels');

        // 设置定时器更新图层（修正原代码立即执行的问题）
        timer = setInterval(() => intervalHandler(model), layerInfo.interval);
    }

    $('.weather').click(function() {
        if (layer) {
            // 停止动画、清除定时器
            layer.stop();
            clearInterval(timer);
            // 移除天气图层
            map.layers.remove(layer);
            // 重置变量状态
            layer = null;
            timer = null;
        } else {
            // 重新创建并添加图层
            var now = new Date().getTime();
            var layerInfo = weatherLayers[model];
            var numTimestamps = (layerInfo.past + layerInfo.future) / layerInfo.interval;
            var tlOptions = [];
            
            for (var i = 0; i < numTimestamps; i++) {
                var time = (now - layerInfo.past) + (i + 1) * layerInfo.interval;
                tlOptions.push(createTileLayer(model, time));
            }
            
            layer = new atlas.layer.AnimatedTileLayer({
                "tileLayerOptions": tlOptions,
                "duration": numTimestamps * 800,
                "autoPlay": true,
                "loop": true
            });
            
            map.layers.add(layer, 'labels');
            timer = setInterval(() => intervalHandler(model), layerInfo.interval);
        }
    })
}

额外注意事项 #

• 确保layer和timer变量有正确的作用域（如全局声明或在函数外层作用域定义），避免被垃圾回收导致引用丢失。
• 原代码中setInterval(intervalHandler(model), layerInfo.interval)会立即执行intervalHandler，需用箭头函数包裹实现延迟执行。

内容的提问来源于stack exchange，提问作者Chris Sikel