<div id="map1" style=" 100%"></div> <div id="map2" style=" 100%"></div> <input type="button" onClick="swapMap();" value="调换地图" />
首先创建了俩个地图容器,之后创见俩个地图:
var map1 = new ol.Map({ layers:[ new ol.layers.Tile({ source: new ol.source.OSM() }) ] , view: new ol.View({ center:[0,0] //中心点坐标 zoom:10 //地图层级 }) target:'map1' //地图容器ID }) var map2= new ol.Map({ layers:[ new ol.layers.Tile({ source: new ol.source.OSM() }) ] , view: new ol.View({ center:[0,0] //中心点坐标 zoom:10 //地图层级 }) target:'map2' //地图容器ID })
交换函数:
function swapMap(){ //改变俩个地图的容器 map1.setTarget('map2'); map2.setTarget('map1'); } //这里可以直接交换并不需要一个中间变量来进行过渡