LeafletJS添加地图覆盖层后导出数据被篡改，原因不明求解决

问题根因 #

1. 依赖冲突 #

你的代码中重复引入了两个不同版本的Leaflet（1.7.1和1.0.1），版本冲突会导致地图交互、图层处理逻辑产生不可预期的异常，首先需要移除冗余的重复引入，统一使用同一个稳定版本的Leaflet。

2. 原始数据被直接修改 #

这是导致导出数据损坏的核心原因：
你在loadCoverageData函数中直接将传入的coverage数据的引用存入了导出用的dataArray数组，而CovJSON.read()以及leaflet-coverage的图层处理逻辑，会直接修改传入的原始数据对象，附加大量运行时属性、内部方法和转换后的数据结构，这些附加内容不属于标准CoverageJSON格式，自然无法被正常导入解析。
哪怕你后续移除了地图图层，已经被修改的原始数据对象也不会恢复为初始状态，因此导出的内容始终是损坏的。 #

修复方案 #

修改loadCoverageData逻辑，不要直接将原始数据引用存入导出数组，也不要直接把原始数据传给CovJSON处理，全程使用原始数据的深拷贝做分离处理：

// 适配你现有Map序列化逻辑的深拷贝函数
function deepCopy(obj) {
  return JSON.parse(JSON.stringify(obj, replacer), reviver);
}

function loadCoverageData(data) {
    console.log("Attempting to load: \n", data);
    // 原始数据的拷贝存入导出数组，完全和后续处理逻辑隔离
    const exportData = deepCopy(data);
    dataArray.push(exportData);
    // 另一份拷贝传给CovJSON做图层处理，修改不会影响导出数据
    const processData = deepCopy(data);
    CovJSON.read(processData)
        .then((coverage) => {
            let dataLayer = C.dataLayer(coverage, {parameter: Object.keys(data.parameters)[0]})
                .on('afterAdd', () => {
                    if (dataLayer.palette) {
                        C.legend(dataLayer).addTo(map)
                    }
                    if (dataLayer.timeSlices) {
                        new C.TimeAxis(dataLayer).addTo(map)
                    }
                })
            controlLayers.addOverlay(dataLayer, Object.keys(data.parameters)[0]);
        });
}

修改后导出用的dataArray中的数据永远和初始导入/加载的原始数据一致，不受图层处理逻辑的修改影响，导出的JSON文件可以正常被导入使用。 #

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