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

相关推荐
程序员爱技术40 分钟前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js
并不会2 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
衣乌安、2 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜2 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师2 小时前
CSS的三个重点
前端·css
耶啵奶膘3 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^5 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie5 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic6 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿6 小时前
webWorker基本用法
前端·javascript·vue.js