geoserver 发布矢量切片（pbf）并用openlayers 6.14 /leaflet 1.8 加载展示（二）（小白必备：超详细教程）

上一篇讲了如何利用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）