Как получить тип слоя формы листовки при нажатии на нее?

Мой проект Leaflet позволяет пользователям рисовать фигуры (линии, прямоугольники и многоугольники). Пользователь может нажимать на фигуры, чтобы получить их статистику (площадь, периметр и т. д.).

Я попробовал событие щелчка в моей FeatureGroup(), куда добавляются все фигуры, которые я нарисовал. Я не уверен, что это лучший подход. Затем при нажатии вызывается функция, принимающая событие. Тип слоя выводится из объекта события.


 //Handlers for when drawn shapes are clicked
        editableLayers.on('click', onLayerClick);

        function onLayerClick(e)
        {
            let type = e.layerType,
                layer = e.layer;
            if (type === 'polygon') {
                polygons.push(e.layer);
                let area = L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]);
                console.log("New polygon area: " + area);
            }

            if (type === 'rectangle') {
                rectangles.push(e.layer);
                let area = L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]);
                console.log("New rectangle area: " + area);
            }     
        }

Объект типа возвращает неопределенное значение, а объект слоя возвращает набор параметров, не ссылающихся на тип фигуры. Из-за этого я не могу определить тип формы и выполнить правильные вычисления, чтобы получить их характеристики.


javascript leaflet leaflet.draw
person disguisedtoast    schedule 11.07.2019    source источник
comment
Не точная копия, но содержит полезную информацию... stackoverflow.com/questions/18014907/   -  person peeebeee    schedule 11.07.2019

Ответы (2)


arrow_upward
4
arrow_downward

Я бы использовал для этого instanceof оператор. задача, например:

function onLayerClick(ev) {
  var targetLayer = ev.sourceTarget;
  if (targetLayer instanceof L.Rectangle) {
     // Do something
  } else if (targetLayer instanceof L.Polygon) {
     // Do something
  } else if (targetLayer instanceof L.Polyline) {
     // Do something
  } else {
     // Do something
  }
}

Обратите внимание, что из-за как работает наследование, любой экземпляр of L.Rectangle также является экземпляром L.Polygon, L.Polyline и L.Path, поэтому код должен сначала проверять наиболее конкретные подклассы.

Не забудьте проверить справку по буклету, особенно для битов, которые рассказывают вам о дереве наследования, например:

Прямоугольник

Класс для рисования наложения прямоугольников на карту. Расширяет полигон.

диаграмма классов Leaflet также полезна для понимания дерева наследования.

person IvanSanchez    schedule 11.07.2019

arrow_upward
1
arrow_downward

Основная причина в том, что event.layerType — это специальное свойство, добавляемое плагином Leaflet.draw только тогда, когда пользователь создает новую функцию.

Когда вы прикрепляете прослушиватель событий щелчка к стандартной группе функций Leaflet, объект события щелчка не имеет такого свойства layerType, как вы можете проверить на документы.

Что касается решения, см. Ответ Ивана Санчеса.

person ghybs    schedule 12.07.2019