Показать длину многоугольника в Mapbox GL JS draw

Question

Я новичок в кодировании в javascript et c. Мой фон - это немного ноу-хау в Python.

Я следую этому примеру https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/ того, как рисовать многоугольник в Mapbox, а затем показываю площадь многоугольника (ов). ).

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

Было бы замечательно, если бы метка длины могла быть показана рядом с каждой стороной многоугольника на карте. Любые советы, как это сделать? Буду очень признателен, спасибо!

Answer 1

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

Итак, вам нужно извлечь 4 или более точек, которые образуют многоугольник, как только он нарисован из data (который будет иметь форму многоугольника geo json). Затем, используя эти точки в качестве входных данных и используя вспомогательный параметр length , вы можете получить длины каждой стороны многоугольника.

Если вы хотите показать эти длины выше средней точки каждой соответствующей линии многоугольника, вы можете использовать вспомогательную среднюю точку , чтобы получить координаты, по которым вы могли бы создать маркер с этой информацией. Для создания маркеров вы можете проверить этот пример (хотя в вашем случае вы, вероятно, захотите установить флаг draggeable в значение false).

Надеюсь, это поможет:)