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

Question

Я пытаюсь отобразить всплывающее окно в 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, и я попытался просмотреть здесь и различные источники в Интернете, чтобы это исправить. Я надеюсь, что проблема только в том, что у меня неверно установлена ​​переменная описания и что я упускаю что-то простое.

Answer 1

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

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

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

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