openlayers 使用WMTS和XYZ加载天地图切片服务

openlayers 使用WMTS和XYZ加载天地图切片服务

本篇介绍一下使用openlayers加载天地图切片，两种方法：

1. 使用WMTS
2. 使用XYZ

1 需求

• openlayers加载天地图

2 分析

主要是不同类型source的使用

• WMTS（Web Map Tile Service） 是 OGC（Open Geospatial Consortium）标准，用于提供预渲染的地图切片。
• XYZ切片是一种在线地图数据格式，由goole公司开发，将地图数据分解为一系列小的图像块，以提高地图显示效率和性能。
• WMTS 和 XYZ 的主要区别在于，WMTS 提供了更多的元数据和配置选项（如投影、分辨率、矩阵集等），而 XYZ 通常更简单，只需要一个 URL 模板即可。
• 天地图同时提供 WMTS 和 XYZ（或其他格式）的服务

3 实现

3.1 WMTS

<template>
  <div id="map" class="map"></div>
</template>

<script setup lang="ts">

import { Map, View } from 'ol';
import { Tile as TileLayer } from 'ol/layer';
import { get } from 'ol/proj';
import { getWidth, getTopLeft } from 'ol/extent';
import { WMTS } from 'ol/source';
import WMTSTileGrid from 'ol/tilegrid/WMTS';


const projection = get('EPSG:4326');
const projectionExtent = projection.getExtent();
const size = getWidth(projectionExtent) / 256;
const resolutions = [];
for (let z = 2; z < 19; ++z) {
  resolutions[z] = size / Math.pow(2, z);
}

const layerTypeMap = {
    vector: ['vec', 'cva'], // [矢量底图, 矢量注记]
    image: ['img', 'cia'], // [影像底图, 影像注记]
    terrain: ['ter', 'cta'] // [地形晕渲, 地形注记]
  };
const matrixIds= [
              '0',
              '1',
              '2',
              '3',
              '4',
              '5',
              '6',
              '7',
              '8',
              '9',
              '10',
              '11',
              '12',
              '13',
              '14'
            ]


const map = ref();

onMounted(() => {
  initMap('image');
});

const initMap = (layerType = 'image') => {
  const key = '换成申请的天地图key';
  
  const matrixSet = 'c';// c: 经纬度投影 w: 墨卡托投影
  map.value = new Map({
    target: 'map',
    layers: [
      // 底图
      new TileLayer({
        source: new WMTS({
          url: `http://t{0-6}.tianditu.com/${layerTypeMap[layerType][0]}_${matrixSet}/wmts?tk=${key}`,
          layer: layerTypeMap[layerType][0],
          matrixSet: matrixSet,
          style: 'default',
          crossOrigin: 'anonymous', 
          format: 'tiles',
          wrapX: true,
          tileGrid: new WMTSTileGrid({
            origin: getTopLeft(projectionExtent),
            resolutions: resolutions,
            matrixIds:matrixIds
          })
        })
      }),
      // 注记
      new TileLayer({
        source: new WMTS({
          url: `http://t{0-6}.tianditu.com/${layerTypeMap[layerType][1]}_${matrixSet}/wmts?tk=${key}`,
          layer: layerTypeMap[layerType][1],
          matrixSet: matrixSet,
          style: 'default',
          crossOrigin: 'anonymous', 
          format: 'tiles',
          wrapX: true,
          tileGrid: new WMTSTileGrid({
            origin: getTopLeft(projectionExtent),
            resolutions: resolutions,
            matrixIds: matrixIds
          })
        })
      }),
    ],
    view: new View({
      center: [116.406393, 39.909006],
      projection: projection,
      zoom: 5,
      maxZoom: 17,
      minZoom: 1
    })
  });
};
</script>
<style scoped lang="scss">
.map {
  width: 100%;
  height: 100%;
}
</style>

3.2 XYZ

<template>
  <div id="map" class="map"></div>
</template>

<script setup lang="ts">
import { Map, View } from 'ol';
import { Tile as TileLayer } from 'ol/layer';
import { get } from 'ol/proj';
import { XYZ } from 'ol/source';

const projection = get('EPSG:4326');

