你可以创建一个javascript方法来创建一个openlayers映射对象吗?

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

不能通过函数定义变量。

你可以做什么,在函数返回对象。

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