OpenLayers官方示例詳解七之圖層的最小、最大解析度（Layer Min/Max Resolution）
阿新 • • 發佈：2018-12-14
目錄
一、示例簡介
這個示例載入了一個MapBox的瓦片圖層和一個Open Street Map的瓦片圖層，同時使用最小、最大解析度限制圖層載入的比例級別。
使用滑鼠放大兩次：MapBox圖層就會被隱藏而OSM圖層就會顯示出來
如果繼續放大，OSM圖層也會消失。
這裡使用了圖層的minResolution和maxResolution選項來控制。
二、程式碼詳解
<!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 Min/Max Resolution</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> <script> var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM(), minResolution: 200, // 圖層的最小解析度，小於這個解析度的瓦片不會被載入 maxResolution: 2000, // 圖層的最大解析度，大於這個解析度的瓦片不會被載入 }), new ol.layer.Tile({ // 使用TileJSON的方式載入MapBox圖層 source: new ol.source.TileJSON({ url: 'https://api.tiles.mapbox.com/v3/mapbox.natural-earth-hypso-bathy.json?secure', crossOrigin: 'anonymous' }), minResolution: 2000, // 圖層的最小解析度，小於這個解析度的瓦片不會被載入 maxResolution: 20000 // 圖層的最大解析度，大於這個解析度的瓦片不會被載入 }) ], view: new ol.View({ center: [653600, 5723680], zoom: 5 }) }); </script> </body> </html>