Openlayers3從element獲取地圖

Question

在Openlayers 3中有沒有辦法獲得附加到特定html元素的地圖？

就像是：

var map = new ol.Map({
  view: new ol.View({
    center: [0, 0],
    zoom: 1
  }),
  layers: [
    new ol.layer.Tile({
      source: new ol.source.MapQuest({layer: 'osm'})
    })
  ],
  target: 'map'
});

//Later on, in a different file
var myMap = $("#map").ol.Map()

Answer 1

map對象具有對HTML元素的引用，但HTML元素沒有對map對象的引用。 HTML元素根本不知道地圖對象。

如果使用jQuery，則可以使用data方法在jQuery對象中存儲對映射的引用。 例如：

var map = new ol.Map({
  target: 'map', 
  //... 
});
$('#map').data('map', map);

然后，從元素中獲取對地圖的引用：

var map = $('#map').data('map');

Answer 2

為清楚起見，這是另一個例子，展示了erilem的答案，其中map var和map div未命名為“map”。

mapElement = '#mapDiv'
mymap = new ol.Map({        
  target: mapDiv,
  view: new ol.View({
     ...
  })
});
$(mapElement).data('map', mymap);

然后，您可以使用數據方法使用數據使用jquery引用該映射。 在我的情況下，我然后想使用ol updateSize（）來更新mymap。

thisMap = $(mapElement).data('map')
thisMap.updateSize();

當我在頁面上有多個地圖時，這很有用。 我在哪里使用：

mapDiv = id +'-map'      
mapElement = '#' + mapDiv
maps[i] = new ol.Map({        
    target: mapDiv,
    view: new ol.View({
        ...
    })
});
$(mapElement).data('map', maps[i])

然后：

thisMapId = activeDataset + '-map'
thisMapElement = '#' + thisMapId
thisMap = $(thisMapElement).data('map')
thisMap.updateSize()

其中id = activeDataset