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

【问题标题】：How to change color of first vertex while drawing polygon using Leaflet.Draw?使用 Leaflet.Draw 绘制多边形时如何更改第一个顶点的颜色？
【发布时间】：2017-08-14 13:37:30
【问题描述】：

我正在使用 Leaflet 和 Leaflet.Draw，我让用户从我的代码中绘制多边形（不使用 Leaflet Draw Controls）。

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

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

【问题讨论】：

标签： javascript maps leaflet leaflet.draw

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

【讨论】：

为什么不用 CSS 来做，没有监听器或 jQuery？
在我的项目中，CSS 选择器除了 jQuery 之外没有应用！！
我会怀疑，因为元素本身尚未创建。
这里，这行得通：#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) { 背景：绿色； }

【解决方案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;
}

【讨论】：

【解决方案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' });
        });

【讨论】：

【解决方案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' });

});

【讨论】：