-
Notifications
You must be signed in to change notification settings - Fork 5
/
leaflet.html
79 lines (69 loc) · 2.94 KB
/
leaflet.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo-leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin="" />
<style rel="stylesheet">
body,
html,
#map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>
<script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.js"></script>
<script>
var map = L.map('map').setView([22.65964, 114.09885], 12);
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
attribution: '© <a href="https://carto.com/attributions">CARTO</a> contributors'
}).addTo(map);
//参数设置
var baseUrl = 'http://localhost:8088';
var workspace = 'traffic';
var layerName = 'test_road';
var epsg = '900913';
var format = 'application/x-protobuf;type=mapbox-vector'; // application/vnd.mapbox-vector-tile
var vectorLayerUrl = baseUrl + "/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS" +
"&VERSION=1.0.0&LAYER=" + workspace + ":" + layerName + "&STYLE=&TILEMATRIX=EPSG:900913:{z}" +
"&TILEMATRIXSET=EPSG:900913&FORMAT=" + format +
"&TILECOL={x}&TILEROW={y}";
// 使用 TMS 的方式
// vectorLayerUrl = baseUrl + '/geoserver/gwc/service/tms/1.0.0/' + workspace + ":" + layerName + "@EPSG%3A" + epsg + "@pbf/{z}/{x}/{y}.pbf";
L.vectorGrid.protobuf(vectorLayerUrl, getVectorOptions('speed')).addTo(map);
function getVectorOptions(fieldName) {
return {
layerURL: vectorLayerUrl,
rendererFactory: L.canvas.tile,
vectorTileLayerStyles: getVectorStyles(layerName, fieldName),
// tms: true, // 如果是 TMS 方式,则必须开启
};
}
function getVectorStyles(layerName, fieldName) {
var style = {};
style[layerName] = function (properties, zoom) {
var p = properties[fieldName];
return {
color: p < 0.001 ? 'transparent' : p < 5 ? '#800026' : p < 15 ? '#E31A1C' : p < 30 ? '#FEB24C' :
'#00ff00',
fillOpacity: 0.5,
//fillOpacity: 1,
stroke: true,
fill: true,
//opacity: 0.2,
weight: 3,
}
};
return style;
}
</script>
</body>
</html>