03的开发日志
0%

ol5显示WMTS资源

发表于 更新于 分类于
本文字数： 5.3k 阅读时长 ≈ 5 分钟
  1. WMTS资源介绍
  2. Openlayer的WMTS解析器
  3. 引用WMTS服务的MainMap.vue

WMTS资源介绍

WMTS全称Web Map Tile Service，是允许用户访问切片地图（Tile Map）的一种服务标准。下面是一些常用的WMTS资源：

更多资源可以访问各大官网：

打开服务对应的链接（这是一个xml文件），可以看到文件结构如图1所示。

图1 WMTSCapabilities.xml文件结构

图层信息全都保存在<Contents>标签中，我们引用地图服务的引用信息就包含在这个标签内。<Contents>标签里面包含了<Layer>标签和<TileMatrixSet>标签，我们感兴趣的是前者。若该服务提供的图层数目较多，会存在多个<Layer>标签。在每个<Layer>标签中，包含了这个图层的Title和Identifier，如图2所示。一般来说，调用WMTS服务的某个图层，只需要声明该图层的Identifier即可。

图2 Layer结构

Openlayer的WMTS解析器

Openlayers自带解析WMTS资源和创建WMTS图层的工具，引入这些工具的语句为：

1
2
3
// WMTS loader
import WMTS, {optionsFromCapabilities} from 'ol/source/WMTS';
import WMTSCapabilities from 'ol/format/WMTSCapabilities';

创建解析器

1
let parser = new WMTSCapabilities();

获取WMTS的数据

1
2
3
4
5
6
7
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数据源

1
2
3
4
5
6
7
8
9
10
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<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>