当前位置:网站首页>Divicon est toujours utilisé dans le leaflet de l'ère H5?
Divicon est toujours utilisé dans le leaflet de l'ère H5?
2022-06-12 23:42:00 【Bibliothèque d'armes SIG】
Il y a quelque temps.《leafletComment charger1010 000 données》Article de,Certains camarades de classe ont réagiCanvas-MarkersLe plugin ne supporte pasDivIcon.On va parler aujourd'hui,Pourquoi ce plugin ne supporte pasDivIcon,Et comment utiliserH5DeCanvasCaractéristiques,AvantDivIconC'est possible. Étiquettes Et Dimensions textuelles Fonction.
Vieille règle,Commencez par l'image.:
Fonction d'étiquetage

Fonction de dimension de texte

Pourquoi ne pas soutenirDivIcon
Canvas-MarkersLe plugin a été créé pour,Problèmes de performance de la présentation de données en vrac,En utilisantH5MoyenneCanvasPour dessiner commeMarker,Amélioration des performances de présentation.Mais ce plugin ne prend actuellement en charge queIcon,Non pris en chargeDivIcon.
La raison pour laquelle ,Parce queDivIcon Le principe de mise en œuvre de HTMLAjouter à la pageDOMÉlément, Et sur la carte 、 Modifications constantes lors de l'échelle DOMPropriétés de l'élément, Et beaucoup d'ajouts et de modifications DOM L'élément réduit les performances d'affichage du navigateur ,Des phénomènes tels que le blocage se produisent.
Si vous utilisezCanvas-Markers Continuer à utiliser après DivIcon, .C'est l'équivalent de la bande passante Gigabit mise à jour du réseau , Toujours avec le routeur 100 mégaoctets précédent .À ce moment - là.DivIcon Comme ce routeur de 100 mégaoctets , Devenir l'endroit le plus étroit du passage , Devient un goulot d'étranglement .
Si ce n'est pas le cas,DivIcon Ce vieux routeur , Y a - t - il un nouveau routeur ?
Oui.!Mais ça dépend..
En temps normal,AvecDivIcon Habituellement pour réaliser Fonction d'étiquetage Et Dimensions textuelles Fonction
Fonction d'étiquetage:

Fonction de dimension de texte:

Dans les deux cas,leafletTous.Canvas Une solution pour .
Fonction d'étiquetage
Comme indiqué ci - dessus,Canvas-Markers Le plugin ne prend actuellement en charge que IconIcône du type, Regardez son Code et vous verrez ,En fait...,Il utiliseIcon C'est juste IconComme unObjectAllez., Utilisé uniquement pour transmettre le paramètre , Ça n'a pas marché IconFonctions internes.Parce queIconIntérieur,A également créé unimgTypeDOMÉlément,EtDivIconC'est pareil, Beaucoup d'ajouts affectent les performances d'affichage du navigateur .
Canvas-MarkersLe plug - in passe parIcon Obtenir des paramètres tels que l'adresse de l'image et la position offset de l'image ,Et utiliserCanvas Pour dessiner des images .
L'étiquette se compose de deux parties , Boîte de fond et texte , La boîte de fond est généralement une image .Canvas-Markers Le plugin peut déjà charger des images , Il faut juste qu'il supporte le texte , Et peut contrôler le style et la position du texte , La fonction d'étiquetage est maintenant disponible .
Ouvre.Canvas-MarkersCode du plug - in, Ajouter une méthode pour dessiner le texte à l'emplacement ci - dessous .

Trois autres positions dans la figure ci - dessous , Ajouter un appel à la nouvelle méthode ci - dessus

De cette façon, la fonction d'étiquetage peut être réalisée ,Voir l'effet

Aspects de performance,Soutien maximal10 Environ 10 000 données .
Fonction de dimension de texte
Je suisgithubRecherche en hautleaflet+textMots clés, En regardant devant les résultats 20 Bibliothèques de codes ,J'ai trouvé. LabelTextCollision Ce plugin.
LabelTextCollision Le but de la création du plugin , Est de réaliser la fonction d'évitement automatique de l'annotation de texte ,La mise en œuvre estCanvas, La fonction d'annotation de texte est un problème qu'elle résout avec .

Au moment du test, J'ai trouvé un problème ,110 000 données, En zoomant sur la carte , L'affichage est fluide , Mais en zoomant sur la carte , Il y aura un phénomène de blocage , Et plus la carte est agrandie , Plus le carton est puissant .
En général, lorsque vous chargez de grandes quantités de données , Plus la carte est réduite, plus la carte est cartographiée , Plus la carte est agrandie, plus elle est fluide . Mais ce plugin est l'inverse ,Pourquoi??
Spéculations personnelles,Ce genre de problème, En grande partie parce que les données ne sont pas filtrées en fonction de la plage d'affichage à l'écran , Sans filtre, les données qui ne sont pas affichées à l'écran sont ajoutées .
Ce plug - in permet d'éviter l'affichage de texte , Plus vous zoomez sur la carte , Plus les données sont centralisées sur l'écran , Plus de texte est automatiquement évité , Moins de texte sera affiché , Plus la présentation est fluide .
Plus vous zoomez sur la carte , Plus les données sont dispersées sur l'écran , Moins il y a de texte pour l'évitement automatique , Plus de texte sera affiché , S'il n'y a pas de filtre , L'exposition s'emboîtera de plus en plus .
Regardez son code , Ça confirme mon hypothèse , Je n'ai pas trouvé , Code pour limiter l'affichage en dehors de la zone de l'écran .
Alors on va l'ajouter , Ajoutez un jugement sur la plage d'affichage de l'écran à deux endroits dans la figure suivante , Afficher uniquement les données actuellement visibles .

