實現步驟：
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>
效果展示：
