自定义OpenLayers地图创建方法调用时map1/map2未定义错误原因咨询

错误产生原因 #

• 变量作用域逻辑错误：createMap函数内部对mapObject的赋值操作无法传递到函数外部。JavaScript中参数传递为值传递，你传入未声明的map1/map2作为参数时，只是把变量的undefined值复制给了函数内的局部变量mapObject，函数内部将mapObject赋值为地图实例的操作，完全不会影响外部的map1/map2变量，后续调用map1.addLayer自然会提示未定义。
• 变量未提前声明：调用createMap(map1, "map1")前你没有提前声明map1、map2两个变量，代码运行到初始化步骤时本身就会直接抛出未定义错误。
• 额外逻辑错误：btn2的点击事件中，你写完createMap(map2, "map2")后调用的是map1.addLayer(raster)，即便变量问题修复，也会把卫星图层错加到map1上，不符合需求。
• 重复初始化问题：每次点击按钮都重新调用createMap会重复生成地图实例，属于不必要的冗余操作，还会引发性能损耗和渲染异常。

修复参考代码 #

初始化逻辑调整 #

// 提前声明全局变量存储地图实例
let map1, map2;

// 改造createMap函数，直接返回地图实例即可
function createMap(mapDiv) {
  return new ol.Map({
    layers: new ol.layer.Tile({source: new ol.source.OSM()}),
    target: mapDiv,
    view: new ol.View({center: ol.proj.fromLonLat([32.0, 34.5]), zoom: 8})
  })
}

// 初始化时给全局变量赋值
map1 = createMap("map1");
map2 = createMap("map2");

点击事件逻辑调整 #

$('#btn1').on('click', function(e) {
  e.preventDefault(); // 阻止submit类型按钮默认的表单提交行为
  const key = 'some random numbers';
  let raster = new ol.layer.Tile({
    minZoom: 14,
    source: new ol.source.TileJSON({
      url: 'https://api.maptiler.com/maps/outdoor/tiles.json?key=' + key,
      tileSize: 512,
    }),
  });
  // 不需要重复初始化地图，直接添加图层
  map1.addLayer(raster);
})

$('#btn2').on('click', function(e) {
  e.preventDefault();
  const key = "some random numbers";
  const attributions = '请补全对应图层的版权声明';
  let raster = new ol.layer.Tile({
    source: new ol.source.XYZ({
      attributions: attributions,
      url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
      maxZoom: 20,
    })
  });
  // 给map2添加图层，不要写错目标对象
  map2.addLayer(raster);
})

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