首页 > 技术文章 > setTarget()用于交换地图

dxsghr 2017-04-01 11:02 原文

<div id="map1" style="width: 100%"></div>
<div id="map2" style="width: 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');  
}
//这里可以直接交换并不需要一个中间变量来进行过渡

 

推荐阅读