Comment changer la couleur du premier sommet tout en dessinant un polygone en utilisant Leaflet.Draw?

Question

J'utilise Leaflet et Leaflet.Draw, et je laisse l'utilisateur à partir de mon code pour dessiner un polygone (PAS en utilisant les commandes de dessin de Leaflet). Pendant que l'utilisateur dessine le polygone, je dois changer la couleur de son premier sommet, par exemple: vert, afin que l'utilisateur sache qu'il doit cliquer sur le premier point pour fermer le polygone et terminer le dessin.

Comment puis-je modifier la couleur du premier sommet tout en dessinant un polygone à l'aide de Leaflet.Draw?

L'image suivante pour l'élaboration, ce qui signifie qu'elle est corrigée avec un logiciel de peinture.

post-scriptum Voici mon code

var map = L.map('mapid', 
      { 
       minZoom: -1, 
       maxZoom: 4, 
       center: [0, 0], 
       zoom: 1, 
       crs: L.CRS.Simple 
       }); 

var polygonDrawer = new L.Draw.Polygon(map); 

map.on('draw:created', function (e) { 
var type = e.layerType, layer = e.layer; 
layer.editing.enable(); 
    layer.addTo(map); 

    }); 

$(document)ready(function(){ 
polygonDrawer.enable(); 
}); 

Answer 1

Pendant que je Hacking avec le Leaflet.Draw et sur la création de polygones que je suis venu avec le code suivant:

map.on('draw:drawvertex', 
     function (e) { 
      $(".leaflet-marker-icon.leaflet-div-icon.leaflet-editing-icon.leaflet-touch-icon.leaflet-zoom-animated.leaflet-interactive:first").css({ 'background-color': 'green' }); 
     }); 

Donc, il y a un auditeur vous pouvez l'insérer dans votre code, draw:drawvertex, ce qui signifie que chaque fois qu'un sommet créé, je dois faire quelque chose. Puis, en utilisant jQuery, vous sélectionnez le premier élément de ce sélecteur long et définissez sa couleur d'arrière-plan sur vert ou toute autre couleur.

Answer 2

Ceci est une façon de le faire avec CSS seulement:

#root 
    > main 
    > div 
    > div.col-sm-8.m-auto.p-0.flex-column.float-right 
    > div.leaflet-container.leaflet-touch.leaflet-fade-anim.leaflet-grab.leaflet-touch-drag.leaflet-touch-zoom 
    > div.leaflet-pane.leaflet-map-pane 
    > div.leaflet-pane.leaflet-marker-pane 
    > div:nth-child(2) { 
    background: green; 
} 

Answer 3

Pour moi, travaillé de cette façon (. Classes sont un peu différent leaflet 1.3.1 et 0.4.3 tirer)

 map.on('draw:drawvertex', function (e) { 
      $(".leaflet-marker-icon.leaflet-div-icon.leaflet-editing-icon.leaflet-zoom-animated.leaflet-interactive:first").css({ 'background-color': 'green' }); 
     });