Mapbox GL JS: всплывающее окно с внешним JSON - PullRequest
Новая
       16

Mapbox GL JS: всплывающее окно с внешним JSON

0 голосов
/ 09 сентября 2018

Я пытаюсь отобразить всплывающее окно в Mapbox GL JS, когда пользователь щелкает многоугольник (это окно с предупреждением о погоде во время предупреждения о флуд-потоке).

Я использовал этот пример изMapbox в качестве базы и -

Это мой файл JSON , из которого я пытаюсь получить данные.

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

Мой код, приведенный ниже, был изменен из примера.Я пытаюсь загрузить «описание» каждого многоугольника: (Моя карта называется «topleftmapbox», а идентификатор JSON - «FFWWarning») 

// When a click event occurs on a feature in the places layer, open a popup at the
    // location of the feature, with description HTML from its properties.
    topleftmapbox.on('click', 'FFWWarning', function (e) {
        var coordinates = e.features[0].geometry.coordinates.slice();
        var description = e.features[0].description;

        // Ensure that if the map is zoomed out such that multiple
        // copies of the feature are visible, the popup appears
        // over the copy being pointed to.
        while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
            coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
        }

        new mapboxgl.Popup()
            .setLngLat(coordinates)
            .setHTML(description)
            .addTo(topleftmapbox);
    });

    // The following code below runs correctly and changes the cursor on mouseover.

    topleftmapbox.on('mouseenter', 'FFWWarning', function () {
        topleftmapbox.getCanvas().style.cursor = 'pointer';
    });

    // Change it back to a pointer when it leaves.
    topleftmapbox.on('mouseleave', 'FFWWarning', function () {
        topleftmapbox.getCanvas().style.cursor = '';
    });

У меня такое ощущение, что моя проблема где-то в этомчасть кода: 

    var coordinates = e.features[0].geometry.coordinates.slice();
    var description = e.features[0].description;

Я все еще новичок в Mapbox, и я попытался просмотреть здесь и различные источники в Интернете, чтобы это исправить.Я надеюсь, что проблема только в том, что у меня неверно установлена ​​переменная описания и что я упускаю что-то простое.

1 Ответ

0 голосов
/ 11 сентября 2018

Я отладил предоставленный вами код и обнаружил, что переменная coordinates содержит объект, имеющий массив lat-lng.

Изменение этой части должно решить проблему. 

var coordinates = e.features[0].geometry.coordinates[0][0].slice();

В coordinates[0][0] второй индекс определяет положение всплывающего окна.
Вот рабочий код. https://jsbin.com/suzapug/1/edit?html,output

...