События инструментов рисования

Статья
09/03/2024

При использовании инструментов рисования на карте полезно реагировать на определенные события, когда пользователь рисует на карте. В этой таблице перечислены все события, поддерживаемые классом DrawingManager .

Мероприятие	Description
`drawingchanged`	Запускается при добавлении или изменении любой координаты в фигуре.
`drawingchanging`	Срабатывает при отображении любой координаты предварительного просмотра для фигуры. Например, это событие выполняется несколько раз, так как координата перетаскивается.
`drawingcomplete`	Возникает, когда фигура завершает рисование или выходит из режима редактирования.
`drawingerased`	Срабатывает, когда фигура удаляется из диспетчера чертежей в режиме `erase-geometry`.
`drawingmodechanged`	Запускается при изменении режима рисования. Новый режим рисования передается в обработчик событий.
`drawingstarted`	Возникает, когда пользователь начинает рисовать фигуру или помещает фигуру в режим правки.

Полный рабочий пример отображения данных из источника векторной плитки на карте см. в разделе " События средств рисования" в примерах Azure Maps. В этом примере вы можете нарисовать фигуры на карте и наблюдать за событиями. Исходный код для этого примера см. в разделе "События инструментов рисования".

На следующем рисунке показан снимок экрана с полным рабочим примером, в котором показано, как работают события в модуле средств рисования.

Примеры

Рассмотрим некоторые распространенные сценарии, в которых используются события инструментов рисования.

Выбор точек в области многоугольника

Этот код демонстрирует, как отслеживать событие рисования фигур пользователем. В этом примере код отслеживает многоугольники, прямоугольники и круги. Затем он определяет, какие точки данных на карте находятся в рисуемой области. Событие drawingcomplete используется для активации логики выбора. В логике выбора код выполняет перебор всех точек данных на карте. Он проверяет, существует ли пересечение точки и области рисования фигуры. В этом примере для выполнения вычисления пространственного пересечения используется библиотека Turf.js с открытым исходным кодом.

Полный рабочий пример использования инструментов рисования для рисования многоугольников на карте с точками в них, которые можно выбрать, см. в разделе "Выбор данных в рисуемой области многоугольника" в примерах Azure Maps. Исходный код для этого примера см. в разделе "Выбор данных в рисуемой области многоугольника".

Рисование и поиск в области многоугольника

Этот код выполняет поиск точек интереса в области фигуры после того, как пользователь завершил рисование фигуры. Событие drawingcomplete используется для активации логики поиска. Если пользователь рисует прямоугольник или многоугольник, выполняется поиск в геометрии. При рисовании окружности точки радиуса и центра используются для выполнения поиска точки интереса. Событие drawingmodechanged используется для определения того, когда пользователь переключается в режим рисования, и это событие очищает холст.

Полный рабочий пример использования инструментов рисования для поиска точек интересов в рисованных областях см. в разделе "Рисование и поиск многоугольников " в примерах Azure Maps. Исходный код для этого примера см. в разделе [Пример кода области рисования и поиска].

Создание измерительного инструмента

В следующем коде показано, как можно использовать события рисования для создания средства измерения. drawingchanging используется для отслеживания фигуры по мере ее рисования. По мере того как пользователь перемещает мышь, выполняется вычисление размеров фигуры. Событие drawingcomplete используется для выполнения окончательного вычисления фигуры после завершения рисования. Событие drawingmodechanged используется, чтобы определить, когда пользователь переключается в режим рисования. Кроме того, событие drawingmodechanged очищает холст рисования и удаляет старую информацию об измерении.

Полный рабочий пример использования средств рисования для измерения расстояний и областей см. в статье "Создание средства измерения в примерах Azure Maps". Исходный код для этого примера см. в разделе "Создание примера средства измерения".