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

Question

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

javascriptmapsleafletleaflet.draw

3

我正在使用Leaflet和Leaflet.Draw，并且允许用户从我的代码中绘制多边形（而不是使用Leaflet Draw Controls）。

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

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

以下图像进行说明，意思是已经固定在画图软件中。

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

- Mahdi Alkhatib

4个回答

0

这是只使用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;
}

- Boris K

0

对我来说，这样做可以解决问题（类有一点不同。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' });
        });

- BernieSF

0

这对我有用：

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

});

- Nuri Akman

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mahdi Alkhatib · Accepted Answer

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