python实现卷帘功能_openlayers之卷帘地图SWIPE MAP

openlayers之卷帘地图SWIPE MAP

功能说明

卷帘指，同一屏幕，左右或者上下同时看到两个图层，可以直观的进行对比。

通过滑块滑动控制显示比例

原理

地图渲染是绘制的canvas，卷帘实现原理是根据滑块值，设置地图显示比例，重新绘制canvas渲染地图范围

代码详解

var map, view;

$(function() {

var osm = new ol.layer.Tile({//定义图层1

source: new ol.source.OSM()

});

var bing = new ol.layer.Tile({//定义图层2，注：图层为bingmap图层，也可以使用其他图层

source: new ol.source.BingMaps({

//key需要在https://www.bingmapsportal.com/Application中新建application

key: 'AhfSMDpsNYRer-x0VWD6CNEzaTiFn2MUCG0OyNlnms_ZpO6g66-EThTQp4XJj0s3',

imagerySet: 'Aerial'

})

})

view = new ol.View({

center: [0, 0],

zoom: 2

});

map = new ol.Map({

layers: [osm, bing],

target: 'map',

view: view

});

var swipe=document.getElementById('swipe');

//请求bing地图数据前，根据滑块值设置渲染范围

bing.on('precompose',function(e){

var ctx=e.context;

var width=ctx.canvas.width*(swipe.value/100);

ctx.save();

ctx.beginPath();

ctx.rect(width, 0, ctx.canvas.width - width, ctx.canvas.height);

ctx.clip();//裁剪

});

//请求完成，渲染

bing.on('postcompose',function(e){

var ctx=e.context;

ctx.restore();

});

//滑块滑动地图重新渲染

swipe.addEventListener('input',function(){

map.render();

},false);

})

代码下载：