Estoy tratando de automatizar la creación de objetos de mapa de capas abiertas, de la siguiente manera 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");Digamos que quería crear algún evento que superponga una capa en cualquiera de los objetos del mapa cuando ocurran esos eventos, podría modificar el código anterior de la siguiente manera: 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); }La pregunta es, ¿por qué esto no funciona con un error de que map1 o map2 no están definidos?
No se puede definir una variable a través de una función.
Lo que puede hacer es devolver el objeto en la función.
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}) }) }Luego defina una variable por
let map1 = createMap("map1");Entonces, su código será
$('#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); }