Openlayers官方例項詳解四之圖層望遠鏡（Layer Spyglass）
阿新 • • 發佈：2018-12-14
目錄
一、示例簡介
圖層渲染可以在precompose和postcompose事件處理程式中被控制，這兩個事件處理程式的事件物件中包含一個Canvas渲染上下文屬性（canvas rendering context）。
在本示例中，在precompose事件處理程式中生成一個以滑鼠游標為中心的剪下掩模，給使用者提供一個望遠鏡效果，使得在一個圖層中可以檢視另一個圖層。
滑鼠在地圖上移動可以看到效果，使用 “↑”鍵和“↓”鍵可以調整望遠鏡的大小。
圖層望遠鏡效果：
二、程式碼詳解
html
<body>
<!-- 圖層容器 -->
<div id="map"></div>
</body>JS
2.1、首先載入Bing地圖的路網地圖和影像地圖
// Bing地圖的key var key = 'Bing地圖的key，可以去Bing地圖官網申請'; var roads = new TileLayer({ // Bing路網地圖 source: new BingMaps({ key: key, imagerySet: 'Road' }) }); var imagery = new TileLayer({ // Bing影像地圖 source: new BingMaps({ key: key, imagerySet: 'Aerial' }) }); var container = document.getElementById('map'); var map = new Map({ target: container, layers: [ roads, imagery ], view: new View({ center: fromLonLat([-109, 46.5]), zoom: 6 }) });
可以去Bing地圖的官網申請Key碼。
2.2、控制望遠鏡的半徑和位置
建立兩個變數radius和mousePosition以用於儲存望遠鏡的半徑和望遠鏡圓心的位置（也就是滑鼠游標所在畫素的位置）
var radius = 75; // 用於控制圖層望遠鏡的半徑 document.addEventListener('keydown', function(evt){ console.log(100); if(evt.keyCode === 38){ console.log(1); // 如果使用者按下'↑'鍵，望遠鏡的半徑增加5畫素 radius = Math.min(radius + 5, 150); map.render(); evt.preventDefault(); }else if(evt.keyCode === 40){ // 如果使用者按下'↓'鍵，望遠鏡的半徑減少5畫素 radius = Math.max(radius - 5, 25); map.render(); evt.preventDefault(); } }); var mousePosition = null; // 用於實時儲存滑鼠游標所在的畫素的位置 container.addEventListener('mousemove', function(event){ // 每次滑鼠移動就獲取滑鼠游標所在畫素相對於地圖視口的位置， 並重新渲染一次地圖 mousePosition = map.getEventPixel(event); map.render(); }); container.addEventListener('mouseout', function(){ // 滑鼠移出地圖容器，滑鼠位置設定為空，並重新渲染一次地圖 mousePosition = null; map.render(); });
主要通過"keydown"、"mousemove"、"mouseout"來控制望遠鏡的半徑和位置。
注意：每次改變了望遠鏡的半徑或位置都需要重新渲染地圖，即呼叫map物件的render()方法。
2.3、繪製圖層望遠鏡
因為precompose事件的事件處理程式的事件物件包含canvas渲染上下文，所以可以使用它繪製圖層望遠鏡。
imagery.on('precompose', function(event){ // 在每次繪製影像圖層之前觸發
var ctx = event.context; // 獲取canvase渲染上下文
var pixelRatio = event.frameState.pixelRatio; // 獲取地圖當前幀的畫素比率
ctx.save(); // 儲存當前canvas設定
ctx.beginPath(); // 開始繪製路徑
if(mousePosition){
// 繪製一個圍繞滑鼠游標的圓
ctx.arc(mousePosition[0] * pixelRatio, mousePosition[1] * pixelRatio,
radius * pixelRatio, 0, 2 * Math.PI);
ctx.lineWidth = 5 * pixelRatio;
ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)';
ctx.stroke();
}
ctx.clip(); // 使用剛繪製的圓裁剪影像圖層，使得影像圖層只保留該圓的範圍
});
// 在每次繪製影像圖層之後觸發
imagery.on('postcompose', function(event){
var ctx = event.context;
ctx.restore(); // canvas恢復到之前的設定
})注意：mousePosition中儲存的滑鼠游標位置資訊是基於當前地圖的畫素比的，所以要把它轉換成和canvas繪圖一致的畫素比。
三、總結
圖層望遠鏡功能使得使用者可以在一個圖層上檢視另外一個圖層。
官方示例地址：http://openlayers.org/en/latest/examples/layer-spy.html?q=Layer+Spyt