关于gis:H5时代leaflet中还在用DivIcon

前段时间写了篇《leaflet 如何加载 10 万数据》的文章，有同学反馈其中的 Canvas-Markers 插件不反对 DivIcon。咱们明天就来聊一聊，为什么这个插件不反对 DivIcon，以及如何用 H5 的 Canvas 个性，做出以前用 DivIcon 能力实现的 标签 和 文字标注 性能。

老规矩，先上效果图：

标签性能

文字标注性能

为什么不反对 DivIcon

Canvas-Markers 插件的创作目标是为了解决，大批量数据展现的性能问题，它通过应用 H5 中 Canvas 的绘图形式绘制 Marker，晋升了展现性能。但该插件目前只反对 Icon，不反对 DivIcon。

之所以不反对，是因为 DivIcon 的实现原理是在 HTML 页面中增加 DOM 元素，并在地图平移、缩放时一直的批改 DOM 元素的属性，而大量增加和批改 DOM 元素会拉低浏览器的显示性能，呈现卡顿等景象。

如果应用 Canvas-Markers 后还在持续应用 DivIcon，就相当于网络降级了千兆带宽当前，还在用之前的百兆路由器。这时的 DivIcon 就会和那个百兆路由器一样，成为整个通道中最为狭隘的中央，变成瓶颈。

如果不必 DivIcon 这个老路由器，有没有新路由器呢？

有！但要分状况。

平时工作中，用 DivIcon 通常是为了实现 标签性能 和 文字标注 性能

标签性能：

文字标注性能：

针对这两种状况，leaflet 都有 Canvas 形式的解决方案。

标签性能

上文提到，Canvas-Markers 插件目前只反对 Icon 类型的图标，翻看它的代码会发现，其实，它用 Icon 也只是把 Icon 当成一个 Object 来用，只用来传参，并没有去用 Icon 外部的性能。因为 Icon 的外部，也是创立了一个 img 类型的 DOM 元素，它和 DivIcon 一样，大量增加会影响浏览器的显示性能。

Canvas-Markers 插件通过 Icon 获取图片的地址和图片的偏移地位等参数，而后用 Canvas 的形式绘制图片。

标签由两局部组成，背景框和文字，背景框通常是一个图片。Canvas-Markers 插件曾经能够加载图片，咱们只有让它再反对文字，并能管制文字的款式和地位，就能够实现标签性能了。

关上 Canvas-Markers 插件的代码，在下图地位减少一个绘制文字的办法。

再在下图中的三个地位，减少下面新增办法的调用

这样就能够实现标签性能了，看成果

性能方面，最大反对 10 万条数据左右。

文字标注性能

我在 github 上搜寻 leaflet+text 关键字，翻看了后果中的前 20 个代码库，找到了 LabelTextCollision 这个插件。

LabelTextCollision 插件创作的目标，是为了实现的文字标注的主动避让性能，实现形式是 Canvas，文字标注性能是它顺带解决的问题。

测试时，发现了它一个问题，1 万条数据，在放大地图时，显示很晦涩，但放大地图时，会呈现卡顿的景象，而且地图越放大，卡顿的就越厉害。

通常在加载大数据量时，都是越放大地图越卡顿，越放大地图越晦涩。但这个插件刚好相同，这是为啥呢？

集体揣测，呈现这种问题，多半是因为没有依据屏幕显示范畴对数据做筛选造成的，不做筛选就会把屏幕显示范畴外的数据也加上。

这个插件因为它做了文字显示的避让，越放大地图，数据在屏幕上显示的就越集中，主动避让掉的文字就越多，显示的文字就越少，展现就越晦涩。

越放大地图，数据在屏幕上显示的就越扩散，主动避让的文字就越少，显示的文字就越多，这时如果没有做筛选，展现就会越来越卡顿。

看了下它的代码，证实了我的揣测，的确没有发现，对屏幕区域外显示内容进行限度的代码。

那咱们就来给它加上，在下图中的两个中央增加对屏幕显示范畴的判断，只显示以后能看到的数据。

再试一下，哈哈，搞定

测试了下，优化后，能够加载 5 万条数据左右。

更多场景

下面列举了 DivIcon 常见的两种应用场景，以及如何应用 Canvas 形式进步展现性能的解决方案，如果你那还有 DivIcon 的其它应用场景，能够在下方留言，咱们一起探讨解决办法。

总结

1. Canvas-Markers 插件的目标是为了解决，大批量数据展现时的性能问题。
2. DivIcon 实现的原理是在 HTML 页面中增加 DOM 元素，大量增加和批改 DOM 元素会拉低浏览器展现性能。
3. 从进步展现性能的出发点思考，Canvas-Markers 插件不应该去反对 DivIcon。
4. 用 DivIcon，通常是为了实现标签性能和文字标注性能，这两个性能都有 Canvas 形式的解决方案。
5. 对 Canvas-Markers 插件进行优化，减少文字接口，能够代替 DivIcon 实现标签性能。
6. LabelTextCollision 插件能够实现文字标注的主动避让性能，它是用 Canvas 形式实现，能够代替 DivIcon 实现文字标注性能。
7. LabelTextCollision 插件在地图放大时，最多只能展现 1 万条数据左右，优化后能够达到 5 万条数据左右。

在线示例

标签性能 http://gisarmory.xyz/blog/index.html?demo=diviconError-CanvasMarker

文字标注性能 http://gisarmory.xyz/blog/index.html?demo=diviconError-LabelTextCollision

源码

标签性能 http://gisarmory.xyz/blog/index.html?source=diviconError-CanvasMarker

文字标注性能 http://gisarmory.xyz/blog/index.html?source=diviconError-LabelTextCollision

原文地址：http://gisarmory.xyz/blog/index.html?blog=diviconError

关注《GIS 兵器库》公众号，第一工夫取得更多高质量 GIS 文章。

本文章采纳 常识共享署名 - 非商业性应用 - 雷同形式共享 4.0 国内许可协定 进行许可。欢送转载、应用、从新公布，但务必保留文章署名《GIS 兵器库》（蕴含链接：http://gisarmory.xyz/blog/），不得用于商业目标，基于本文批改后的作品务必以雷同的许可公布。