Добавление панели инструментов рисования на карту

Статья
06/07/2023

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

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

//Create an instance of the drawing manager and display the drawing toolbar.
drawingManager = new atlas.drawing.DrawingManager(map, {
        toolbar: new atlas.control.DrawingToolbar({
            position: 'top-right',
            style: 'dark'
        })
    });

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

Снимок экрана: панель инструментов рисования на карте.

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

//Create an instance of the drawing manager and display the drawing toolbar with polygon drawing tool.
drawingManager = new atlas.drawing.DrawingManager(map, {
        toolbar: new atlas.control.DrawingToolbar({
            position: 'top-right',
            style: 'light',
            buttons: ["draw-polygon"]
        })
    });

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

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

Изменение стиля отрисовки изображений

Стиль рисуемых фигур можно настраивать. Это делается путем извлечения нижележащих слоев диспетчера рисунков с помощью функций drawingManager.getLayers() и drawingManager.getPreviewLayers() с последующей настройкой параметров для отдельных слоев. Маркеры перетаскивания, которые отображаются для координат при редактировании фигуры, являются маркерами HTML. Стиль маркеров перетаскивания можно настроить, передав параметры маркера HTML в параметры dragHandleStyle и secondaryDragHandleStyle диспетчера рисунков.

Следующий код служит для получения слоев отрисовки из диспетчера рисунков и изменения их параметров, чтобы изменить стиль отрисовки изображения. В этом случае точки отображаются синим значком маркера. Линии имеют красный цвет и ширину в четыре пикселя. Многоугольник имеет зеленый цвет заливки и оранжевый контур. После этого стили маркеров перетаскивания изменяются, и значки становятся квадратными.

//Get rendering layers of drawing manager.
var layers = drawingManager.getLayers();

//Change the icon rendered for points.
layers.pointLayer.setOptions({
    iconOptions: {
        image: 'marker-blue'
    }
});

//Change the color and width of lines.
layers.lineLayer.setOptions({
    strokeColor: 'red',
    strokeWidth: 4
});

//Change fill color of polygons.
layers.polygonLayer.setOptions({
    fillColor: 'green'
});

//Change the color of polygon outlines.
layers.polygonOutlineLayer.setOptions({
    strokeColor: 'orange'
});


//Get preview rendering layers from the drawing manager and modify line styles to be dashed.
var previewLayers = drawingManager.getPreviewLayers();
previewLayers.lineLayer.setOptions({ strokeColor: 'red', strokeWidth: 4, strokeDashArray: [3,3] });
previewLayers.polygonOutlineLayer.setOptions({ strokeColor: 'orange', strokeDashArray: [3, 3] });

//Update the style of the drag handles that appear when editing.
drawingManager.setOptions({
    //Primary drag handle that represents coordinates in the shape.
    dragHandleStyle: {
        anchor: 'center',
        htmlContent: '<svg width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" style="cursor:pointer"><rect x="0" y="0" width="15" height="15" style="stroke:black;fill:white;stroke-width:4px;"/></svg>',
        draggable: true
    },

    //Secondary drag handle that represents mid-point coordinates that users can grab to add new coordinates in the middle of segments.
    secondaryDragHandleStyle: {
        anchor: 'center',
        htmlContent: '<svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" style="cursor:pointer"><rect x="0" y="0" width="10" height="10" style="stroke:white;fill:black;stroke-width:4px;"/></svg>',
        draggable: true
    }
});

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

Снимок экрана, показывающий различные фигуры рисунка, отображаемые на карте.

Примечание

В режиме редактирования фигуры можно поворачивать. Поворот поддерживается для геометрических объектов типа MultiPoint, LineString, MultiLineString, Polygon, MultiPolygon и Rectangle. Поворачивать геометрические объекты Point и Circle нельзя.