Показать всплывающее окно на карте для выбранного элемента в боковом списке с помощью окна карты gl js - PullRequest
Новая
       121

Показать всплывающее окно на карте для выбранного элемента в боковом списке с помощью окна карты gl js

0 голосов
/ 07 августа 2020

Я следовал этому руководству «Фильтр объектов в представлении карты» и сумел адаптировать его к моим данным, которые представляют собой многоугольники, а не точки. не отображаются, когда я наведу указатель мыши на одно из мест, всплывающее окно не появится на карте с указанием места, как должно. Я считаю, что проблема заключается в том, что, поскольку это многоугольник, а не точка (пара координат), код не может отображать местоположение, ошибка в консоли: 

"Uncaught Error:` LngLatLike` argument must be specified as a LngLat instance, an object {lng: <lng>, lat: <lat>}, an object {lon: <lng>, lat: <lat>}, or an array of [<lng>, <lat>] "

Во всплывающем окне карты я изменил это от «.setLngLat (feature.geometry.coordinates)» до «.setLngLat (e.lngLat)», и он работал, но не во всплывающем окне в боковом меню. Я все еще начинаю изучать javascript и не смог найти решения, я думал об извлечении центроида из многоугольника, но не знаю, как это сделать.

код, который генерирует всплывающее окно: 

var prop = feature.properties;
var item = document.createElement('a');
item.href = prop.wikipedia;
item.target = '_blank';
item.textContent = prop.NM_UF + ' (' + prop.SIGLA_UF + ')';
item.addEventListener('mouseover', function () {
    // Highlight corresponding feature on the map
    popup
        .setLngLat(feature.geometry.coordinates)
        .setText(
            feature.properties.NM_UF +
            ' (' +
            feature.properties.SIGLA_UF +
            ')'
        )
        .addTo(map);
});
listingEl.appendChild(item);
    });

Вот код, похожий на код: https://codepen.io/hugonbgg/pen/PoNwWVj и отладка: https://codepen.io/hugonbgg/debug/PoNwWVj/

1 Ответ

1 голос
/ 07 августа 2020

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

Есть разные способы решить эту проблему ...

Быстро и грязно 

popup
    .setLngLat(feature.geometry.coordinates[0][0]) //just add [0][0]
    .setText(
        feature.properties.NM_UF +
        ' (' +
        feature.properties.SIGLA_UF +
        ')'
    )
    .addTo(map);

Это просто работает, но позиционирует всплывающую подсказку в первой точке первого многоугольника ... не определенно лучший, но он работает.

Второй метод - это то, что я сделал бы ...

Найдите центр любого объекта с помощью метода

Я создал этот кодовый код на основе вашего с этим изменением, чтобы включить метод getFeatureCenter. 

function getFeatureCenter(feature) {
    let center = [];
    let latitude = 0;
    let longitude = 0;
    let height = 0;
    let coordinates = [];
    feature.geometry.coordinates.forEach(function (c) {
        let dupe = [];
        if (feature.geometry.type === "MultiPolygon")
            dupe.push(...c[0]); //deep clone to avoid modifying the original array
        else 
            dupe.push(...c); //deep clone to avoid modifying the original array
        dupe.splice(-1, 1); //features in mapbox repeat the first coordinates at the end. We remove it.
        coordinates = coordinates.concat(dupe);
    });
    if (feature.geometry.type === "Point") {
        center = coordinates[0];
    }
    else {
        coordinates.forEach(function (c) {
            latitude += c[0];
            longitude += c[1];
        });
        center = [latitude / coordinates.length, longitude / coordinates.length];
    }

    return center;
}

, а затем изменить в вашем вызове всплывающее окно 

popup
    .setLngLat(getFeatureCenter(feature)) //call the new method and enjoy!
    .setText(
        feature.properties.NM_UF +
        ' (' +
        feature.properties.SIGLA_UF +
        ')'
    )
    .addTo(map);

Это найдет центр функций независимо, если это Point, Polygon или MultiPolygon ...

введите описание изображения здесь

PS. - Если этот ответ решает ваш вопрос, отметьте его как «ответ принят» , таким образом, это также поможет другим пользователям узнать, что это правильное решение.

...