Как да получа типа слой на форма на листовка, когато щракна върху нея?

Проектът My 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);
            }     
        }

Типовият обект връща undefined, а слойният обект връща куп параметри, без да прави препратка към типа форма. Поради това не мога да направя извод за типа форма и да извърша правилните изчисления, за да получа техните статистики.


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
  }
}

Имайте предвид, че поради как работи наследяването, всеки екземпляр на 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, както можете да проверите на документи.

Що се отнася до решение, вижте отговора на IvanSanchez.

person ghybs    schedule 12.07.2019