1 效果简介

主要整理完整可运行的代码；

👉1 安装geoserver并启动

👉2 安装geoserver矢量瓦片插件流程

👉3 将shp数据发布为矢量瓦片(pbf格式)完整流程

👉4 openlayers加载矢量瓦片完整代码

👉5 最终测试效果,动图效果经过压缩 有一定失真。

(1) 使用矢量瓦片加载一份全球边界shp数据，数据有近100M大小，效果如下：

(2) 使用矢量瓦片加载一份全国县道shp数据，数据有近400M大小，效果如下：

2 矢量瓦片渲染特点

👉1 跟栅格瓦片对比

相同点：都是用切片的方式加载，比如使用256*256瓦片方式渲染当前范围内瓦片，拖动时再渲染新范围瓦片

不同点：矢量瓦片可以在前端代码中自定义要素样式

👉2 跟直接GeoJSON渲染对比

较小数据无明显差别；上百M大数据；初始化和操作体验完胜，可以直接放弃请求geojson数据渲染方式，数据量大 会卡死，无法操作

3 GeoServer安装

安装过程较为简单，不做赘述；下载网址：https://geoserver.org/download/

👉操作流程：访问官网→选择DownLoad选项卡→选择Archive选项卡→选择版本→根据电脑系统版本选择安装包；本文以2.13.0 windows系统安装包安装；

图文安装可参考GeoServer入门(一)安装

4 安装矢量瓦片插件

👉 1 在选择下载版本界面，滚动到Extensions项，找到矢量瓦片；并下载解压

👉2 拷贝到libs目录 D:\GeoServer 2.13.0\webapps\geoserver\WEB-INF\lib

注意：是WEB_INF下的lib，不是GeoServer 2.13.0目录下的lib

5 发布矢量瓦片服务

👉1 添加数据存储

(1) 提前将全国县道shp数据放在Geoserver安装目录；GeoServer 2.13.0\data_dir\data

(2) 添加shapefile格式数据源

选择工作区→输入数据源名称→选择Shapefile文件

选择县道shp，点击保存即可

（3）保存之后会出现下图；点击发布后可以在图层中看到；

如果没有点击发布，也可以在图层中，选择添加新的资源，选择刚才添加的数据存储

👉2 发布图层为矢量瓦片服务

（1）第一步 点击图层 进入图层编辑页；可以看到有四个选项卡，

（2）【数据】选项卡