Is divicon still used in leaflet in H5 era?

I wrote an article some time ago 《leaflet How to load 10 All the data 》 The article , One of the students responded that Canvas-Markers Plugin does not support DivIcon. Let's have a chat today , Why this plug-in doesn't support DivIcon, And how to use H5 Of Canvas characteristic , Make previous use of DivIcon In order to achieve label and Text annotation function .

Old rules , First on the renderings ：

Label function

Text annotation function

Why not support DivIcon

Canvas-Markers The purpose of plug-ins is to solve , Performance issues of mass data presentation , It uses H5 in Canvas Drawing in the way of drawing Marker, Improved display performance . But the plug-in only supports Icon, I won't support it DivIcon.

I don't support , Because DivIcon The implementation principle of is in HTML Add... To the page DOM Elements , And pan on the map 、 Constantly changing as you zoom DOM Attribute of element , And a lot of additions and modifications DOM Elements can slow down the browser's display performance , There are such phenomena as stuck .

If you use Canvas-Markers It's still in use after DivIcon, It is equivalent to upgrading the network to Gigabit bandwidth , Still using the 100 megabyte router before . At this moment DivIcon It's going to be like the 100 megabyte router , Become the narrowest place in the whole passage , Become a bottleneck .

If not DivIcon This old router , Is there a new router ？

Yes ！ But it depends on the situation .

At work , use DivIcon Usually to achieve Label function and Text annotation function

Label function ：

Text annotation function ：

In both cases ,leaflet There are Canvas The solution to the problem .

Label function

Mentioned above ,Canvas-Markers Plug ins currently only support Icon Type of icon , Look at the code and you'll see , Actually , It USES Icon It's just Icon Think of it as a Object To use , It's only for transmitting ginseng , Not to use Icon Internal functions . because Icon Internal , Also created a img Type of DOM Elements , It and DivIcon equally , A large number of additions will affect the browser's display performance .

Canvas-Markers Plug in through Icon Get the image's address and the image's offset position and other parameters , And then use Canvas The way to draw pictures .

The label consists of two parts , Background box and text , The background box is usually a picture .Canvas-Markers The plug-in has been able to load images , We just need to make it support words again , And can control the style and position of the text , You can implement the tag function .

open Canvas-Markers Plug in code , Add a method to draw text in the position below .

Three more places in the picture below , Add the call of the new method above

In this way, the tag function can be realized , See the effect

Performance aspect , The biggest support 10 About ten thousand data .

Text annotation function

I am here github On the search leaflet+text keyword , Look at the top of the results 20 Code base , eureka LabelTextCollision This plugin .

LabelTextCollision The purpose of plug-in creation is , It is to realize the automatic avoidance function of text annotation , The way to do it is Canvas, The text annotation function is the problem it solves by the way .

When testing , Found a problem with it ,1 Ten thousand data , When you zoom out of the map , The display is very smooth , But when you zoom in on the map , It's going to get stuck , And the bigger the map is , The more powerful the stuck one is .

Usually when loading large amounts of data , The smaller the map, the more stuck it is , The bigger the map, the smoother it is . But this plug-in is just the opposite , Why is this ？

Personal speculation , It's a problem , Most of the data is not filtered according to the screen display range , If you don't filter, you'll add data out of the screen .

This plug-in is because it avoids text display , The smaller the map , The more data is displayed on the screen , The more text you automatically avoid , The less text is displayed , The more fluent the presentation is .

The more you zoom in on the map , The more scattered the data is displayed on the screen , The less text there is to avoid automatically , The more text is displayed , If there is no screening at this time , The show will get more and more stuck .

Take a look at the code , Confirmed my conjecture , It's true that we didn't find , Code that restricts what is displayed outside the screen area .

Then we'll add , Add the judgment of the screen display range in two places in the figure below , Display only the data currently visible .

Try again , ha-ha , Get it done

Tested under , After optimization , Can be loaded 5 About ten thousand data .

More scenes

The above lists DivIcon Two common usage scenarios , And how to use it Canvas Way to improve presentation performance , If you have DivIcon Other use scenarios of , Leave a comment below , Let's talk about solutions .

summary

1. Canvas-Markers The purpose of plug-ins is to solve , Performance issues in mass data presentation .
2. DivIcon The principle of implementation is in HTML Add... To the page DOM Elements , Add and modify a lot of DOM Elements can slow down browser presentation performance .
3. From the point of view of improving display performance ,Canvas-Markers Plug ins should not support DivIcon.
4. use DivIcon, It is usually for the realization of label function and text annotation function , Both functions have Canvas The solution to the problem .
5. Yes Canvas-Markers Plug in to optimize , Add text interface , Can replace DivIcon Realize the tag function .
6. LabelTextCollision The plug-in can realize the automatic avoidance function of text annotation , It is to use Canvas How to achieve , Can replace DivIcon Realize the function of text annotation .
7. LabelTextCollision Plug in when the map is zoomed in , You can only show 1 About ten thousand data , After optimization, we can achieve 5 About ten thousand data .

Online example

Label function http://gisarmory.xyz/blog/index.html?demo=diviconError-CanvasMarker

Text annotation function http://gisarmory.xyz/blog/index.html?demo=diviconError-LabelTextCollision

Source code

Label function http://gisarmory.xyz/blog/index.html?source=diviconError-CanvasMarker

Text annotation function http://gisarmory.xyz/blog/index.html?source=diviconError-LabelTextCollision

---

Original address ：http://gisarmory.xyz/blog/index.html?blog=diviconError

Focus on 《GIS Zeughaus 》 official account , The first time to get more high quality GIS article .

This article adopts   Creative Commons signature - Noncommercial use - Share in the same way 4.0 International licensing agreement   Licensing . Welcome to reprint 、 Use 、 Re release , But be sure to keep the signature of the article 《GIS Zeughaus 》（ Include links ：  http://gisarmory.xyz/blog/）, Not for commercial purposes , Based on this revised work must be released with the same license .