vue項目通過openlayers加載wmts服務示例：

<template><div id="map" ref="mapContainer"></div>
</template><script>
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import WMTS from 'ol/source/WMTS';
import WMTSCapabilities from 'ol/format/WMTSCapabilities';
import {get as getProjection} from 'ol/proj';
import {getTopLeft, getWidth} from 'ol/extent';
import OSM from 'ol/source/OSM';export default {name: 'WmtsMap',data() {return {map: null,wmtsCapabilitiesUrl: 'https://your-wmts-service-url?request=GetCapabilities&service=WMTS'};},mounted() {this.initMap();},methods: {async initMap() {// 創建基礎地圖const baseLayer = new TileLayer({source: new OSM()});// 初始化地圖視圖const view = new View({center: [0, 0],zoom: 2});// 創建地圖實例this.map = new Map({target: this.$refs.mapContainer,layers: [baseLayer],view: view});// 加載WMTS服務await this.loadWmtsLayer();},// 重點??async loadWmtsLayer() {try {//? 獲取WMTS能力文檔const parser = new WMTSCapabilities();const response = await fetch(this.wmtsCapabilitiesUrl);const text = await response.text();const result = parser.read(text);//? 解析WMTS能力文檔const options = this.getWmtsOptions(result);//? 創建WMTS圖層const wmtsLayer = new TileLayer({opacity: 0.7,source: new WMTS(options)});//? 添加到地圖this.map.addLayer(wmtsLayer);} catch (error) {console.error('加載WMTS服務失敗:', error);}},getWmtsOptions(result) {// 這里我們選擇第一個可用的圖層和矩陣集// 實際應用中可能需要根據需求選擇特定的圖層和矩陣集const layer = result.Contents.Layer[0];const tileMatrixSet = result.Contents.TileMatrixSet[0];const matrixSet = result.Contents.TileMatrixSet.filter((tms) => tms.Identifier === tileMatrixSet.Identifier)[0];const projection = getProjection(matrixSet.SupportedCRS);const resolutions = [];const matrixIds = [];const {TileMatrix} = result.Contents;for (let i = 0; i < TileMatrix.length; i++) {const tileMatrix = TileMatrix[i];if (tileMatrix.TileMatrixSet === tileMatrixSet.Identifier) {matrixIds.push(tileMatrix.Identifier);resolutions.push(tileMatrix.ScaleDenominator * 0.00028 / projection.getMetersPerUnit());}}// 獲取第一個資源URLconst resourceUrl = layer.ResourceURL.find((resource) => resource.resourceType === 'tile').template;return {url: resourceUrl,layer: layer.Identifier,matrixSet: matrixSet.Identifier,format: layer.Format[0],projection: projection,tileGrid: {origin: getTopLeft(projection.getExtent()),resolutions: resolutions,matrixIds: matrixIds},style: 'default',};}}
};
</script><style scoped>
#map {width: 100%;height: 100%;
}
</style>