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 &copy; <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扩展相关推荐

学习 PHP SOAP 扩展的一些笔记
对 SOAP 的相关学习就先告此一段落,这是最后一篇文章用来记录下学习过程中的一些笔记和心得. 前面三篇文章分别是: <SOAP 介绍> <SOAP Web 服务介绍> < ...
学习Kotlin(六)扩展与委托
推荐阅读: 学习Kotlin(一)为什么使用Kotlin 学习Kotlin(二)基本语法学习Kotlin(三)类和接口学习Kotlin(四)对象与泛型学习Kotlin(五)函数与Lambda表达 ...
Leaflet学习教程+笔记(Mars2D)
Leaflet学习(Mars2D) 一快速开始中文教程–小白必备中文API文档–学会查阅文档准备工作-引入文件 <link rel="stylesheet" href ...
【博客507】学习阿里巴巴如何扩展Kubernetes 调度器支持 AI 和大数据作业
学习阿里巴巴如何扩展Kubernetes 调度器支持 AI 和大数据作业
控制算法学习四、扩展卡尔曼滤波EKF
控制算法学习四.扩展卡尔曼滤波EKF 前言非线性系统状态/观测方程线性化扩展卡尔曼滤波EKF 后记前言经典卡尔曼滤波的使用场景是线性系统,但现实应用时,大多数系统都是非线性的.扩展卡尔曼滤 ...
对路径的访问被拒绝怎么办_学习了解ACL—扩展访问控制列表，就在网工知识角...
学网络,就在IE-LAB 国内高端网络工程师培养基地基于ACL过滤telnet和特定的网段信息什么是访问控制列表(ACL)? 应用于路由器接口的指令列表,用于指定哪些数据包可以接收转发,哪些数据包 ...
spring security3.x学习(15)_扩展JdbcDaoImpl。
2019独角兽企业重金招聘Python工程师标准>>> 本文为转载学习原文链接:http://blog.csdn.net/dsundsun/article/details/1184 ...
【我的第一个目标检测课题】3、Retinanet网络的学习与实现+扩展
2021.1.7下午记大家新年好~ 距离上次写这个课题的博客已经是去年12.30的时候了,是想趁热打铁赶快写的,无奈1.5/1.6有两门考试,便只好赶去复习暂时搁置了.现在终于考完试,而且也马上到了 ...
【编译器学习】EBNF扩展巴科斯范式学习总结
EBNF扩展巴科斯范式学习总结是一种描述计算机编程语言且与上下文无关(没有前置条件)的语法的一种语法表达式.简而言之,就是描述语言语法的规范. EBNF的基本语法形式如下: 左手边(LeftHand ...

LeaFlet学习之GridLayer扩展

LeaFlet学习之GridLayer扩展相关推荐

最新文章

热门文章