import "ol/ol.css";
import WMTSTileGrid from 'ol/tilegrid/WMTS'
import {Projection} from 'ol/proj'
import VectorTileLayer from 'ol/layer/VectorTile';
import VectorTileSource from "ol/source/VectorTile";
import {GeoJSON} from 'ol/format'
let xysGetVectorTileLayer = () => {
let layer = 'one:base-old'
let baseUrl = 'http://43.143.xxx.xxx:8083/geoserver/gwc/service/wmts'
let urlConstruct = () => {
let url = baseUrl + '?';
for (let param in params) {
url = url + param + '=' + params[param] + '&';
}
url = url.slice(0, -1);
return url;
}
let gridsetName = 'EPSG:4326';
let params = {
'REQUEST': 'GetTile',
'SERVICE': 'WMTS',
'VERSION': '1.0.0',
'LAYER': layer,
'STYLE': '',
'TILEMATRIX': gridsetName + ':{z}',
'TILEMATRIXSET': gridsetName,
'FORMAT': 'application/json;type=geojson',
'TILECOL': '{x}',
'TILEROW': '{y}'
};
//切片名
let 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'];
//分辨率
let 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];
//设置地图投影
let projection = new Projection({
code: 'EPSG:4326',
units: 'degrees',
axisOrientation: 'neu'
});
return new VectorTileLayer({
source: new VectorTileSource({
url: urlConstruct(),
format: new GeoJSON({}), //切片格式
projection: projection,
tileGrid: new WMTSTileGrid({
tileSize: [256, 256],
extent: [-180.0, -90.0, 180.0, 90.0], //范围
origin: [-180.0, 90.0], //切片原点
resolutions: resolutions, //分辨率
matrixIds: matrixIds //层级标识列表,与地图级数保持一致
})
}),
wrapX: false,
});
// let views = new View({
// center: [117.28, 31.86],
// projection: projection,
// zoom: 6,
// resolutions: resolutions,
// extent: [-180.0, -90.0, 180.0, 90.0]
// });
}
export default xysGetVectorTileLayer
11.newLayer系列-VectorTileLayer
于 2023-07-27 14:32:30 首次发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)