1、導(dǎo)入插件中得方法
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、配置參數(shù)
let projection = getProjection('EPSG:4326'); // 獲取web墨卡托投影坐標(biāo)系
? ? let projectionExtent = projection.getExtent(); // web墨卡托投影坐標(biāo)系的四至
? ? let wmtsTileGrid = new WMTSTileGrid({
? ? ? ? origin: getTopLeft(projectionExtent), // 原點（左上角）
? ? ? ? resolutions: resolutions, // 分辨率數(shù)組
? ? ? ? matrixIds: matrixIds // 矩陣ID，就是瓦片坐標(biāo)系z維度各個層級的標(biāo)識
? ? });
? ? 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", //使用這個坐標(biāo)系
? ? ? zoom: 15,
? ? ? center: [115.10365, 30.16098],
? ? ? duration: 1000,
? ? });
? ? this.map = new Map({
? ? ? target: "map",
? ? ? layers: maplayer?,
? ? ? view: view,
? ? });
