一、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/[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: [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 © <a href="http://www.osm.org">OpenStreetMap</a>'
}).addTo(map)
tiles.addTo(map)
</script>
</body>
</html>
转载自here
标签：ctx,leaflet,var,coords,tile,土层,GridLayer,size From： https://www.cnblogs.com/echohye/p/17759955.html