leaflet | GridLayer扩展图层

一、createtile方法

1、同步使用

要创建自定义层，请扩展GridLayer并实现createTile()方法，该方法将通过一个带有x、y和z(缩放级别)坐标的点对象来绘制瓦片。

代码示例：

var CanvasLayer = L.GridLayer.extend({
    createTile: function(coords){
        // create a <canvas> element for drawing
        var tile = L.DomUtil.create('canvas', 'leaflet-tile');
        // setup tile width and height according to the options
        var 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.z
        var ctx = tile.getContext('2d');
        // return the tile so it can be rendered on screen
        return tile;
    }
});

2、异步使用

Tile创建也可以是异步的，这在使用第三方绘图库时很有用。绘制完成后，可以将其传递给done()回调。

代码示例：

var CanvasLayer = L.GridLayer.extend({
    createTile: function(coords, done){
        var error;
        // create a <canvas> element for drawing
        var tile = L.DomUtil.create('canvas', 'leaflet-tile');
        // setup tile width and height according to the options
        var size = this.getTileSize();
        tile.width = size.x;
        tile.height = size.y;
        // draw something asynchronously and pass the tile to the done() callback
        setTimeout(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.x
            tile.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 &copy; <a href="http://www.osm.org">OpenStreetMap</a>'
        }).addTo(map)
 
        tiles.addTo(map)
    </script>
</body>
</html>