ol5顯示WMTS資源

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>