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 的加载方式，搞定。下面放源码。

如果你是geojson数据，先引入格式

import {GeoJSON} from 'ol/format'

然后把下面的地方改下就行

 

改为下面这个。

  'FORMAT': 'application/json;type=geojson',

  format: new GeoJSON({}),    //切片格式

我发现我这种方式加载的有点意思，更好扩展呢，只要改这两个参数就行了，网上写的可能更有针对性吧。哈哈。

下一篇：leaflet 加载 geoserver 发布的矢量切片（pbf）