LeaFlet学习之GridLayer扩展
生活随笔
收集整理的這篇文章主要介紹了
LeaFlet学习之GridLayer扩展
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
官網給的解釋：處理HTML元素的網格的泛型類。這是所有tile層的基類，并替換TileLayer.Canvas。GridLayer可以擴展為創建一個HTML元素的網格，比如。GridLayer將為您處理創建和動畫這些DOM元素。
放張圖
一、createtile方法
1、同步使用
要創建自定義層，請擴展GridLayer并實現createTile()方法，該方法將通過一個帶有x、y和z(縮放級別)坐標的點對象來繪制瓦片。
代碼示例：
var CanvasLayer = L.GridLayer.extend({createTile: function(coords){// create a <canvas> element for drawingvar tile = L.DomUtil.create('canvas', 'leaflet-tile');// setup tile width and height according to the optionsvar size = this.getTileSize();tile.width = size.x;tile.height = size.y;// get a canvas context and draw something on it using coords.x, coords.y and coords.zvar ctx = tile.getContext('2d');// return the tile so it can be rendered on screenreturn tile;} });2、異步使用
Tile創建也可以是異步的，這在使用第三方繪圖庫時很有用。繪制完成后，可以將其傳遞給done()回調。
代碼示例：
var CanvasLayer = L.GridLayer.extend({createTile: function(coords, done){var error;// create a <canvas> element for drawingvar tile = L.DomUtil.create('canvas', 'leaflet-tile');// setup tile width and height according to the optionsvar size = this.getTileSize();tile.width = size.x;tile.height = size.y;// draw something asynchronously and pass the tile to the done() callbacksetTimeout(function() {done(error, tile);}, 1000);return tile;} });二、Demo
主要實現經緯度的展示
<!DOCTYPE html> <html> <head><title>GridLayer</title><meta charset="utf-8" /><link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/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/leaflet@1.0.1/dist/leaflet.js"></script><script>var map = new L.Map('map', { center: [39.92,116.46], zoom: 10 ,CRS:L.CRS.EPSG4326});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.xtile.height = size.y// 將切片號乘以切片分辨率，默認為256pixel,得到切片左上角的絕對像素坐標var nwPoint = coords.scaleBy(size)// 根據絕對像素坐標，以及縮放層級，反投影得到其經緯度var nw = map.unproject(nwPoint, coords.z)//從該切片左上角開始畫，畫一個切片大小的無填充矩形ctx.strokeRect(nwPoint.x, nwPoint.y,size.x,size.y)ctx.fillStyle = 'black';//x,y,z顯示ctx.fillText('x: ' + coords.x + ', y: ' + coords.y + ', zoom: ' + coords.z, 50, 60);//經緯度坐標ctx.fillText('lat: ' + nw.lat + ', lon: ' + nw.lng, 50, 80);//線的顏色ctx.strokeStyle = 'black';//這是canvans的方法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>三、總結
主要是運用createTile方法的同步方式，加載網格，通過canvas進行繪畫，代碼很簡單。
轉載于:https://www.cnblogs.com/tuboshu/p/10752337.html
總結
以上是生活随笔為你收集整理的LeaFlet学习之GridLayer扩展的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Day 6：Vector类和实现Hash
- 下一篇： hdu刷题2