L.GridLayer 是一個一般類，其用於HTML元素的格網切片。它是所有切片層(Tile Layer)的基類，且替換了之前版本的TileLayer.Canvas. GridLayer可以被用於擴展canvas, img 或者 div類型的html元素，支持切片的創建以及動畫響應。
用法示例：
1） 同步
想要自定義切片層，則需繼承GridLayer並且重寫createTile()函數來繪製切片,該函數傳遞參數coords（其中 x，y爲切片的序號 , z爲縮放層級）
var CanvasLayer = L.GridLayer.extend({
createTile: function(coords){
// 創建畫布
var tile = L.DomUtil.create('canvas', 'leaflet-tile');
// 獲取Tile尺寸
var size = this.getTileSize();
tile.width = size.x;
tile.height = size.y;
// 得到畫布上下文，通過coords的x,y,z進行繪製
var ctx = tile.getContext('2d');
// return the tile so it can be rendered on screen
return tile;
}
});
2） 異步
切片的繪製也可以是異步的，當需要用到第三方庫繪製的時候就顯得格外有用了。一旦切片繪製完就可以將參數傳遞給done回調函數
var CanvasLayer = L.GridLayer.extend({
createTile: function(coords, done){
var error;
// 創建畫布
var tile = L.DomUtil.create('canvas', 'leaflet-tile');
// 獲取Tile尺寸
var size = this.getTileSize();
tile.width = size.x;
tile.height = size.y;
// 異步繪製
setTimeout(function() {
done(error, tile);
}, 1000);
return tile;
}
});
示例： 繪製切片格網，顯示每個切片的切片號，縮放層級。以及計算並顯示每個切片左上角的經緯度。效果如下圖：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>GridLayer Test</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script>
var map = new L.Map('map', { center: [10, 0], zoom: 2});
var tiles = new L.GridLayer();
tiles.createTile = function(coords) {
var tile = L.DomUtil.create('canvas', 'leaflet-tile');
var ctx = tile.getContext('2d');
var size = this.getTileSize()
tile.width = size.x
tile.height = size.y
// 將切片號乘以切片分辨率，默認爲256pixel,得到切片左上角的絕對像素座標
var nwPoint = coords.scaleBy(size)
// 根據絕對像素座標，以及縮放層級，反投影得到其經緯度
var nw = map.unproject(nwPoint, coords.z)
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, size.x, 50);
ctx.fillStyle = 'black';
ctx.fillText('x: ' + coords.x + ', y: ' + coords.y + ', zoom: ' + coords.z, 20, 20);
ctx.fillText('lat: ' + nw.lat + ', lon: ' + nw.lng, 20, 40);
ctx.strokeStyle = 'red';
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(size.x-1, 0);
ctx.lineTo(size.x-1, size.y-1);
ctx.lineTo(0, size.y-1);
ctx.closePath();
ctx.stroke();
return tile;
}
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="http://www.osm.org">OpenStreetMap</a>'
}).addTo(map)
tiles.addTo(map)
</script>
</body>
</html>