50d7121f72
In the case of canvas path, we can't add the canvas element itself as an interactiveTarget, given that it's big like the path bbox, and thus would make all this bbox target of events (so also clicking outside of the path itself, the layer would fire click event, for example)
97 lines
2.6 KiB
HTML
97 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Leaflet debug page</title>
|
|
|
|
<link rel="stylesheet" href="../../dist/leaflet.css" />
|
|
|
|
<link rel="stylesheet" href="../css/screen.css" />
|
|
|
|
<script>
|
|
L_PREFER_CANVAS = true; // experimental
|
|
</script>
|
|
<script type="text/javascript" src="../../build/deps.js"></script>
|
|
<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 = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
|
osmAttrib = '© <a href="http://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]});
|
|
|
|
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[parseInt(len/4)],
|
|
p3 = latlngs[parseInt(len/3)],
|
|
p4 = latlngs[parseInt(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);
|
|
|
|
polygon.bindPopup('I am a polygon');
|
|
|
|
map.addLayer(group);
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|