目录
一、案例截图
二、安装OpenLayers库
npm install ol三、WMTS服务详解
WMTS（Web Map Tile Service）是一种标准的网络地图服务协议，用于提供基于瓦片的地图数据。它允许客户端请求地图的具体区域，并将相应的瓦片整合在一起。WMTS的主要优点在于其高效性，能够快速加载和显示地图。
1、layer：指定所请求的地图图层。可以是基础地图图层或叠加图层。
2、style：图层的样式。通常用于定义地图的外观，可以使用默认样式或自定义样式。
3、tilematrixset：指定瓦片矩阵集，定义了地图的缩放层级和瓦片的排列方式。
4、Service：服务指定为WMTS。
5、Request：表示请求的类型，常见的请求包括 GetCapabilities（获取服务能力）、GetTile（获取指定瓦片）等。
6、Version：指定 WMTS 协议的版本，如 1.0.0。
7、Format：表示请求的数据格式，常见的如 image/png、image/jpeg 等。
8、TileMatrix：当前请求的瓦片矩阵，表示具体的缩放级别。
9、TileCol：指定请求的瓦片行。
10、TileRow：指定请求的瓦片列。
请求参数示例截图：
这样就能成功获取到其中一部分瓦片：
四、完整代码
<template>
<div id="map-container"></div>
</template>
<script>
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'
import { defaults as defaultControls} from 'ol/control';
export const projection = get("EPSG:4326");
const projectionExtent = projection.getExtent();
const size = getWidth(projectionExtent) / 256;
const resolutions = [];
for (let z = 0; z < 19; ++z) {
resolutions[z] = size / Math.pow(2, z);
}
let map;
export default {
data() {
return {
}
},
mounted(){
this.initMap() // 加载矢量底图
},
methods:{
initMap() {
const KEY = '你申请的KEY'
map = new Map({
target: 'map-container',
layers: [
// 底图
new TileLayer({
source: new WMTS({
url: `http://t{0-6}.tianditu.com/vec_c/wmts?tk=${KEY}`,
layer: 'vec', // 矢量底图
matrixSet: 'c', // c: 经纬度投影 w: 球面墨卡托投影
style: "default",
crossOrigin: 'anonymous', // 解决跨域问题 如无该需求可不添加
format: "tiles", //请求的图层格式，这里指定为瓦片格式
wrapX: true, // 允许地图在 X 方向重复（环绕）
tileGrid: new WMTSTileGrid({
origin: getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15','16','17','18']
})
})
}),
// 标注
new TileLayer({
source: new WMTS({
url: `http://t{0-6}.tianditu.com/cva_c/wmts?tk=${KEY}`,
layer: 'cva', //矢量注记
matrixSet: 'c',
style: "default",
crossOrigin: 'anonymous',
format: "tiles",
wrapX: true,
tileGrid: new WMTSTileGrid({
origin: getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15','16','17','18']
})
})
})
],
view: new View({
center: [113.082753,28.180449],
projection: projection,
zoom: 12,
maxZoom: 17,
minZoom: 1
}),
//加载控件到地图容器中
controls: defaultControls({
zoom: false,
rotate: false,
attribution: false
})
})
}
}
}
</script>
<style scoped>
#map-container {
width: 100%;
height: 100vh;
}
</style>
补充一下：
WMTSTileGrid: 这个类用于创建一个瓦片网格，通常用于 Web 地图应用，方便进行地图切片的处理和显示。
origin: 设置瓦片网格的原点，通常是地图的左上角坐标。在这里，getTopLeft(projectionExtent) 是一个函数调用，返回投影范围的左上角坐标。
resolutions: 这是一个数组，定义了每个缩放级别的分辨率。分辨率通常表示地图上单位长度对应于地理坐标的比例，影响地图的细节显示。
matrixIds: 这是一个数组，定义了不同缩放级别的矩阵 ID。在瓦片服务中，矩阵 ID 用于标识每个级别的瓦片位置和组织方式。此处 ID 从 '0' 到 '18'，表示 19 个不同的缩放级别。
这段代码是在设置一个地图的瓦片网格，以便将地图切片以不同的分辨率和缩放级别展现出来。
五、Gitee源码
Vue2+OpenLayers调用WMTS服务初始化天地图示例
标签：ol,示例,import,地图,WMTS,OpenLayers,瓦片,new From： https://blog.csdn.net/HJW_233/article/details/145080351