Adicionar uma barra de ferramentas de ferramentas de desenho em um mapa

Este artigo mostra como usar o módulo Ferramentas de Desenho e exibir a barra de ferramentas desenho no mapa. O controle de barra de ferramentas de desenho adiciona a barra de ferramentas de desenho ao mapa. Você aprenderá a criar mapas com apenas uma e todas as ferramentas de desenho e como personalizar a renderização das formas de desenho no gerenciador de desenho.

Adicionar barra de ferramentas de desenho

O código a seguir cria uma instância do gerenciador de desenho e exibe a barra de ferramentas no mapa.

//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'
        })
    });

Para obter um exemplo de trabalho completo que demonstra como adicionar uma barra de ferramentas de desenho ao mapa, confira Adicionar barra de ferramentas de desenho ao mapa nos Exemplos do Azure Mapas. Para obter o código-fonte deste exemplo, confira Adicionar barra de ferramentas de desenho ao código-fonte do mapa.

Opções de barra de ferramentas de limite exibidas

O código a seguir cria uma instância do gerenciador de desenho e exibe a barra de ferramentas com apenas uma ferramenta de desenho de polígono no mapa.

//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"]
        })
    });

A captura de tela a seguir mostra um exemplo de uma instância do gerenciador de desenho que exibe a barra de ferramentas com apenas uma única ferramenta de desenho no mapa:

Alterar o estilo de renderização do desenho

O estilo das formas que são desenhadas pode ser personalizado pela recuperação das camadas subjacentes do gerenciador de desenho usando as funções drawingManager.getLayers() e drawingManager.getPreviewLayers() e pela definição das opções nas camadas individuais. Os identificadores de arrastar que aparecem para coordenadas ao editar uma forma são marcadores HTML. O estilo dos identificadores de arrastar podem ser personalizados passando opções de marcador HTML para as opções dragHandleStyle e secondaryDragHandleStyle do gerenciador de desenho.

O código a seguir obtém as camadas de renderização do Gerenciador de desenho e modifica suas opções para alterar o estilo de renderização para desenho. Nesse caso, os pontos são renderizados com um ícone de marcador azul. As linhas são vermelhas e têm quatro pixels de largura. Polígonos têm um preenchimento na cor ver e um contorno em laranja. Em seguida, ele altera os estilos dos identificadores de arrastar para ícones quadrados.

//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
    }
});  

Para obter um exemplo de trabalho completo que demonstra como personalizar a renderização das formas de desenho no gerenciador de desenho acessando as camadas de renderização, confira Alterar estilo de renderização de desenho nos Exemplos do Azure Mapas. Para o código-fonte deste exemplo, confira Alterar o código-fonte de estilo da renderização do desenho.

Observação

No modo de edição, as formas podem ser giradas. Há suporte para a rotação das geometrias MultiPoint, LineString, MultiLineString, Polygon, MultiPolygon e Rectangle. As geometrias de ponto e círculo não podem ser giradas.

Próximas etapas

Saiba como usar mais recursos do módulo de ferramentas de desenho:

Obter dados da forma

Reagir a eventos de desenho

Tipos de interação e atalhos de teclado

Saiba mais sobre as classes e métodos usados neste artigo:

Map

Barra de ferramentas de desenho

Gerenciador de desenho