在地图中添加绘图工具的工具栏

你当前正在访问 Microsoft Azure Global Edition 技术文档网站。如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

项目
07/19/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 示例中的更改绘图渲染样式。有关此示例的源代码，请参阅更改绘图渲染样式源代码。

显示地图上渲染的不同绘图形状的屏幕截图。