上一篇讲了 如何利用geoserver 发布矢量切片，接下来我们说 如何去展示，既然做我们就作全面吧，谁让我们gis 就是这么苦逼呢，哈哈。
环境：
geoserver 2.21
vue 2.0
openlayers 6.14
leaflet 1.8
上一篇地址：geoserver 发布矢量切片流程geoserver 发布 矢量切片（pbf）并用openlayers 6.14 /leaflet 1.8 加载展示 （一）（小白必备：超详细教程）
下一篇地址：leaflet加载展示
geoserver 发布 矢量切片（pbf）并用openlayers 6.14 /leaflet 1.8 加载展示 （三）（小白必备：超详细教程）_Giser_往事随风的博客-CSDN博客
二、openlayers 加载geoserver 发布的矢量切片（pbf） 进行前端展示
这里使用的是vue 2的框架哈，老规矩先引入依赖，自己百度吧，我懒得写了。
然后直接放源码吧，懒得叙述了，没啥好说的，不过我看网上有的是直接拿我上一篇获得的地址
http://localhost:7777/geoserver/gwc/service/tms/1.0.0/testXXX%3Ahefei_xiang@EPSG%3A4326@pbf
进行加载的，如下图：
不过我测试的有点问题，等后面在说吧。这里我取了个巧，直接看geoserver 预览页面里面的源码去做的
找到上篇介绍的预览窗口页面，点击预览，打开控制台，就可以看到geoservre 是如何用openlayers 加载的了。然后拿过来自己改成vue 的加载方式，搞定。下面放源码。
<template><div id="olMap"></div></template><script>import "ol/ol.css";import { Map, View } from "ol";import TileLayer from "ol/layer/Tile";import OSM from "ol/source/OSM";import WMTSTileGrid from 'ol/tilegrid/WMTS'import {Projection} from 'ol/proj'import MVT from 'ol/format/MVT';import VectorTileLayer from 'ol/layer/VectorTile';import VectorTileSource from "ol/source/VectorTile";export default {name: 'OlVectorTiles',data() {return {map: null,baseUrl: 'http://localhost:7777/geoserver/gwc/service/wmts',params: null,gridsetName: null};},mounted() {//可以出来结果this.gridsetName = 'EPSG:4326',this.params = {'REQUEST': 'GetTile','SERVICE': 'WMTS','VERSION': '1.0.0','LAYER': 'testXXX:hefei_xiang','STYLE': '','TILEMATRIX': this.gridsetName + ':{z}','TILEMATRIXSET': this.gridsetName,'FORMAT': 'application/vnd.mapbox-vector-tile','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 tileOSM = new TileLayer({source: new OSM()});//切片策略let tileGrid = new WMTSTileGrid({tileSize: [256,256],extent: [-180.0,-90.0,180.0,90.0], //范围origin: [-180.0, 90.0], //切片原点resolutions: resolutions, //分辨率matrixIds: matrixIds //层级标识列表，与地图级数保持一致});//设置地图投影let projection = new Projection({code: 'EPSG:4326',units: 'degrees',axisOrientation: 'neu'});let vectorSource = new VectorTileSource({url: this.urlConstruct(),format: new MVT({}),projection: projection,tileGrid: tileGrid});let vectorLayer = new VectorTileLayer({source: vectorSource,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]});this.map = new Map({layers: [tileOSM, vectorLayer],view: views,target: 'olMap',});},methods:{urlConstruct(){let url = this.baseUrl + '?';for (let param in this.params){url = url + param + '=' + this.params[param] + '&';}url = url.slice(0, -1);return url;}}};</script><style>#olMap{height:100%;width: 100%;}/*隐藏ol的一些自带元素*/.ol-attribution,.ol-zoom { display: none;}</style>
如果你是geojson数据，先引入格式
import {GeoJSON} from 'ol/format'
然后把下面的地方改下就行
改为下面这个。
'FORMAT': 'application/json;type=geojson',
format: new GeoJSON({}), //切片格式
我发现我这种方式加载的有点意思，更好扩展呢，只要改这两个参数就行了，网上写的可能更有针对性吧。哈哈。
下一篇：leaflet 加载 geoserver 发布的矢量切片（pbf）
geoserver 发布 矢量切片（pbf）并用openlayers 6.14 /leaflet 1.8 加载展示 （二）（小白必备：超详细教程）
