你能创建一个创建 openlayers 地图对象的 javascript 方法吗？

Question

我正在尝试自动创建openlayers地图对象，如下 HTML:

<div id="map1"></div>
<div id="map2"></div>

Javascript:

function createMap(mapObject, mapDiv) {
mapObject = 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})
})
}
createMap(map1, "map1");
createMap(map2, "map2");

假设我想创建一些事件，在事件发生时在任一地图对象上覆盖一个图层，我可以按如下方式修改上面的代码： HTML

...
<button id="btn1" type='submit'>Load To Map 1</button>
<button id="btn2" type='submit'>Load To Map 2</button>

JavaScript

...
$('#btn1').on('click', function(e) {
const key = 'some random numbers';
let raster = new TileLayer({
      minZoom: 14, // visible at zoom levels above 14
      source: new TileJSON({
        url: 'https://api.maptiler.com/maps/outdoor/tiles.json?key=' + key,
        tileSize: 512,
      }),
    });
createMap(map1, "map1");
map1.addLayer(raster);
}
$('#btn2').on('click', function(e) {
const key = "some random numbers";
let raster = new TileLayer({
      source: new XYZ({
        attributions: attributions,
        url:
          'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
        maxZoom: 20,
      })
    });
createMap(map2, "map2");
map1.addLayer(raster);
}

问题是，为什么这不能解决 map1 或 map2 未定义的错误？

Answer 1

不能通过函数定义变量。

您可以做的是 return 函数中的对象。

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})
  })
}

然后通过

定义一个变量

let map1 = createMap("map1");

因此，您的代码将是

$('#btn1').on('click', function(e) {
  const key = 'some random numbers';
  let raster = new TileLayer({
    minZoom: 14, // visible at zoom levels above 14
    source: new TileJSON({
      url: 'https://api.maptiler.com/maps/outdoor/tiles.json?key=' + key,
      tileSize: 512,
    }),
  });
  let map1 = createMap("map1");
  map1.addLayer(raster);
}

$('#btn2').on('click', function(e) {
  const key = "some random numbers";
  let raster = new TileLayer({
    source: new XYZ({
      attributions: attributions,
      url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
      maxZoom: 20,
    })
  });

  let map2 = createMap("map2")
  map2.addLayer(raster);
}

你能创建一个创建 openlayers 地图对象的 javascript 方法吗？

Can you create a javascript method that creates an openlayers map object?

javascript

automation

openlayers