Openlayers官方示例詳解十二之通過XYZ方式載入瓦片地圖
阿新 • • 發佈：2018-12-19
目錄
一、示例簡介
這個示例展示了通過XYZ格式的URL訪問瓦片地圖資料，有關XYZ方式載入瓦片地圖可以參考這篇文章：萬能瓦片載入祕籍。
本示例載入的瓦片地圖是Thunderforest的地圖資料，Thunderforest的官網地址是：http://www.thunderforest.com/
注意它不是完全免費的開源地圖，它的收費規則是：
所以，可以免費使用於個人的愛好專案上。
二、程式碼詳解
<!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>XYZ</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.XYZ({ // 使用XYZ方式載入瓦片地圖 url: 'https://tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=你註冊的Thunderforest的Key' }) }) ], view: new ol.View({ center: [-472202, 7530279], zoom: 12 }) }); </script> </body> </html>
載入結果：
三、補充
許多瓦片地圖廠商為了提高瓦片資料載入的效率，往往提供了多個瓦片資料路徑（URL），如果為應用程式賦予從多條資料路徑選擇最優路徑的功能，那就能提高瓦片資料載入的效率。
OpenLayers正是有這樣的功能，來看通過多條瓦片資料路徑載入高德地圖的示例：
<!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>載入高德地圖</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 urls = []; // 用於儲存高德瓦片地圖的所有資料路徑(URL) for(var i = 0; i < 4; i++){ urls[i] = 'http://wprd0' + (i + 1) + '.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7' } var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.XYZ({ urls: urls, // 注意這裡，這裡使用的是所有高德地圖瓦片地圖路徑組成的陣列 }) }) ], view: new ol.View({ center: [0, 0], zoom: 5 }) }); </script> </body> </html>