2013-11-26 00:41:27 +08:00
|
|
|
<!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 grid = L.gridLayer({
|
|
|
|
|
attribution: 'Grid Layer'
|
|
|
|
|
});
|
|
|
|
|
|
2013-11-26 01:13:30 +08:00
|
|
|
grid.createTile = function (coords, done) {
|
2013-11-26 00:41:27 +08:00
|
|
|
var tile = document.createElement('div');
|
2013-11-27 00:55:10 +08:00
|
|
|
tile.innerHTML = [coords.x, coords.y, coords.z].join(', ');
|
2013-11-26 00:41:27 +08:00
|
|
|
tile.style.outline = '1px solid red';
|
2013-11-26 01:13:30 +08:00
|
|
|
tile.style.background = 'white';
|
|
|
|
|
|
|
|
|
|
// test async
|
|
|
|
|
setTimeout(function () {
|
2013-11-26 23:16:18 +08:00
|
|
|
done(null, tile);
|
2014-03-22 13:29:10 +08:00
|
|
|
}, 500 + Math.random() * 500);
|
2013-11-26 01:13:30 +08:00
|
|
|
|
2013-11-26 00:41:27 +08:00
|
|
|
return tile;
|
|
|
|
|
};
|
|
|
|
|
|
2014-10-23 18:23:37 +08:00
|
|
|
grid.on('loading', function() { console.log('loading'); });
|
|
|
|
|
grid.on('load', function() { console.log('load'); });
|
2015-12-17 16:34:35 +08:00
|
|
|
grid.on('tileunload', function(tile) { console.log('tileunload ' + tile.coords.x + ',' + tile.coords.y + ',' + tile.coords.z); });
|
2014-10-23 18:23:37 +08:00
|
|
|
|
2013-11-26 00:41:27 +08:00
|
|
|
var map = L.map('map')
|
|
|
|
|
.setView([50.5, 30.51], 10)
|
|
|
|
|
.addLayer(grid);
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
