React Js切换路由后Windyapi无法重绘或重新初始化加载问题咨询

问题根因 #

你当前的Windy初始化逻辑写在index.html中，仅会在页面首次加载时执行一次。首次访问ReportMap组件时，id为windy的DOM节点存在，地图可以正常渲染；切换路由后ReportMap组件卸载，对应的DOM节点被销毁，再次切回组件时新的DOM节点被渲染，但Windy初始化逻辑不会重复执行，且旧的Windy实例还绑定着已销毁的DOM节点，因此地图无法正常显示。

操作步骤 #

步骤1：修改public/index.html #

删除<head>标签中如下的全局初始化代码：

<script >        windyInit( {key:"KLqDKOr1AqsOXMxaSqGzZqqZavGgcOsI"}, function (){} )</script>

保留Leaflet和Windy的SDK引入代码即可。

步骤2：重写ReportMap组件 #

结合React生命周期，在组件挂载时初始化Windy，卸载时清理实例和全局残留：

import { useEffect, useRef } from 'react';

const ReportMap = () => {
    // 用ref绑定地图容器DOM，避免固定id带来的多实例冲突
    const mapContainerRef = useRef(null);
    // 存储Windy实例用于后续清理
    let windyApi = null;

    useEffect(() => {
        // 确保Windy SDK加载完成后再执行初始化
        if (!window.windyInit || !mapContainerRef.current) return;

        // 初始化Windy地图
        window.windyInit(
            {
                key: "KLqDKOr1AqsOXMxaSqGzZqqZavGgcOsI",
                container: mapContainerRef.current // 绑定当前组件的DOM容器
            },
            (api) => {
                windyApi = api;
                // 可在此处添加自定义地图配置，比如默认中心点、缩放层级等
            }
        );

        // 组件卸载时的清理逻辑，避免内存泄漏和下次初始化冲突
        return () => {
            if (windyApi) {
                // 销毁Leaflet地图实例
                windyApi.map.remove();
                windyApi = null;
            }
            if (mapContainerRef.current) {
                // 清空容器内的残留DOM
                mapContainerRef.current.innerHTML = '';
            }
            // 清理Windy挂载到window上的全局变量
            delete window.W;
        };
    }, []);

    return (
        <div>
            <div ref={mapContainerRef} style={{width: "100%", height: "96vh"}}></div>
        </div>
    );
};

export default ReportMap;

注意事项 #

• Windy API同一时间仅支持单个实例运行，不要在多个页面同时渲染Windy地图组件
• 生产环境建议将Windy API Key存入环境变量管理，避免明文泄露

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