const layerTypeMap = {
  vector: ['vec', 'cva'], // [矢量底图, 矢量注记]
  image: ['img', 'cia'], // [影像底图, 影像注记]
  terrain: ['ter', 'cta'] // [地形晕渲, 地形注记]
};

const map = ref();

onMounted(() => {
  initMap('image');
});

const initMap = (layerType = 'image') => {
  const key = '换成申请的天地图key';
  // c: 经纬度投影 w: 墨卡托投影
  const matrixSet = 'c';
  map.value = new Map({
    target: 'map',
    layers: [
      // 底图
      new TileLayer({
        source: new XYZ({
          url: `https://t{0-7}.tianditu.gov.cn/DataServer?T=${layerTypeMap[layerType][0]}_${matrixSet}&tk=${key}&x={x}&y={y}&l={z}`,
          projection,
        })
      }),
      // 注记
      new TileLayer({
        source: new XYZ({
          url: `https://t{0-7}.tianditu.gov.cn/DataServer?T=${layerTypeMap[layerType][1]}_${matrixSet}&tk=${key}&x={x}&y={y}&l={z}`,
          projection,
        })
      })
    ],
    view: new View({
      center: [116.406393, 39.909006],
      projection: projection,
      zoom: 5,
      maxZoom: 17,
      minZoom: 1
    })
  });
};
</script>
<style scoped lang="scss">
.map {
  width: 100%;
  height: 100%;
}
</style>

4 WMTS和XYZ区别

WMTS（Web Map Tile Service）和XYZ作为地图瓦片服务的两种不同方式，在多个方面存在显著的差异。以下是它们之间的主要不同点：

4.1 标准化与自定义：

• WMTS：是一种由Open Geospatial Consortium (OGC)制定的开放标准，它定义了在Web上发布和使用预渲染地图瓦片的标准方法。这种标准化确保了不同厂商和平台之间的互操作性。
• XYZ：是一种更偏向于自定义的地图瓦片服务格式，通常用于OpenStreetMap和其他提供标准XYZ URL格式的地图服务。它没有像WMTS那样的严格标准，但提供了一种灵活的方式来提供地图瓦片。

4.2 数据提供方式：

• WMTS：通过HTTP请求获取地图瓦片，通常提供详细的元数据和配置选项，如投影、分辨率、矩阵集等。这些选项允许开发人员更精细地控制地图的显示和性能。
• XYZ：通常通过简单的URL模板（如https://t{0-7}.tiledata.plus/tiles/v1/mapnik/{z}/{x}/{y}.png）来提供地图瓦片，其中{z}、{x}和{y}分别代表缩放级别、列索引和行索引。这种方式更加简洁和直观。

4.3 性能与缓存：

• WMTS：支持瓦片缓存，这可以提高地图显示的性能和效率。通过控制缓存时间和版本，WMTS可以确保服务正常运行的同时减少数据传输量。
• XYZ：虽然也支持缓存（由浏览器或代理服务器实现），但通常没有WMTS那样的详细缓存控制机制。

4.4 应用场景：

• WMTS：由于其标准化和灵活性，WMTS适用于各种Web地图应用程序、GIS（地理信息系统）应用程序、移动应用程序以及数据分析和可视化等场景。
• XYZ：由于其简单性和自定义性，XYZ通常用于需要快速集成地图功能的项目，如网站、移动应用等。

4.5 数据格式与输出：

• WMTS：支持多种数据格式的输出，如JPEG、PNG、GIF、TIFF等。提供者可根据实际需求选择适合的数据格式。
• XYZ：通常使用PNG或JPEG等常见图像格式来提供地图瓦片。

4.6 坐标系统和投影：

• WMTS：支持多种坐标系统和投影方式，并可以自由定义坐标范围和坐标系。这使得WMTS能够灵活地适应不同地区和地图源的坐标定义。
• XYZ：通常使用WGS84（或类似）地理坐标系和Web墨卡托投影（或类似投影），但具体取决于地图服务提供商的实现。

综上所述，WMTS和XYZ在标准化、数据提供方式、性能与缓存、应用场景、数据格式与输出以及坐标系统和投影等方面存在显著差异。开发人员应根据具体需求和使用场景选择最适合的地图瓦片服务方式。