Листовка многоугольника нарисовать странную форму

Question

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

    function fetchAreas(){
        const url='http://localhost:1337/api/areas';
        fetch(url)
        .then((res) => {
            return res.json();
        })
        .then((data) => {
            console.log(data);

            for(d in data){
                var polvertices = [];
                for(c in data[d].Coords)
                    polvertices.push([data[d].Coords[c].Latitude, data[d].Coords[c].Longitude]);

                L.polygon(polvertices, {
                    color: 'red',
                    fillColor: '#f03',
                    fillOpacity: 0.5
                }).addTo(map);
            }
        });
    }

Как результат Я получаю следующая странная форма :

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

Так что теперь мне интересно, как я могу показать это правильно или я что-то упустил в мой код, потому что пример листовки не показывает слишком много.

Спасибо за вашу помощь.

Answer 1

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

I значит, если вам нужно нарисовать rectangle, как это

A +--------------+ B
  |              |
  |              |
D +--------------+ C

, используя функцию

L.polygon(verticesArray).addTo(map);

, вы должны добавить vertices ([lat, lon]) в правильный порядок , возвращаясь к прямоугольнику, правильный порядок должен быть [A, B, C, D].

Несоблюдение порядка может привести к ошибкам , как в моем исходном вопросе .