Использование модуля средств рисования

Статья
06/30/2023

Веб-пакет SDK Azure Maps предоставляет модуль средств рисования. Этот модуль упрощает Рисование и изменение фигур на карте с помощью устройства ввода, такого как мышь или сенсорный экран. Основным классом этого модуля является Диспетчер рисунков. Диспетчер рисунков предоставляет все возможности, необходимые для рисования и редактирования фигур на карте. Его можно использовать напрямую и интегрировать с настраиваемым пользовательским Интерфейсом панели инструментов. Можно также использовать встроенный класс DrawingToolbar.

Загрузка модуля средств рисования на веб-страницу

Создайте новый HTML-файл и реализуйте карту как обычно.
Загрузите модуль инструментов для рисования Azure Maps. Его можно загрузить одним из двух способов:
- Используйте глобально размещенную версию сети доставки содержимого Azure модуля служб Azure Maps. Добавьте ссылку на JavaScript и CSS в <head> элементе файла:
```
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.js"></script>
```
- Также можно загрузить модуль средств рисования для исходного кода веб-пакета SDK Azure Maps с помощью пакета Azure-Maps-Drawing-Tools NPM, а затем разместить его в приложении. Этот пакет также включает определения TypeScript. Используйте следующую команду:
  
  npm install azure-maps-drawing-tools
  
  Затем импортируйте JavaScript в исходном файле:
```
import * as drawing from "azure-maps-drawing-tools";
```
  Вам также потребуется внедрить CSS для правильного отображения различных элементов управления. Если вы используете пакет JavaScript для упаковки зависимостей и упаковки кода, ознакомьтесь с документацией пакета по его завершении. Для webpack обычно это делается с помощью сочетания style-loader и css-loader документации, доступной в загрузчике стилей.
  
  Чтобы начать, установите загрузчик стилей и css-loader:
```
npm install --save-dev style-loader css-loader
```
  В исходном файле импортируйте atlas-drawing.min.css:
```
import "azure-maps-drawing-tools/dist/atlas-drawing.min.css";
```
  Затем добавьте загрузчики в часть правил модуля конфигурации webpack:
```
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
};
```
  Дополнительные сведения см. в статье "Использование пакета npm для управления картой Azure Maps".

Использование диспетчера рисунков напрямую

После загрузки модуля инструменты рисования в приложение можно включить возможности рисования и редактирования с помощью диспетчера рисунков. Можно указать параметры для диспетчера рисунков при его создании или использовать drawingManager.setOptions() функцию.

Установка режима рисования

Следующий код создает экземпляр диспетчера рисунков и устанавливает параметр режима рисования.

//Create an instance of the drawing manager and set drawing mode.
drawingManager = new atlas.drawing.DrawingManager(map,{
    mode: "draw-polygon"
});

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

Снимок экрана: карта с центральным парком в Нью-Йорке, где менеджер рисунков демонстрируется линией рисования.

Установка типа взаимодействия

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

click — добавляет координаты нажатием мыши или касанием.
freehand — добавляет координаты перетаскиванием указателя мыши или пальцем.
hybrid — добавляет координаты перетаскиванием либо нажатием мыши или касанием.

Следующий код включает режим рисования многоугольника и задает тип взаимодействия рисования, которым должен соответствовать Диспетчер рисунков freehand.

//Create an instance of the drawing manager and set drawing mode.
drawingManager = new atlas.drawing.DrawingManager(map,{
    mode: "draw-polygon",
    interactionType: "freehand"
});

Настройка параметров рисования

В предыдущих примерах было показано, как настроить параметры рисования при создании экземпляра диспетчера рисунков. Параметры диспетчера рисунков также можно задать с помощью drawingManager.setOptions() функции.

Параметры диспетчера рисования можно использовать для проверки настройки всех параметров диспетчера рисования с помощью setOptions функции. Исходный код этого примера см. в разделе "Параметры диспетчера рисования".

Снимок экрана: карта Сиэтла с панелью слева с параметрами диспетчера рисования, которые можно выбрать, чтобы увидеть эффекты, которые они делают на карте.

Перевод фигуры в режим правки

Чтобы с помощью программных средств перевести существующую фигуру в режим правки, ее нужно передать в функцию edit диспетчера рисунков. Если это фигура GeoJSON, перед передачей ее нужно поместить в класс atlas.Shape.

Чтобы с помощью программных средств вывести фигуру из режима правки, установите для диспетчера рисунков режим idle.

//If you are starting with a GeoJSON feature, wrap it with the atlas.Shape class.
var feature = { 
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [0,0]
        },
    "properties":  {}
};

var shape = new atlas.Shape(feature);

//Pass the shape into the edit function of the drawing manager.
drawingManager.edit(shape);

//Later, to programmatically take shape out of edit mode, set mode to idle. 
drawingManager.setOptions({ mode: 'idle' });

Примечание.

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

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

//The shape(s) you want to add to the drawing manager so 
var shape = new atlas.Shape(feature);

//Retrieve the data source from the drawing manager.
var source = drawingManager.getSource();

//Add your shape.
source.add(shape);

//Alternatively, load in a GeoJSON feed using the sources importDataFromUrl function.
source.importDataFromUrl('yourFeatures.json');

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

Фигура	Точки правки	Поворот	Удаление фигуры
Point	✓		✓
LineString	✓	✓	✓
Многоугольник	✓	✓	✓
MultiPoint		✓	✓
MultiLineString		✓	✓
MultiPolygon		✓	✓
Круг	✓		✓
Прямоугольник	✓	✓	✓