leaflet如何加载10万数据
作为一名GIS开发者,你工作中一定遇到过这种问题,根据业务设计,需要在地图上添加1万+条数据,数据或是点、或是线、或是面。但不管哪种,当你添加到5000条时,地图操作就会出现明显的卡顿。当你添加超过1万条时,数据加载就会卡顿,浏览器出现卡死的状态,地图加载后,每挪动一下地图,都要耐心的等待上几秒钟。
这种交互体验,用户是肯定接受不了的,解决方法通常分两种,一种是去做深入的用户需求分析,看用户想一次性加载这么多数据是为了看什么,想看的这个东西,通过其它技术方式能不能实现。另一种就是死磕技术,研究如何提升地图性能。我们今天只讨论第二种情况。
canvas渲染方式
leaflet支持两种渲染方式,svg 和 canvas,默认是svg渲染,这样可以兼容低版本的IE浏览器。canvas渲染需要IE9+,或谷歌、火狐的高版本浏览器。canvas比svg性能好,我自己做了简单的测试,svg模式加载5000个图片标记时出现的卡顿情况,用canvas模式,加载10万条数据时才会出现。
下面讲如何完全切换到canvas模式,共两步:
一,在初始化地图时,设置map的 preferCanvas 属性为 true,代码如下:
var map = L.map('map', {
center: [39.905963, 116.390813],
zoom: 13,
preferCanvas: true
});
这个设置只针对继承了Path类的矢量图层有效,包括圆点(CircleMarker)、线(Polyline)、面(Polygon)、圆(Circle)、矩形(Rectangle)。针对图片标记(Marker)没有作用。
二、借助插件 Leaflet.Canvas-Markers,提升Marker的显示性能。插件git地址:https://github.com/eJuke/Leaflet.Canvas-Markers
Leaflet.Canvas-Markers 插件
Leaflet.Canvas-Markers 插件提供了一个 L.canvasIconLayer
类,这个类是一个图层,将 Marker 添加到这个图层中时,这个图层会以 canvas 方式渲染 Marker 中的图片。
如何使用
在html中引入插件
<script src="leaflet.canvas-markers.js"></script>
创建canvasIconLayer图层,把图层添加到地图,给图层添加图片标记。
// 创建图层,添加到 map
var ciLayer = L.canvasIconLayer({}).addTo(map);
// 定义 Marker
var marker = L.marker([58.5578, 29.0087], {icon: icon});
// 把 Marker 添加到图层
ciLayer.addMarker(marker);
注意
这个插件有个问题,就是地图缩放时,添加的数据不跟着同步缩放,而是等到缩放完成后,再去缩放。这样感觉缩放时,数据在飘着。
不过已经有人对这个问题提出了解决方案,并且解决了(链接),只是代码一直没有被合并。不过这都没有关系,我们可以去用那份儿已经解决的代码(链接)
解决以后的效果:
完整代码
总结
- leaflet支持两种渲染方式,svg 和 canvas,canvas的显示性能要明显优于svg。
- IE9之前版本浏览器不支持canvas方式渲染。
- 默认是svg方式渲染,要手动切换成canvas方式。
- 渲染方式设置成canvas后,加载矢量图形性能会提升,加载图片标记的效率仍然低。
- 通过Leaflet.Canvas-Markers插件来提升图片标记的显示效率。
- Leaflet.Canvas-Markers插件在缩放地图时有bug,需要在github上找已经解决此bug的版本。
本文会经常更新,请阅读原文:http://gisarmory.xyz/blog/index.html?blog=leaflet100ThousandData,以避免被陈旧、错误的知识误导。
关注《GIS兵器库》的公众号, 可以第一时间获得更多GIS文章
本文章采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布,但务必保留文章署名《GIS兵器库》(包含链接: http://gisarmory.xyz/blog/),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。
leaflet如何加载10万数据的更多相关文章
- mxnet自定义dataloader加载自己的数据
实际上关于pytorch加载自己的数据之前有写过一篇博客,但是最近接触了mxnet,发现关于这方面的教程很少 如果要加载自己定义的数据的话,看mxnet关于mnist基本上能够推测12 看pytorc ...
- [原创.数据可视化系列之三]使用Ol3加载大量点数据
不管是百度地图还是高德地图,都很难得见到在地图上加载大量点要素,比如同屏1000的,因为这样客户端性能会很低,尤其是IE系列的浏览器,简直是卡的要死.但有的时候,还真的需要,比如,我要加载全球的AQI ...
- jsTree 的简单用法--异步加载和刷新数据
首先这两个文件是必须要引用的,还有就是引用 jQuery 文件就不说了: <link href="/css/plugins/jsTree/style.min.css" rel ...
- 使用getJSON()方法异步加载JSON格式数据
使用getJSON()方法异步加载JSON格式数据 使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中,它的调用格式为: jQuery. ...
- 异步加载回来的数据不受JS控制了
写成下面这种方式时,异步加载回来的数据不受JS控制 $(."orderdiv").click(function(){ $(this).find(".orderinfo&q ...
- hive 压缩全解读(hive表存储格式以及外部表直接加载压缩格式数据);HADOOP存储数据压缩方案对比(LZO,gz,ORC)
数据做压缩和解压缩会增加CPU的开销,但可以最大程度的减少文件所需的磁盘空间和网络I/O的开销,所以最好对那些I/O密集型的作业使用数据压缩,cpu密集型,使用压缩反而会降低性能. 而hive中间结果 ...
- echarts 图表重新加载,原来的数据依然存在图表上
问题 在做一个全国地图上一些饼图,并且向省一级的地图钻取的时候,原来的饼图依然显示 原因 echars所有添加的图表都在一个series属性集合中,并且同一个echars对象默认是合并之前的数据的,所 ...
- 实用ExtJS教程100例-010:ExtJS Form异步加载和提交数据
ExtJS Form 为我们提供了两个方法:load 和 submit,分别用来加载和提交数据,这两个方法都是异步的. 系列ExtJS教程持续更新中,点击查看>>最新ExtJS教程目录 F ...
- HTTP 筛选器 DLL C:\Windows\Microsoft.Net\Framework\v4.0.30319\aspnet_filter.dll 加载失败。数据是错误。
今天在一台win2003的云主机上,安装.net 4.0时,所有的网站都打不开了.打开事件查看器,发现以下错误: HTTP 筛选器 DLL C:\Windows\Microsoft.Net\Frame ...
随机推荐
- 如何使用JSTL获取并显示数据
首先在×××controller里查询数据,并绑定,代码如下: /** * 显示所有租借信息 默认进入这个方法 * * @param resp * @param req * @param manage ...
- ICARUS主题美化
Icarus用户指南 - 主题美化 Icarus的主题样式编码文件为themes/icarus/layout/layout.jsx. 此文件定义了站点全局的样式设置.本文详细介绍了本主题针对文章分类的 ...
- 【高并发】Redis如何助力高并发秒杀系统,看完这篇我彻底懂了!!
写在前面 之前,我们在<[高并发]高并发秒杀系统架构解密,不是所有的秒杀都是秒杀!>一文中,详细讲解了高并发秒杀系统的架构设计,其中,我们介绍了可以使用Redis存储秒杀商品的库存数量.很 ...
- Promise核心实现
核心 构造函数核心 维护状态变量,只能由pending变为resolve或者reject 维护一个存储结果的变量 维护一个回调数组,执行到then,如果我们传入的立即执行函数没有立即执行resolve ...
- 感知生命周期的数据 -- LiveData
感知生命周期的数据 -- LiveData 零. 前言 上篇文章<万物基于Lifecycle> 介绍了整个Lifecycle体系的基石,今天这篇文章咱们来看看Jetpack给我们带来的活着 ...
- python中反射 getattr(对象,'方法')()和hasattr(对象,'方法')
getattr(对象,'方法')():从一个对象里面找到里面的方法,,, 传了一个对象,再传一个字符串,就能找到这个字符串的方法 hasattr(对象,'方法') 判断这个对象里面有没有这个方法,返回 ...
- NGINX 负载均衡的理解
前言 NGINX是轻量级,也是当前比较流行的web服务器软件.体积小但是功能强大. 这里我按照自己的理解,记录下对NGINX负载均衡的认识.(加权均衡,最小连接) 这里参考了 [https://blo ...
- [补题]求a[i]+a[j]+i-j的最大值,要求i<j
题目 如题. 例: 输入: 5 11 6 5 18 12 输出: 29 题解 思路: 一直是按着(a[i]+a[j])+(i-j)想后序的思路,不应该限制住自己,应该多考虑拆的方法.正确思路是把a[i ...
- 对比 Redis 中 RDB 和 AOF 持久化
概念 Redis 是内存数据库,数据存储在内存中,一旦服务器进程退出,数据就丢失了,所以 Redis 需要想办法将存储在内存中的数据持久化到磁盘. Redis 提供了两种持久化功能: RDB (Red ...
- 【Flutter 实战】文件系统目录
老孟导读:Flutter 中获取文件路径,我们都知道使用 path_provider,但对其目录对含义不是很清楚,此文介绍 Android.iOS 系统的文件目录,不同场景下建议使用的目录. 不同的平 ...