前序
擴展 Girdlayer 是受 openlayer 提供的 ol.source.TileDebug 啓發，因爲 leaflet 是沒有這樣的 api，所以就想着做一個類似的插件
最終實現效果
L.Girdlayer
-
L.GridLayer 是一個一般類，其用於 HTML 元素的格網切片。它是所有切片層(Tile Layer)的基類，且替換了之前版本的 TileLayer.Canvas. GridLayer 可以被用於擴展 canvas, img 或者 div 類型的 html 元素，支持切片的創建以及動畫響應。
-
想要自定義切片層，則需繼承 GridLayer 並且重寫 createTile()函數來繪製切片,其中可以是同步或異步返回切片，同步方式：該函數傳遞參數 coords（其中 x，y 爲切片的序號 , z 爲縮放層級）,異步則會多返回一個 done 回調函數
1// 以下代碼 來自 https://leafletjs.com/reference-1.6.0.html#gridlayer 2// 同步 3var CanvasLayer = L.GridLayer.extend({ 4 createTile: function (coords) { 5 // create a <canvas> element for drawing 6 var tile = L.DomUtil.create('canvas', 'leaflet-tile'); 7 // setup tile width and height according to the options 8 var size = this.getTileSize(); 9 tile.width = size.x; 10 tile.height = size.y; 11 // get a canvas context and draw something on it using coords.x, coords.y and coords.z 12 var ctx = tile.getContext('2d'); 13 // return the tile so it can be rendered on screen 14 return tile; 15 }, 16}); 17 18// 異步 19var CanvasLayer = L.GridLayer.extend({ 20 createTile: function (coords, done) { 21 var error; 22 // create a <canvas> element for drawing 23 var tile = L.DomUtil.create('canvas', 'leaflet-tile'); 24 // setup tile width and height according to the options 25 var size = this.getTileSize(); 26 tile.width = size.x; 27 tile.height = size.y; 28 // draw something asynchronously and pass the tile to the done() callback 29 setTimeout(function () { 30 done(error, tile); 31 }, 1000); 32 return tile; 33 }, 34});
擴展重寫 createTile
1createTile: function(coords) {
2 var tile = L.DomUtil.create('canvas', 'leaflet-tile');
3 var ctx = tile.getContext('2d');
4 var size = this.getTileSize();
5 tile.width = size.x;
6 tile.height = size.y;
7 // 將切片號乘以切片分辨率，默認爲256pixel,得到切片左上角的絕對像素座標
8 var nwPoint = coords.scaleBy(size);
9 // 根據絕對像素座標，以及縮放層級，反投影得到其經緯度
10 var nw = this._map.unproject(nwPoint, coords.z);
11 //從該切片左上角開始畫，畫一個切片大小的無填充矩形
12 ctx.strokeRect(nwPoint.x, nwPoint.y, size.x, size.y);
13 ctx.font = `${this.options.fontSize}px Arial`;
14 ctx.fillStyle = this.options.fillStyle;
15 //x,y,z顯示
16 ctx.fillText('x: ' + coords.x + ', y: ' + coords.y + ', zoom: ' + coords.z, 20, 20);
17 //經緯度座標
18 ctx.fillText('lat: ' + nw.lat, 20, 40);
19 ctx.fillText('lon: ' + nw.lng, 20, 60);
20 //線的顏色
21 ctx.strokeStyle = this.options.strokeStyle;
22 //這是canvans的方法
23 ctx.beginPath();
24 ctx.moveTo(0, 0);
25 ctx.lineTo(size.x - 1, 0);
26 ctx.lineTo(size.x - 1, size.y - 1);
27 ctx.lineTo(0, size.y - 1);
28 ctx.closePath();
29 ctx.stroke();
30 return tile;
31 },
使用擴展
1var debugLayer = L.gridLayer.debug({
2 fillStyle: '#FFF',
3 strokeStyle: '#FFF',
4});
5debugLayer.addTo(map);
【Leaflet開發】
【Leaflet開發】L.Control 自定義一個Control
Leaflet入門系列
Leaflet入門系列 圖標(marker) 樣式和事件處理
LeafLet入門系列 藉助 turfjs 繪製點線面緩衝區
