使用 Leaflet.Draw 绘制多边形时如何更改第一个顶点的颜色？

Question

我正在使用 Leaflet 和 Leaflet.Draw，我让用户通过我的代码绘制多边形（不使用 Leaflet 绘制控件）。

当用户绘制多边形时，我需要更改其第一个顶点的颜色，例如：绿色，以便用户知道他需要单击第一个点以关闭多边形并完成绘制.

如何在使用 Leaflet.Draw 绘制多边形时更改第一个顶点的颜色？

下图为精修图，意思是用画图软件修复了

P.S. Here is my 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

当我使用 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 从这个长选择器中选择第一个元素，并将其背景颜色设置为绿色或任何其他颜色。

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

对我来说，就是这样工作的（类有点不同。leaflet 1.3.1 和 draw 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' });
        });

Answer 4

这对我有用：

map.on("editable:vertex:dragend", function (e) {

  // Set GREEN color for Vertex START (First) Point
  $(".leaflet-marker-icon.leaflet-div-icon.leaflet-vertex-icon.leaflet-zoom-animated.leaflet-interactive.leaflet-marker-draggable:nth-child(1)").css({ 'background-color': 'green' });

  // Set RED color for Vertex END (Last) Point
  $(".leaflet-marker-icon.leaflet-div-icon.leaflet-vertex-icon.leaflet-zoom-animated.leaflet-interactive.leaflet-marker-draggable:nth-child(2)").css({ 'background-color': 'red' });

});

使用 Leaflet.Draw 绘制多边形时如何更改第一个顶点的颜色？

How to change color of first vertex while drawing polygon using Leaflet.Draw?

javascript

maps

leaflet

leaflet.draw