Question

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

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

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

以下图片用于详细说明，这意味着它已使用Paint Software修复。

P.S。这是我的代码

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

对我来说，这样工作（课程有点不同。传单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' });
        });

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

3 个答案: