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

javascript 复制代码
<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

javascript 复制代码
<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 数据提供方式:

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

相关推荐
baiduopenmap7 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish14 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
请叫我欧皇i27 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_29 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun35 分钟前
空间数据存储格式GeoJSON
前端
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
ZBY520311 小时前
【Vue】 npm install amap-js-api-loader指南
javascript·vue.js·npm
猫爪笔记1 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html
brief of gali1 小时前
记录一个奇怪的前端布局现象
前端
计算机毕设指导61 小时前
基于 SpringBoot 的作业管理系统【附源码】
java·vue.js·spring boot·后端·mysql·spring·intellij-idea