Essaie encore.,Ha Ha!,C'est bon.

Testé.,Après optimisation,Peut être chargé5 Environ 10 000 données .
Plus de scénarios
Voici une liste deDivIcon Deux scénarios d'utilisation courants ,Et comment l'utiliserCanvas Des solutions pour améliorer les performances de présentation , Si tu avais DivIcon Autres scénarios d'utilisation pour ,Laissez un message ci - dessous, Nous discutons ensemble de la solution .
Résumé
- Canvas-Markers Le but du plugin est de résoudre , Problèmes de performance lors de la présentation de données en vrac .
- DivIcon Le principe de mise en œuvre est que HTMLAjouter à la pageDOMÉlément, Grand nombre d'ajouts et de modifications DOM Les éléments abaissent les performances de présentation du navigateur .
- En partant du point de vue de l'amélioration des performances de présentation ,Canvas-Markers Le plug - in ne devrait pas prendre en charge DivIcon.
- AvecDivIcon, .Habituellement pour les fonctions d'étiquetage et d'annotation de texte , Ces deux fonctions ont Canvas Une solution pour .
- C'est exact.Canvas-Markers Le plugin est optimisé , Ajouter une interface texte ,Peut être remplacéDivIcon Réaliser la fonction d'étiquetage .
- LabelTextCollision Le plug - in peut réaliser la fonction d'évitement automatique de l'annotation de texte ,Ça marche.CanvasMode de réalisation,Peut être remplacéDivIcon Réaliser la fonction de dimension de texte .
- LabelTextCollision Plugin quand la carte est agrandie , Ne peut montrer que 1 Environ 10 000 données , Optimisé pour 5 Environ 10 000 données .
Exemple en ligne
Fonction d'étiquetage http://gisarmory.xyz/blog/index.html?demo=diviconError-CanvasMarker
Fonction de dimension de texte http://gisarmory.xyz/blog/index.html?demo=diviconError-LabelTextCollision
Code source
Fonction d'étiquetage http://gisarmory.xyz/blog/index.html?source=diviconError-CanvasMarker
Fonction de dimension de texte http://gisarmory.xyz/blog/index.html?source=diviconError-LabelTextCollision
Adresse originale:http://gisarmory.xyz/blog/index.html?blog=diviconError
Attention《GISArsenal》Numéro public, Obtenez plus de qualité dès le début GISArticle (s).

Adopté dans cet article Partage des connaissances signature-Utilisation non commerciale-Partager de la même façon 4.0 Accord international de licence Pour obtenir une licence.Bienvenue à la réimpression、Utiliser、Republish,Mais assurez - vous de garder la signature de l'article《GISArsenal》(Contient des liens: http://gisarmory.xyz/blog/),Ne pas utiliser à des fins commerciales,Les oeuvres modifiées sur la base de cet article doivent être publiées sous la même licence.
边栏推荐
- [kubernetes guide ④] pod quick start
- PyTorch常用参数初始化方法:【均匀分布、正态(高斯)分布、Xavier、kaiming、正交矩阵、稀疏矩阵、常数、单位矩阵、零填充】
- 36 krypton's debut | "osogena" won nearly ten million angel rounds of financing. The original DLR scientists of German Aerospace Research and development system modeling and simulation CAE software PA
- 移动安全必备之CS呢【NETHUNTER】
- M_8:设计消息队列存储消息数据的 MySQL 表格
- Find out the data that can match the keyword key in field 1 or field 2 in the database table. If you want to display the matching data in field 1 first
- 实战 | UI 自动化测试框架设计与 PageObject 改造
- [SciPy optimization tutorial] v. quick solution of univariate function optimization
- [Yugong series] wechat applet in February 2022 - Reference
- Examination questions and online simulation examination for safety management personnel of hazardous chemical business units in 2022
猜你喜欢
C language: how to give an alias to a global variable?

AWS lambda: how to store secrets to external APIs- AWS Lambda: How to store secret to external API?

Alien skin exposure X7 color filter plug-in, raw post-processing tool

Using baserecyclerviewadapterhelper to implement tree structure

设计消息队列存储消息数据的 MySQL 表格

Based on three JS offshore wind power digital twin 3D effect

Leetcode 2164. Sort odd and even subscripts separately (yes, once)

Alien Skin Exposure X7调色滤镜插件,RAW后期处理工具

M_ 8: Design a MySQL table for message queue to store message data

Model over fitting - solution (II): dropout
随机推荐
2202-简历制作
Colab tutorial (super detailed version) and colab pro/colab pro+ usage evaluation
MySQL row to column, column to row, multiple columns to one row, one row to multiple columns
2202-簡曆制作
华为云会议初体验【华为云至简致远】
Alien Skin Exposure X7调色滤镜插件,RAW后期处理工具
CS for mobile security [nethunter]
Detr (detection with transformers) learning notes
Sequence maximum return
基于Three.js海上风电数字孪生三维效果
Teach you how to grab ZigBee packets through cc2531 and parse encrypted ZigBee packets
Record 5 - the serial port of stm32f411ceu6 realizes the sending and receiving of fixed length data and variable length data
应用最广泛的动态路由协议:OSPF
Xi'an Jiaotong 22nd autumn e-commerce technology online expansion resources (IV) [standard answer]
设计消息队列存储消息数据的 MySQL 表格
[opencv learning] small ticket recognition based on perspective transformation and OCR recognition
SAP 业务技术平台(BTP) Workflow(工作流)功能介绍
2022 operation of simulated examination platform for hoisting machinery command certificate
[kubernetes guide ⑤] label quick start
Novice must see! How rust beginners write gear smart contracts (1)