如何使用Leaflet.Draw繪製多邊形時更改第一個頂點的顏色？

我正在使用Leaflet和Leaflet.Draw，我讓用戶從我的代碼繪製多邊形（不使用Leaflet繪製控件）。如何使用Leaflet.Draw繪製多邊形時更改第一個頂點的顏色？

在用戶繪製多邊形時，我需要更改其第一個頂點的顏色，例如：綠色，以便用戶知道他需要單擊第一個點以關閉多邊形並完成繪製。

如何在使用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(); 
});

來源

2017-08-14 Mahdi Alkhatib

當我與Leaflet.Draw和創建多邊形的我想出了下面的代碼黑客：

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從這個長選擇器中選擇第一個元素，並將其背景顏色設置爲綠色或其他顏色。

來源

2017-08-16 07:53:49

爲什麼不只是用CSS來做，沒有監聽器或jQuery？ –

在我的項目中，CSS選擇器除了jQuery外沒有應用！ –

我懷疑是因爲元素本身還沒有創建。 –

這是一種只用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; 
}

來源

2017-12-31 11:45:17

對我來說，工作這種方式（類是有點不同的傳單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' }); 
     });

來源

2018-03-09 16:58:15 BernieSF

如何使用Leaflet.Draw繪製多邊形時更改第一個頂點的顏色？

回答

相關問題