Блог

Главная - Вопросы по программированию - Как перетащить полигон в mapbox-gl-js?

Как перетащить полигон в mapbox-gl-js?

#mapping #mapbox #geojson #mapbox-gl-js

#отображение #mapbox #geojson #mapbox-gl-js

Вопрос:

У меня есть карта с несколькими полигонами. Полигоны необходимо перемещать / обновлять при нажатии / перетаскивании пользователем. Функциональность, которую я хочу, такая же, как в этом примере: https://www.mapbox.com/mapbox-gl-js/example/drag-a-point /

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

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

Комментарии:

1. В поисках той же проблемы, нашли ли вы какое-либо решение @N Altun

2. К сожалению, я этого не сделал.

Ответ №1:

  1. используется draw.selectionchange для отслеживания выбора / отмены выбора полигона. Запомните выбранный полигон ( features свойство события, скорее всего, это features[0] так, поскольку выбранный объект находится сверху) в переменной; если вам нужен точный тип, для полигона это GeoJSON.Feature<GeoJSON.Polygon> ;
  2. использование draw.render — это соответствует, в частности, перетаскиванию: проверьте — если переменная не равна нулю — требуемую информацию о полигоне; возможно, вам потребуется дополнительно проверить текущий режим рисования ( simple_select или direct_select ), чтобы исключить неправильный запуск. Делайте здесь все, что вам нужно;
  3. использование draw.update : если action есть move , то это событие «конец рисования» полигона (по-видимому, вы можете использовать запоминаемую переменную, но у вас также есть features свойство event в вашем распоряжении). Делайте здесь все, что вам нужно.

Комментарии:

1. Я буду следить за этим. Спасибо.

2. Привет @NAltun работает ли ответ Александра? Если да, у вас есть пример?

3. @ToniBCN к сожалению, нет примера, который я мог бы опубликовать публично. У вас такая же проблема?

4. @NAltun Я создал jsfiddle на основе примера из mapbox перетащите точку jsfiddle.net/dt1xsqk3/4 но это не работает

Ответ №2:

@Toni BCN ваша версия работает, вам просто нужно убедиться, что вы передаете координаты в правильном формате (количество скобок сбивает с толку):

 let north = coords.lat   0.17;
let west = coords.lng - 0.32;
let south = coords.lat - 0.17;
let east = coords.lng   0.32;

geojson.features[0].geometry.coordinates = [[
    [west, north],
    [west, south],
    [east, south],
    [east, north],
    [west, north]
 ]];

 map.getSource('pol').setData(geojson);

Вот скрипка: https://jsfiddle.net/d5ynupb3 /

Метки: