Vue中使用geoserver中得wmts

1、导入插件中得方法

import TileLayer from "ol/layer/Tile"

import { WMTS } from 'ol/source'

import { getWidth, getTopLeft } from 'ol/extent.js';

import {get as getProjection } from 'ol/proj.js';

import WMTSTileGrid from 'ol/tilegrid/WMTS.js';

2、定义切片级别

var matrixIds = ["EPSG:4326:0", "EPSG:4326:1", "EPSG:4326:2", "EPSG:4326:3", "EPSG:4326:4", "EPSG:4326:5", "EPSG:4326:6",

"EPSG:4326:7", "EPSG:4326:8", "EPSG:4326:9", "EPSG:4326:10", "EPSG:4326:11", "EPSG:4326:12", "EPSG:4326:13", "EPSG:4326:14",

"EPSG:4326:15", "EPSG:4326:16", "EPSG:4326:17", "EPSG:4326:18", "EPSG:4326:19", "EPSG:4326:20", "EPSG:4326:21"

];

3、定义切片大小

var resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5, 2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6, 2.682209014892578E-6, 1.341104507446289E-6, 6.705522537231445E-7, 3.3527612686157227E-7];

4、配置参数

let projection = getProjection('EPSG:4326'); // 获取web墨卡托投影坐标系

let projectionExtent = projection.getExtent(); // web墨卡托投影坐标系的四至

let wmtsTileGrid = new WMTSTileGrid({

origin: getTopLeft(projectionExtent), // 原点（左上角）

resolutions: resolutions, // 分辨率数组

matrixIds: matrixIds // 矩阵ID，就是瓦片坐标系z维度各个层级的标识

});

var maplayer = new TileLayer({

source: new WMTS({

url: "http://127.0.0.1:8090/geoserver/gwc/service/wmts",

matrixSet: 'EPSG:4326',

layer: 'qds:dom_full', //图层名称

format: 'image/png',

projection: projection,

tileGrid: wmtsTileGrid,

wrapX: true

})

});

5、openlayers地图加载layer

let view = new View({

projection: "EPSG:4326", //使用这个坐标系

zoom: 15,

center: [115.10365, 30.16098],

duration: 1000,

});

this.map = new Map({

target: "map",

layers: maplayer ,

view: view,

});