Openlayers官方示例詳解五之圖層捲簾（Layer Swipe）
阿新 • • 發佈：2018-12-14
一、示例簡介
在地圖視口中構建一個捲簾，滑鼠拉動這個捲簾，能夠同時改變兩個圖層顯示的大小。
圖層捲簾效果：
二、程式碼詳解
<!DOCTYPE html> <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 Swipe</title> <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: 'AmMSiUpOokUvbXi9sfQbdzPJQqpZ-9ZTMPJ-0uhNsB8cF3H4RMVSSuh4CTTeh2yG', 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