示例代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>LeaFlet加载矢量切片</title>
<!-- <link href="
https://cdn.bootcdn.net/ajax/libs/leaflet/1.7.1/leaflet.css" rel="stylesheet" />
<script src="
https://cdn.bootcdn.net/ajax/libs/leaflet/1.7.1/leaflet.js"></script> -->
<!-- <link rel="stylesheet" href="
https://iclient.supermap.io/dist/leaflet/iclient-leaflet.min.css"/> -->
<link rel="stylesheet" href="
https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css" />
<link rel="stylesheet" href="
https://iclient.supermap.io/dist/leaflet/iclient-leaflet.min.css" />
<script type="text/javascript" src="
https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
<script type="text/javascript" src="
https://iclient.supermap.io/dist/leaflet/iclient-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 script type="text/javascript">
var latlng = L.latLng(39.92, 116.46);
var map = L.map('map', {
center: latlng,
zoom: 3,
maxZoom: 22,
crs: L.CRS.EPSG4326
});
L.supermap.tiledMapLayer("
https://iserver.supermap.io/iserver/services/map-world/rest/maps/World").addTo(map);
// 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 url1 = "http://192.168.112.29:9090/geoserver/gwc/service/tms/1.0.0/cite%3Ast_water_intake@EPSG%3A4326@pbf/{z}/{x}/{y}.pbf";
// var url="
https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China";
// //创建一个矢量瓦片图层
// var vectorLayer = L.supermap.tiledVectorLayer(url1, {
// cacheEnabled: true,
// returnAttributes: true,
// attribution: "Tile Data©SuperMap iServer with©SuperMap iClient"
// }).addTo(map);
// //矢量瓦片图层添加点击事件，设置默认风格
// vectorLayer.on('click', function (evt) {
// // 点击矢量瓦片图层获取id & layerName
// var selectId = evt.layer.properties.id;
// var selectLayerName = evt.layer.layerName;
// // 设置矢量瓦片图层样式
// var selectStyle = {
// fillColor: '#800026',
// fillOpacity: 0.5,
// stroke: true, fill: true, color: 'red', opacity: 1, weight: 2
// };
// vectorLayer.setFeaturvectorLayer.setFeatureStyle(selectId, selectLayerName, selectStyle);
// });
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(url1, 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>
