Divicon est toujours utilisé dans le leaflet de l'ère H5?

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é

1. Canvas-Markers Le but du plugin est de résoudre , Problèmes de performance lors de la présentation de données en vrac .
2. 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 .
3. 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.
4. AvecDivIcon, .Habituellement pour les fonctions d'étiquetage et d'annotation de texte , Ces deux fonctions ont Canvas Une solution pour .
5. C'est exact.Canvas-Markers Le plugin est optimisé , Ajouter une interface texte ,Peut être remplacéDivIcon Réaliser la fonction d'étiquetage .
6. 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 .
7. 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.