WMTS資源介紹
WMTS全稱Web Map Tile Service,是允許用戶訪問切片地圖(Tile Map)的一種服務標準。下面是一些常用的WMTS資源:
- http://gis.sinica.edu.tw/ccts/wmts/1.0.0/WMTSCapabilities.xml
由臺灣中央研究院開發的中國歷史地圖 - https://services.arcgisonline.com/arcgis/rest/services/NatGeo_World_Map/MapServer/WMTS/1.0.0/WMTSCapabilities.xml
National Geographic和Esri聯合開發的包括行政邊界,城市,保護區,高速公路,道路,鐵路,水景,建築物和地標等內容的地圖 - https://services.arcgisonline.com/arcgis/rest/services/Demographics/USA_Population_Density/MapServer/WMTS/
美國人口密度圖 - https://services.arcgisonline.com/arcgis/rest/services/USA_Topo_Maps/MapServer/WMTS/1.0.0/WMTSCapabilities.xml
美國地質調查局(USGS)紙質地形圖的無縫掃描圖像,展示了世界範圍內的土地利用類型圖,和美國詳細的地形圖(數字線劃圖形DLG) - https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/WMTS/1.0.0/WMTSCapabilities.xml
世界範圍內的衛星地圖,包含15米TerraColor影像、2.5米的SPOT影像、南極洲15米的Landsat影像。在美國大陸分辨率能達到0.3米,在西歐部分地圖分辨率爲0.6米。 - https://services.arcgisonline.com/arcgis/rest/services/World_Shaded_Relief/MapServer/WMTS/1.0.0/WMTSCapabilities.xml
以地形陰影表示高程的世界高程圖。美國地區分辨率爲30米,北緯60度到南緯56度之間區域分辨率爲90米,在這個緯度範圍之外的分辨率爲1KM - https://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer/WMTS/1.0.0/WMTSCapabilities.xml
世界範圍內的公路/路網信息地圖 - https://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer/WMTS/1.0.0/WMTSCapabilities.xml
包含水深的、以地形陰影表示高程的地形圖(世界範圍內)
更多資源可以訪問各大官網:
- Esri:https://services.arcgisonline.com/arcgis/rest/services
- 天地圖:https://service.tianditu.gov.cn/
打開服務對應的鏈接(這是一個xml文件),可以看到文件結構如圖1所示。
圖1 WMTSCapabilities.xml文件結構
圖層信息全都保存在<Contents>
標籤中,我們引用地圖服務的引用信息就包含在這個標籤內。<Contents>
標籤裏面包含了<Layer>
標籤和<TileMatrixSet>
標籤,我們感興趣的是前者。若該服務提供的圖層數目較多,會存在多個<Layer>
標籤。在每個<Layer>
標籤中,包含了這個圖層的Title
和Identifier
,如圖2所示。一般來說,調用WMTS服務的某個圖層,只需要聲明該圖層的Identifier
即可。
圖2 Layer結構
Openlayer的WMTS解析器
Openlayers自帶解析WMTS資源和創建WMTS圖層的工具,引入這些工具的語句爲:
// WMTS loader
import WMTS, {optionsFromCapabilities} from 'ol/source/WMTS';
import WMTSCapabilities from 'ol/format/WMTSCapabilities';
創建解析器
let parser = new WMTSCapabilities();
獲取WMTS的數據
let wmtsString = 'http://gis.sinica.edu.tw/ccts/wmts/1.0.0/WMTSCapabilities.xml';
fetch(wmtsString)
.then( response => {
return response.text();
}).then( data => {
// Parse WMTS data
});
解析數據並創建WMTS數據源
let identifier = 'ad1208';
let results = parser.read(data);
let options = optionsFromCapabilities(results, {
layer: identifier,
matrixSet: 'GoogleMapsCompatible'
});
let wmtsSource = new WMTS(options));
layer.setSource(wmtsSource);
引用WMTS服務的MainMap.vue
MainMap.vue
<template>
<div id="map" :style="MapStyle"></div>
</template>
<script>
// Openlayers based modules
import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
// Map Control
import {defaults} from 'ol/control';
// WMTS loader
import WMTS, {optionsFromCapabilities} from 'ol/source/WMTS';
import WMTSCapabilities from 'ol/format/WMTSCapabilities';
export default {
name: 'MainMap',
data() {
return {
Map: {},
View: {},
Layers: [],
MapStyle: {
height: innerHeight + 'px',
width: innerWidth + 'px'
},
basedLayer: new TileLayer({
opacity: 0.7
}),
wmtsLayer: new TileLayer({
opacity: 0.9
}),
wmtsResults: undefined,
}
},
created() {
const self = this;
onresize = e => {
let win = e.currentTarget;
self.MapStyle.height = win.innerHeight + 'px';
self.MapStyle.width = win.innerWidth + 'px';
}
},
mounted() {
const self = this;
// View
const center = [12175093.67465372, 4209022.808896985];
const zoom = 5;
const projecton = 'EPSG:3857';
self.View = new View({
center: center,
zoom: zoom,
projecton: projecton,
});
// Layers
self.basedLayer.setSource(new OSM());
self.setWmtsSource('ad1208');
self.Layers = [
self.basedLayer,
self.wmtsLayer
]
// Map
self.Map = new Map({
target: 'map',
view: self.View,
layers: self.Layers,
controls: defaults({
attribution: false,
rotate: false,
zoom: false
}),
});
self.Map.on('click', event => {
console.log('(' + event.coordinate.toString() + ') ' + event.map.getView().getZoom());
});
},
methods: {
setWmtsSource(identifier) {
const self = this;
if (self.wmtsResults === undefined)
{
let parser = new WMTSCapabilities();
let wmtsString = 'http://gis.sinica.edu.tw/ccts/wmts/1.0.0/WMTSCapabilities.xml';
fetch(wmtsString)
.then( response => {
return response.text();
}).then( data => {
// Parse WMTS data
// results.Contents.Layer.Title/.Identifier
let results = parser.read(data);
self.wmtsResults = results;
let options = optionsFromCapabilities(results, {
layer: identifier,
matrixSet: 'GoogleMapsCompatible'
});
self.wmtsLayer.setSource(new WMTS(options));
});
}
else
{
let options = optionsFromCapabilities(self.wmtsResults, {
layers: identifier,
matrixSet: 'GoogleMapsCompatible'
});
self.wmtsLayer.setSource(new WMTS(options));
}
}
},
}
</script>
<style scoped>
</style>