VladPolskiy/leaflet
1
0
Fork 0
mirror of https://github.com/Leaflet/Leaflet.git synced 2025-07-21 23:26:12 +00:00
Code Issues Packages Projects Releases 1 Wiki Activity

Canvas improvements (#5115)

Browse Source 
* WIP refactor canvas clear

* Fix clearing bounds, remov unnecessary code

* Refactor redraw logic

* Remove flicker on update

* Fix code style

* Add support for layer ordering with bringToFront/bringToBack

* Fix redraw when layer moves

* Add example for moving canvas layers

* Fix code style

* Use layer ordering for mouse events

* Fix removing first or last layer
This commit is contained in:
Per Liedman
2016-11-18 15:22:35 +01:00
committed by Iván Sánchez Ortega
parent d28e3eeccb
commit 4c484462dc
2 changed files with 188 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
debug/vector/moving-canvas.html Normal file
View File

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/screen.css" />
<script type="text/javascript" src="../../build/deps.js"></script>
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var osmUrl = 'http://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibGllZG1hbiIsImEiOiI3ZGFmOGI2ZWY0MTAyYzUyMjAxNjcxYjQzZjRkYzM3MSJ9.XoFXhnx2eXp0DJwL3aEzZg',
osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
var map = L.map('map', {preferCanvas: true})
.setView([50.5, 30.51], 15)
.addLayer(osm);
var markers = [];
var colors = ['red', 'green', 'blue', 'purple', 'cyan', 'yellow'];
for (var i = 0; i < 20; i++) {
markers.push(L.circleMarker([50.5, 30.51], {color: colors[i % colors.length]}).addTo(map));
}
function update() {
var t = new Date().getTime() / 1000;
markers.forEach(function(marker, i) {
var v = t * (1 + i / 10) + (12.5 * i) / 180 * Math.PI;
marker.setLatLng([
50.5 + (i % 2 ? 1 : -1) * Math.sin(v) * 0.005,
30.51 + (i % 3 ? 1 : -1) * Math.cos(v) * 0.005,
]);
});
L.Util.requestAnimFrame(update);
}
update();
</script>
</body>
</html>