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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<link rel="stylesheet" href="../css/screen.css" />
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
<button onclick="group.removeLayer(path)">Remove path</button>
<button onclick="group.removeLayer(circle)">Remove circle</button>
<button onclick="group.clearLayers()">Remove all layers</button>
<script src="route.js"></script>
<script>
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
for (var i = 0, latlngs = [], len = route.length; i < len; i++) {
latlngs.push(new L.LatLng(route[i][0], route[i][1]));
}
var canvas = L.canvas();
var path = new L.Polyline(latlngs, {renderer: canvas});
var map = new L.Map('map', {layers: [osm], preferCanvas: true});
var group = new L.LayerGroup();
map.fitBounds(new L.LatLngBounds(latlngs));
var circleLocation = new L.LatLng(51.508, -0.11),
circleOptions = {
color: 'red',
fillColor: 'yellow',
fillOpacity: 0.7,
renderer: canvas
};
var circle = new L.Circle(circleLocation, 500000, circleOptions),
circleMarker = new L.CircleMarker(circleLocation, {fillColor: 'blue', fillOpacity: 1, stroke: false});
group.addLayer(circle).addLayer(circleMarker);
circle.bindPopup('I am a circle');
circleMarker.bindPopup('I am a circle marker');
group.addLayer(path);
path.bindPopup('I am a polyline');
var p1 = latlngs[0],
p2 = latlngs[Math.round(len / 4)],
p3 = latlngs[Math.round(len / 3)],
p4 = latlngs[Math.round(len / 2)],
p5 = latlngs[len - 1],
polygonPoints = [p1, p2, p3, p4, p5];
var h1 = new L.LatLng(p1.lat, p1.lng),
h2 = new L.LatLng(p2.lat, p2.lng),
h3 = new L.LatLng(p3.lat, p3.lng),
h4 = new L.LatLng(p4.lat, p4.lng),
h5 = new L.LatLng(p5.lat, p5.lng);
h1.lng += 20;
h2.lat -= 5;
h3.lat -= 5;
h4.lng -= 10;
h5.lng -= 8;
h5.lat += 10;
var holePoints = [h5, h4, h3, h2, h1];
var polygon = new L.Polygon([polygonPoints, holePoints], {
fillColor: "#333",
color: 'green',
renderer: canvas
});
group.addLayer(polygon);
var line = new L.Polyline([h1, h4, h5], {
dashArray: '5, 5'
});
group.addLayer(line);
polygon.bindPopup('I am a polygon');
var circleMarker2 = new L.CircleMarker([25.5, 0], {
dashArray: '5, 5',
fillColor: 'red',
color: 'green',
renderer: canvas
});
group.addLayer(circleMarker2);
map.addLayer(group);
</script>
</body>
</html>
|
