GIS初學者，最新OpenLayers WMTS 天地圖，OpenLayers載入天地圖、呼叫天地圖WMTS示例、tianditu、EPSG:3857、EPSG:4326
阿新 • • 發佈：2019-01-04
2018最新OpenLayers天地圖載入可行方案，天地圖WMTS呼叫，OpenLayers 天地圖 WMTS GetCapabilities GetTile
最近要了解Web GIS方面的知識，對我這些外行人來說比較吃力，用OpenLayers載入天地圖也遇到了小打擊，一番折騰，終於做到僅僅顯示了，把過程簡單記錄下：
首先是百度一輪，看了不少部落格，感覺差不多後，自己動手就是不成功，繼續摸索後勉強算把地圖加載出來了，下面是我的基本過程：
1、天地圖現在要註冊才能用，以前應該不用註冊（網上的程式碼以前寫的，我使用不成功）
到這裡，已經有WMTS的連結了，接著就使用OpenLayers來呼叫這個WMTS的連結來顯示地圖。
2、編寫OpenLayers呼叫WMTS服務來顯示地圖的程式碼（我的做法是到官網複製相關Demo的程式碼，然後修改）
在Demo程式碼的基礎上，我調整後能成功顯示的程式碼如下（可能有些多餘的程式碼）：
（檔案 index.html 程式碼）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Using Parcel with OpenLayers</title> <style> html,body{ padding:0; margin: 0; } .map { width: 600px; height: 400px; float:left; margin: 10px 0 0 10px; } </style> </head> <body> <div id="map1" class="map"></div> <script src="./index.js"></script> </body> </html>
（檔案 index.js 程式碼）
import Map from 'ol/Map.js'; import View from 'ol/View.js'; import {defaults as defaultControls} from 'ol/control.js'; import {getWidth, getTopLeft} from 'ol/extent.js'; import TileLayer from 'ol/layer/Tile.js'; import {get as getProjection} from 'ol/proj.js'; import OSM from 'ol/source/OSM.js'; import WMTS from 'ol/source/WMTS.js'; import WMTSTileGrid from 'ol/tilegrid/WMTS.js'; var projection = getProjection('EPSG:3857'); var projectionExtent = projection.getExtent(); var size = getWidth(projectionExtent) / 256; var resolutions = new Array(18); var matrixIds = new Array(18); for (var z = 1; z < 19; ++z) { // generate resolutions and matrixIds arrays for this WMTS resolutions[z] = size / Math.pow(2, z); matrixIds[z] = z; } var webKey = 'f50a580b75898a7e26dca2dfe3ad910e'; var wmtsUrl_1 = 'http://t{0-7}.tianditu.gov.cn/vec_w/wmts?tk='; //向量底圖 var wmtsUrl_2 = 'http://t{0-7}.tianditu.gov.cn/cva_w/wmts?tk='; //向量註記 var wmtsUrl_3 = 'http://t{0-7}.tianditu.gov.cn/img_w/wmts?tk='; //影像底圖 var wmtsUrl_4 = 'http://t{0-7}.tianditu.gov.cn/cia_w/wmts?tk='; //影像註記 var wmtsUrl_5 = 'http://t{0-7}.tianditu.gov.cn/ter_w/wmts?tk='; //地形底圖 var wmtsUrl_6 = 'http://t{0-7}.tianditu.gov.cn/cta_w/wmts?tk='; //地形註記 var wmtsUrl_7 = 'http://t{0-7}.tianditu.gov.cn/ibo_w/wmts?tk='; //境界（省級以上） var wmtsUrl_8 = 'http://t{0-7}.tianditu.gov.cn/eva_w/wmts?tk='; //向量英文註記 var wmtsUrl_9 = 'http://t{0-7}.tianditu.gov.cn/eia_w/wmts?tk='; //影像英文註記 var map1 = new Map({ layers: [ new TileLayer({ opacity: 0.7, source: new WMTS({ url: wmtsUrl_1 + webKey, layer: 'vec', matrixSet: 'w', format: 'tiles', style: 'default', projection: projection, tileGrid: new WMTSTileGrid({ origin: getTopLeft(projectionExtent), resolutions: resolutions, matrixIds: matrixIds }), wrapX: true }) }), new TileLayer({ opacity: 0.7, source: new WMTS({ url: wmtsUrl_2 + webKey, layer: 'cva', matrixSet: 'w', format: 'tiles', style: 'default', projection: projection, tileGrid: new WMTSTileGrid({ origin: getTopLeft(projectionExtent), resolutions: resolutions, matrixIds: matrixIds }), wrapX: true }) }) ], target: 'map1', view: new View({ center: [-11158582, 4813697], zoom: 4 }) });
效果顯示如圖：
3、程式碼中有些關鍵的引數，導致我開始一直不成功，下面簡單說明一下程式碼
主要是“source”裡面的“layer、matrixSet、format、style”這幾個引數，
這幾個引數不能亂寫，得由WMTS的GetCapabilities介面返回的結果來決定，
你也可以百度下“WMTS GetCapabilities”瞭解更多！
程式碼中這幾個引數，如圖：
4、天地圖有好幾份底圖資料，我為了看看效果，把它都顯示了一下
目前天地圖有這些WMTS服務介面，如圖：
下面我都用OpenLayers呼叫看看效果唄，如圖：
參考：（看了比較多部落格，參考了哪些文章，沒記錄下來，比較雜。。。）
（完）