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文件结构
图1 WMTSCapabilities.xml文件结构

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

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页