Dépliant - dessiner des sommets de polylignes seulement

Le titre est assez clair, j'utilise Leaflet et je n'ai besoin de montrer que les sommets d'une polyligne. Pour voir cette image exemple:Dépliant - dessiner des sommets de polylignes seulement

Actuellement je peux seulement avoir la ligne noire, je voudrais que les carrés rouges. L'utilisation de marqueurs n'est pas une option pour les problèmes de performance, mes lignes peuvent être énormes (500 000 sommets) et l'utilisation de smoothFactor est nécessaire.

Est-ce possible? Si ce n'est pas le cas, est-ce que quelqu'un connaît un plugin qui le fait, ou a un indice sur comment je pourrais le faire en étendant la classe Polyline?

Source

2015-10-07 Tim Autin

Si vous ne pouvez pas utiliser des marqueurs, même en mode toile, il semble que vous voulez un svg 'path' avec des sections importantes de l'enlever/cloaked pour afficher uniquement les sections de sommet (et. comment voulez-vous les rendre carrés rouges de toute façon? - un style de polyligne rouge épais je suppose?) Je ne suis pas sûr exactement comment ce travail serait dans les spécifications SVG. – snkashis

Eh bien, je suis un total noob en svg, donc je ne sais absolument pas ^^. Je n'ai pas besoin de dessiner des carrés rouges, ça peut être des points (par exemple). –

Ce que vous pouvez faire ici est à chaque fois que la polyligne se rend, obtenir les segments de son chemin SVG, utiliser ces points pour ajouter des éléments de rectangle SVG au conteneur de la polyligne:

var polyline = L.Polyline([]).addTo(map), 
    list = polyline._path.pathSegList 

// Iterate segments 
for (var i = 0; i < list.length; i++) { 

    // Create SVG rectangle element 
    rectangle = document.createElementNS('http://www.w3.org/2000/svg', 'rect') 

    // Set rectangle size attributes 
    rectangle.setAttributeNS(null, 'height', 4) 
    rectangle.setAttributeNS(null, 'width', 4) 

    // Set position attributes, compensate for size 
    rectangle.setAttributeNS(null, 'x', list[i].x - 2) 
    rectangle.setAttributeNS(null, 'y', list[i].y - 2) 

    // Set rectangle color 
    rectangle.setAttributeNS(null, 'fill', 'red') 

    // Append rectangle to polyline container 
    polyline._container.appendChild(rectangle) 
    }

Ça semble fonctionner autant que j'ai eu le temps de le tester;) J'ai dû utiliser un timeout, je ne sais pas pourquoi, regardez ça quand j'ai plus de temps sur mes mains.

Exemple sur Plunker: http://embed.plnkr.co/vZI7aC/preview

Source

2015-10-11 16:02:54 iH8

C'est un bon début, merci! J'utilise Leaflet v1.0 beta donc il a besoin de quelques ajustements. Je ne suis plus sur ce problème pour les prochaines semaines, mais je reviendrai si je le résous. Si vous utilisez ce code, méfiez-vous, cela ne fonctionne pas sur Safari. –

Je vois qu'ils n'ajoutent plus un élément 'g' par chemin et ajoutent tous les éléments' path' dans un élément 'g'. Aurait besoin de quelques modifications mineures pour le faire fonctionner avec 1.0.0-b1. En ce qui concerne le problème de Safari, juste essayé, vous avez raison. C'est bizarre parce que ça ne me gêne pas du tout. Je ne suis pas vraiment à la maison avec l'inspecteur de Safari, mais je vais y jeter un coup d'œil quand je trouverai le temps. – iH8

Merci beaucoup! Pas d'erreur pour moi non plus avec Safari. –

Dépliant - dessiner des sommets de polylignes seulement

Répondre

Questions connexes