一、示例简介
在地图视口中构建一个卷帘，鼠标拉动这个卷帘，能够同时改变两个图层显示的大小。
图层卷帘效果：
二、代码详解
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Layer Swipetitle> <link href="ol_v5.0.0/css/ol.css" rel="stylesheet" type="text/css" /> <script src="ol_v5.0.0/build/ol.js" type="text/javascript">script>head><body> <div id="map">div> <input id="swipe" type="range" /> <script> // oepn street map var osm = new ol.layer.Tile({ source: new ol.source.OSM() }); // 微软Bing地图 var bing = new ol.layer.Tile({ source: new ol.source.BingMaps({ key: '-- Bing地图的key，可以直接去官网申请', imagerySet: 'Aerial' }) }); var map = new ol.Map({ target: 'map', layers: [ osm, bing ], view: new ol.View({ center: [0, 0], zoom: 2 }) }); var swipe = document.getElementById('swipe'); // 用于控制卷帘位置的DOM元素 bing.on('precompose', function(event){ // 在Bing地图渲染之前触发 var ctx = event.context; //获得canvas渲染上下文 var width = ctx.canvas.width * (swipe.value / 100); // 用于保存卷帘的位置 ctx.save(); // 保存canvas设置 ctx.beginPath(); // 开始绘制路径 ctx.rect(width, 0, ctx.canvas.width - width, ctx.canvas.height); // 绘制矩形 ctx.clip(); // 裁剪Bing地图，以形成卷帘效果 }) bing.on('postcompose', function(event){ // 在Bing地图渲染之后触发 var ctx = event.context; ctx.restore(); // 恢复canvas设置 }); swipe.addEventListener('input', function(){ // 在每次用户改变swipe控件时触发 map.render(); // 渲染地图 }, false);script>body>html>官方示例地址：http://openlayers.org/en/latest/examples/layer-swipe.html
【OpenLayers】OpenLayers概述
【OpenLayers】实现简单的地图显示
【OpenLayers】地图控件之缩放控件
【OpenLayers】归属控件与全屏控件
【OpenLayers】地图控件之坐标拾取控件和鹰眼控件
【OpenLayers】地图控件之旋转控件与比例尺控件
【OpenLayers】实现图层切换控件
【OpenLayers】多源数据加载之数据组织
【OpenLayers】多源数据加载之瓦片地图原理一
【OpenLayers】多源数据加载之瓦片地图原理二
【OpenLayers】多源数据加载之用最简单的方式加载瓦片地图
【OpenLayers】多源数据加载之使用XYZ的方式加载瓦片地图
【OpenLayers】多源数据加载之详解OpenLayers的瓦片坐标系
【OpenLayers】多源数据加载之离线瓦片地图
【OpenLayers】多源数据加载之矢量地图
【OpenLayers】多源数据加载之WMS(一)
【OpenLayers】多源数据加载之WMS(二)
【OpenLayers】多源数据加载之矢量切片
【OpenLayers】多源数据加载之WMTS
【OpenLayers】图形绘制之设置图形的样式
【OpenLayers】图形绘制之编辑图形
【OpenLayers】使用GeoJSON数据渲染热力图
【OpenLayers】实现“上一视图”、“下一视图”的视图切换功能
【OpenLayers】图文标注
【OpenLayers】聚合标注
861
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
