Geoserve发布Mapbox矢量切片格式openlayer加载案例

一.Geoserver安装配置

1.下载安装geoserver，官网地址点击

2.在官网配置与geoserver版本一致的[下载地址这里是2.5.1的版本]，(/projects/geoserver/files/GeoServer/2.15.1/extensions/geoserver-2.15.1-vectortiles-plugin.zip/download)

3.重启GeoServer

二.发布矢量图层

1.发布图层的时候勾选如下

注意：发布的图层必须有坐标系

三.代码调用

<template><div><div id="mapDiv"></div></div></template><script>import Map from "ol/Map";import View from "ol/View";import TileLayer from "ol/layer/Tile";import OSM from "ol/source/OSM";import XYZ from "ol/source/XYZ";import GeoJSON from 'ol/format/GeoJSON';import {Vector as VectorLayer } from 'ol/layer';import {Vector as VectorSource } from 'ol/source';import TileWMS from 'ol/source/TileWMS';import MVT from 'ol/format/MVT';import VectorTileLayer from 'ol/layer/VectorTile';import VectorTileSource from 'ol/source/VectorTile';import WMTS from 'ol/tilegrid/WMTS';import TileGrid from 'ol/tilegrid/TileGrid';import Projection from 'ol/proj/Projection';import {Fill, Icon, Stroke, Style, Text } from 'ol/style';import "ol/ol.css";export default {data() {return {};},mounted() {this.initMap();},methods: {initMap() {var gridsetName = 'EPSG:4326';var gridNames = ['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'];var baseUrl = 'http://localhost:8080/geoserver/gwc/service/wmts';var style = '';var format = 'application/vnd.mapbox-vector-tile';var infoFormat = 'text/html';var layerName = 'zhaoxiyang:mdj';var projection = new Projection({code: 'EPSG:4326',units: 'degrees',axisOrientation: 'neu'});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];const params = {REQUEST: 'GetTile',SERVICE: 'WMTS',VERSION: '1.0.0',LAYER: layerName,STYLE: style,TILEMATRIX: gridsetName + ':{z}',TILEMATRIXSET: gridsetName,FORMAT: format,TILECOL: '{x}',TILEROW: '{y}'};var url = baseUrl + '?'for (var param in params) {url = url + param + '=' + params[param] + '&';}url = url.slice(0, -1);var source = new VectorTileSource({url: url,format: new MVT({}),projection: projection,tileGrid: new WMTS({tileSize: [256, 256],origin: [-180.0, 90.0],resolutions: resolutions,matrixIds: gridNames}),wrapX: true});new Map({target: "mapDiv",layers: [// new TileLayer({// source: new XYZ({// url:'http://webst0{1-4}./appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'// }),// isGroup: true,// name: "天地图文字标注"// }),// new TileLayer({// source: new OSM()// }),// new TileLayer({// // source: new TileWMS({// // url: 'http://localhost:8080/geoserver/zhaoxiyang/wms',// // params: {// //FORMAT: 'image/png',// //VERSION: '1.1.1',// //tiled: true,// //LAYERS: 'zhaoxiyang:mdj',// //exceptions: 'application/vnd.ogc.se_inimage',// //tilesOrigin: 128.222948 + "," + 43.423849// // }// // })// }),new VectorTileLayer({source: new VectorTileSource({url: 'http://localhost:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=zhaoxiyang:mdj02&STYLE=&TILEMATRIX=EPSG:4326:{z}&TILEMATRIXSET=EPSG:4326&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}',format: new MVT({}),// projection: projection,tileGrid: new WMTS({// tileSize: [256, 256],origin: [-180.0, 90.0],resolutions: resolutions,// matrixIds: gridNames}),// wrapX: true,})}),],view: new View({projection: "EPSG:4326", //使用这个坐标系center: [129.607643, 44.562347],zoom: 8})});}}};</script><style scoped>#map {height: 937px;width: 100%;}</style>