Как изменить цвет первой вершины при рисовании многоугольника с помощью Leaflet.Draw?

Я использую Leaflet и Leaflet.Draw, и я разрешаю пользователю из моего кода рисовать многоугольник (НЕ используя элементы управления Leaflet Draw).

Пока пользователь рисует многоугольник, мне нужно изменить цвет его первой вершины, например: зеленый, чтобы пользователь знал, что ему нужно щелкнуть по первой точке, чтобы закрыть многоугольник и завершить рисование.

Как изменить цвет первой вершины при рисовании многоугольника с помощью Leaflet.Draw?

Следующее изображение для уточнения, означает, что оно исправлено с помощью программы Paint.

Это изображение для доработки, т. Е. Исправлено с помощью программы Paint

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

javascript maps leaflet leaflet.draw
person Mahdi Alkhatib    schedule 14.08.2017    source источник

Ответы (3)


arrow_upward
6
arrow_downward

Пока я взламывал 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, вы выбираете первый элемент из этого длинного селектора и устанавливаете его цвет фона на зеленый или любой другой цвет.

person Mahdi Alkhatib    schedule 16.08.2017
comment
Почему бы просто не сделать это с помощью CSS, без слушателей или jQuery? - person Boris K; 28.12.2017
comment
В моем проекте селектор CSS не применялся, кроме как jQuery !! - person Mahdi Alkhatib; 31.12.2017
comment
Сомневаюсь, потому что сам элемент еще не создан. - person Mahdi Alkhatib; 31.12.2017
comment
Вот это работает: #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) {фон: зеленый; } - person Boris K; 31.12.2017

arrow_upward
0
arrow_downward

Это способ сделать это только с помощью 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;
}
person Boris K    schedule 31.12.2017

arrow_upward
0
arrow_downward

Для меня так работало (классы немного разные. Листовка 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' });
        });
person BernieSF    schedule 09.03.2018