解决OpenLayers地图重复加载问题：动态更新图层源而非重复创建地图

window.onload = function go() {
    var choix = document.getElementById('choix');

    choix.onchange = function() {
        // ... UI 更新代码 ...
        var name = this.options[this.selectedIndex].getAttribute('name');
        var url_bdd1 = 'URL_FOR_KML_' + name + '.kml';
        var url_bdd2 = 'URL_FOR_KML_' + name + '.kml';

        // 错误：在每次选择改变时都重新创建图层和地图
        var layer_bdd1 = new ol.layer.Vector({
            source : new ol.source.Vector({
                format : new ol.format.KML(),
                url : url_bdd1
            })
        });

        var layer_bdd2 = new ol.layer.Vector({
            source : new ol.source.Vector({
                format : new ol.format.KML(),
                url : url_bdd2
            })
        });

        var layer_osm = new ol.layer.Tile({
            source: new ol.source.OSM(),
            opacity: 1
        });

        var map = new ol.Map({ // 错误：在每次选择改变时都重新创建地图
            target: 'map',
            layers: [
                layer_osm,
                layer_bdd2,
                layer_bdd1
            ],
            view: new ol.View({
                center: ol.proj.transform([2, 47], 'EPSG:4326', 'EPSG:3857'),
                zoom: 6
            })
        });
    };
    choix.onchange(); // 页面加载时触发一次，用于初始化
}

window.onload = function go() {
    // 1. 在页面加载时，一次性创建图层实例（不带或带默认数据源）
    var layer_bdd1 = new ol.layer.Vector(); // 初始时可以没有source
    var layer_bdd2 = new ol.layer.Vector(); // 初始时可以没有source

    var layer_osm = new ol.layer.Tile({
        source: new ol.source.OSM(),
        opacity: 1
    });

    // 2. 在页面加载时，一次性创建地图实例
    var map = new ol.Map({
        target: 'map', // 地图渲染的目标HTML元素ID
        layers: [
            layer_osm,
            layer_bdd2, // 将已创建的图层添加到地图中
            layer_bdd1
        ],
        view: new ol.View({
            center: ol.proj.transform([2, 47], 'EPSG:4326', 'EPSG:3857'),
            zoom: 6
        })
    });

    var choix = document.getElementById('choix');

    // 3. 监听选择框变化事件
    choix.onchange = function() {
        // ... UI 更新代码 (如更新标题等) ...
        title.innerHTML = this.options[this.selectedIndex].text;
        test.innerHTML = this.options[this.selectedIndex].getAttribute('name');
        var name = this.options[this.selectedIndex].getAttribute('name');

        // 根据选择构建新的KML文件URL
        var url_bdd1 = 'URL_FOR_KML_' + name + '.kml';
        var url_bdd2 = 'URL_FOR_KML_' + name + '.kml';

        // 4. 创建新的数据源对象
        var newSource_bdd1 = new ol.source.Vector({
            format: new ol.format.KML(),
            url: url_bdd1
        });

        var newSource_bdd2 = new ol.source.Vector({
            format: new ol.format.KML(),
            url: url_bdd2
        });

        // 5. 更新现有图层的source
        layer_bdd1.setSource(newSource_bdd1);
        layer_bdd2.setSource(newSource_bdd2);
    };

    // 页面加载后立即触发一次onchange，以显示初始数据
    choix.onchange();
}