Openlayers3从element获取地图

时间:2015-04-28 14:17:32

标签: javascript openlayers gwt-openlayers

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

2 个答案:

答案 0 :(得分:3)

map对象具有对HTML元素的引用,但HTML元素没有对map对象的引用。 HTML元素根本不知道地图对象。

如果使用jQuery,则可以使用data method在jQuery对象中存储对地图的引用。例如:

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

然后,从元素中获取对地图的引用:

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

答案 1 :(得分:0)

为了清楚起见,这是另一个例子,展示了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