Для захвата идентификатора, скрытого во всплывающем окне Leaflet, требуется два клика для обновления [Javascript] - PullRequest
Новая
       6

Для захвата идентификатора, скрытого во всплывающем окне Leaflet, требуется два клика для обновления [Javascript]

0 голосов
/ 21 февраля 2019

У меня действительно раздражающая проблема с javascript в моем проекте Django.В настоящее время создается веб-приложение, которое считывает данные с датчиков, размещенных в люках для измерения температуры воды.Мы отображаем эти датчики в виде маркеров на Leafletmap с системой трубопроводов между каждым люком.В настоящее время я сохраняю идентификатор датчика как скрытую переменную в каждом люке, а затем собираю их, чтобы построить график D3, отображающий данные о температуре для конкретного люка, по которому щелкнули. 

onEachFeature: (feature, layer) => {

                    for (let i = 0; i < place.length; i++) {

                        if (place[i].fields.pnamn === feature.properties.pnamn) {
                            sensorid = place[i].fields.eui;
                        }
                    }

                    var popupText = "<strong>" + feature.properties.pnamn + "<p id='popupText' style='display:none'>" + sensorid + "</p>" + "</strong>";
                    layer.bindPopup(popupText);
                },

[......] }).on('click', onClick).on('popupclose', startZoomer).addTo(map);

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

Я фиксирую Sensoridв функции ниже, и именно здесь я считаю, что проблема скрывается.Не могу понять, почему это происходит, и буду признателен за любую помощь в данный момент!

                function onClick() {
                let id = document.getElementById("popupText").innerText;

                urlen = urlen.replace(/([A-Z])\w+/, id);
                console.log(id);
                console.log(urlen);

                var x = document.getElementById("chart-area");
                if (x.style.display === "none") {
                    x.style.display = "block";
                } else {
                    x.style.display = "block";
                }

                map.scrollWheelZoom.disable();


                update();

            }

Там, где происходит создание нового идентификатора для обновления графа, это первые 4 строки под инициализацией функции.Остальное для блокировки карты для прокрутки колесика мыши, когда открыто всплывающее окно, чтобы пользователь мог прокручивать график и карту, когда они расположены друг над другом.

Как я уже сказал, это очень раздражает и неприемлемо для менякогда система вынуждена дважды щелкнуть мышью, и если вы не знаете, что это происходит, она может исказить ваше представление, поскольку оно обновляется, если вы просто щелкаете между люками, но вы получаете люк, по которому щелкали до текущего.

Пожалуйста, помогите мне.

1 Ответ

0 голосов
/ 22 февраля 2019

Когда происходит событие click, скорее всего, ваше новое всплывающее окно еще не открыто.Это объясняет, почему вы не нашли ни одного элемента с совпадающим идентификатором, или получили предыдущий.

Возможно, вам больше повезет, если вместо этого использовать событие "popupopen".

Но, во-первых, полагаясьпри извлечении идентификатора вашего датчика из всплывающего текста странный дизайн, когда у вас есть контроль над кодом страницы.

Более подходящий дизайн будет напрямую связывать идентификатор датчика с маркером или связанной с ним функцией, так что выможет легко получить его по событию нажатия маркера, вместо того, чтобы выполнять запросы DOM.

Например, в вашем onEachFeature: 

feature.properties.sensorid = sensorid

Затем в слушателе onClick: 

function onClick(event) {
  // the clicked layer is event.layer if the listener is on a Feature Group,
  // but is event.target if the listener is directly on that layer.
  const sensorid = event.layer.feature.properties.sensorid;
}
...