实现步骤：
1：安装postgresql
2：安装postgis
3：postgresql创建数据库及空间数据导入
3：geoserver发布矢量瓦片
4：leaflet以天地图瓦片为底图添加矢量瓦片
-
安装postgresql
- 网盘地址：https://pan.baidu.com/s/1IIfUNi90upRRp5bPPbB6cQ 提取码：7xa8
- 安装步骤：参照博客 https://blog.csdn.net/antma/article/details/83579920
-
安装postgis
-
网盘地址：https://pan.baidu.com/s/1ENjBVw-PItIh7kebg2-oRg 提取码：5q6t
-
安装步骤：一直下一步即可
-
pgadmin4汉化、创建数据库及空间数据导入
1.打开pgAdmin4
2. 点击file-preferences
3. miscellaneous-user language-chinese
4. 重新打开pgadmin4便可看到汉化后的界面，然后创建数据库test
5：postgis插件添加
6：添加postgis插件后便能在扩展中看到postgis
7：利用postgis插件中的功能来进行数据导入
8：设置options选项
9：添加shp文件（注意：shp文件路径必须为英文名）
10：修改投影（此处采用4326），然后点击import
11 ： 导入成功之后log Window会有以下提示
12：进入pgadmin4界面会发现导入的数据，如下图所示：
-
geoserver添加postgis数据源发布矢量瓦片
1. 新建test工作区
2. 添加新的数据存储
3. 选择postgis数据源
4. 参数如下
5：发布图层
6. 查看发布图层地址
-
leaflet添加矢量瓦片
<!DOCTYPE html>
<html lang="en"><head><title></title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.6.0/leaflet.css" rel="stylesheet"><script src="https://cdn.bootcdn.net/ajax/libs/leaflet/1.6.0/leaflet.js"></script><script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script><script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.js"></script><style>#map {margin: 0;padding: 0;position: absolute;width: 100%;height: 100%;}</style>
</head><body><div id="map"></div><script>const center = [39.9, 116.39],zoom = 10,url = "https://t0.tianditu.gov.cn/";const map = L.map("map", {crs: L.CRS.EPSG4326}).setView(center,zoom);L.tileLayer(url +"vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=0b018552994f71a9467d24461a8f8238", {maxZoom: 20,tileSize: 256,zoomOffset: 1,}).addTo(map);L.tileLayer(url +"cva_c/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=0b018552994f71a9467d24461a8f8238", {maxZoom: 20,tileSize: 256,zoomOffset: 1,}).addTo(map);const pbfUrl = "http://localhost:8080/geoserver/gwc/service/tms/1.0.0/test%3Avegpl@EPSG%3A4326@pbf/{z}/{x}/{y}.pbf";var vectorTileOptions = {layerURL: pbfUrl,rendererFactory: L.canvas.tile, tms: true, vectorTileLayerStyles: {'vegpl': function (properties, zoom) { return {fillColor: 'green',}},},interactive: true, //开启VectorGrid触发mouse/pointer事件getFeatureId: function (f) {return f.properties.osm_id;}}; var vectorTile = new L.vectorGrid.protobuf(pbfUrl, vectorTileOptions).addTo(map);</script>
</body></html>效果展示：
