leaflet加载geojson数据

您所在的位置:网站首页 leaflet地图渲染太卡 leaflet加载geojson数据

leaflet加载geojson数据

2023-11-14 14:13| 来源: 网络整理| 查看: 265

作为一名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, preferCanva


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3