Leaflet.Drawを使ってポリゴンを描いている最中に最初の頂点の色を変更するには？

Question

私はLeafletとLeaflet.Drawを使用しています。私は自分のコードからポリゴンを描画するようにしています（リーフレット描画コントロールを使用していません）。

ユーザーがポリゴンを描画しているときに、最初の頂点の色を変更する必要があります（例：緑）。そのため、ポリゴンを閉じて描画を終了するために最初の点をクリックする必要があることがわかります。

Leaflet.Drawを使用してポリゴンを描きながらどのように私は最初の頂点の色を変更できますか？

次の画像は、ペイントソフトウェアで修正されたことを意味しています。

P.S.私はLeaflet.Drawで、私は次のコードが出ているポリゴンの作成時にハッキングされたがここに私のコードは

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

です：

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' }); 
     }); 

ので、リスナーがありますコード内に挿入することができます。draw:drawvertexこれは、頂点が作成されるたびに何かをする必要があることを意味します。

その後、あなたはこの長いセレクタから最初の要素を選択しているのjQueryを使用して、緑または他の色に背景色を設定します。

Answer 2

これが唯一のCSSでそれを行うための方法です。私にとって

#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

、この方法を働いた（クラスは少し異なっている1.3.1リーフレットおよび0.4.3を描く。）

 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' }); 
     });