已經謝過了Openlayer的矢量切片，在這里寫一篇關於LeaFlet加載矢量切片的文章，關於矢量切片的概念可以參考我寫OpenLayer加載矢量切片的那篇文章傳送文章
一、效果圖
二、需要用到的插件
leaflet 需要使用插件L.vectorGrid.protobuf 這只是插件的一個類用來加載pbf,L.VectorGrid.Slicer用來加載geojson和topojson，api文檔
三、全部代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>LeaFlet加載矢量切片</title>
<link href="../script/leaflet/leaflet.css" rel="stylesheet" />
<script src="../script/leaflet/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>
</head>
<body>
<div id="map" style="width: 100%; height: 1000px"></div>
<script>
var latlng = L.latLng(39.92, 116.46);
var map = L.map('map', {
center: latlng,
zoom: 3,
maxZoom: 22,
crs: L.CRS.EPSG4326
});
L.tileLayer('http://t1.tianditu.com/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}', {
maxZoom: 20,
tileSize: 256,
zoomOffset: 1
}).addTo(map);
var normalMapa = L.tileLayer('http://t0.tianditu.gov.cn/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}', {
maxZoom: 20,
tileSize: 256,
zoomOffset: 1
}).addTo(map);
var url = "http://localhost:8080/geoserver/gwc/service/tms/1.0.0/cite:university@EPSG:4326@pbf/{z}/{x}/{y}.pbf";
var vectorTileOptions = {
layerURL: url,
rendererFactory: L.canvas.tile,
tms: true,
vectorTileLayerStyles: {
'university': function (properties, zoom) {
var level = properties.school_lev;
if (level=="本科") {
return {
weight: 2,
color: 'red',
opacity: 1,
fillColor: 'yellow',
fill: true,
radius: 6,
fillOpacity: 0.7
}
} else {
return {
weight: 2,
color: 'red',
opacity: 1,
fillColor: 'green',
fill: true,
radius: 6,
fillOpacity: 0.7
}
}
},
},
interactive: true, //開啟VectorGrid觸發mouse/pointer事件
getFeatureId: function (f) {
return f.properties.osm_id;
}
};
var vectorTile = new L.vectorGrid.protobuf(url, vectorTileOptions).addTo(map);
//為每個點注冊一個mouseover事件
vectorTile.on('mouseover', function (e) {
var properties = e.layer.properties;
L.popup()
.setContent(properties.name || properties.type)
.setLatLng(e.latlng)
.openOn(map);
});
//注冊map的縮放事件
map.on("zoom", function () {
map.closePopup();
});
</script>
</body>
</html>
在這渲染方式上是以圖層的方式university圖層，因為就這一個圖層，地圖加載的是天地圖為什么要加載天地圖呢？是因為天地圖支持4326坐標系，如果選擇OSM如果設置4326坐標系加載的地圖不連續，還有關於這個js文件引入，下載的壓縮包里面顯示老是缺東西，不得不引用在線的，另外需要注意的是當你選擇以tms服務時， tms: true,該屬性要設為true，interactive是開啟圖層事件的屬性。