1

I have already know how to draw map on leaflet tilelayer, but I'm trying to have a better efficiency, so now I practicing canvas with leaflet gridlayer,but the outcome wasn't I expected.I have no idea how to do it, hope someone can help me! Thanks!

Here's my code below:

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
            console.log(size.x);
            // 将切片号乘以切片分辨率,默认为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);
            //经纬度坐标
            if(nw.lng<121 && nw.lng>119){

                ctx.fillText('lat: ' + nw.lat + ', lon: ' + nw.lng, 50, 80);
            }
            console.log(nw);
            //线的颜色
            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();
            // // 
            for (i in da.paths) {//svg casnvas
                //console.log(da.paths[i].path);
                context = da.paths[i].path;
                p = new Path2D(context);
                // console.log(p);
                ctx.stroke(p);
                ctx.fill(p);
                ctx.fillStyle = 'lightpink';
            }

            return tile;
        }
        tiles.addTo(map)

Like this:

enter image description here

I really hope my map can fit the base map, like this:

enter image description here

It is only a concept map, thank you!

Siong Thye Goh
  • 3,518
  • 10
  • 23
  • 31
Alice Hung
  • 11
  • 1

0 Answers0