Adición de la barra de herramientas de dibujo a un mapa

Artículo
06/28/2023

Este artículo muestra cómo usar el módulo de herramientas de dibujo y mostrar la barra de herramientas de Dibujo en el mapa. El control de la barra de herramientas de dibujo la agrega en el mapa. Aprenderá a crear mapas con solo una y todas las herramientas de dibujo y cómo personalizar la representación de las formas de dibujo en el administrador de dibujos.

En el código siguiente crea una instancia del administrador de dibujos y muestra la barra de herramientas en el 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 obtener un ejemplo de trabajo completo que muestre cómo agregar una barra de herramientas de dibujo al mapa, consulte Agregar barra de herramientas de dibujo al mapa en los ejemplos de Azure Maps. Para obtener el código fuente de este ejemplo, consulte el código fuente Agregar barra de herramientas de dibujo al mapa.

Captura de pantalla que muestra la barra de herramientas de dibujo en un mapa.

En el código siguiente crea una instancia del administrador de dibujos y muestra la barra de herramientas solo con una herramienta de dibujo de polígono en el 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"]
        })
    });

En la captura de pantalla siguiente, se muestra un ejemplo de una instancia del administrador de dibujo que muestra la barra de herramientas con una sola herramienta de dibujo en el mapa:

Captura de pantalla que muestra una instancia del administrador de dibujos enseñando la barra de herramientas con solo una herramienta de dibujo de polígono en el mapa.

Cambiar el estilo de representación de dibujo

Se puede personalizar el estilo de las formas que se dibujan recuperando las capas subyacentes del administrador de dibujos con las funciones drawingManager.getLayers() y drawingManager.getPreviewLayers() y, después, estableciendo opciones en las capas individuales. Los controladores de arrastre que aparecen para las coordenadas al editar una forma son marcadores HTML. El estilo de los controladores de arrastre se puede personalizar pasando opciones de marcador HTML en las opciones dragHandleStyle y secondaryDragHandleStyle del administrador de dibujos.

El código siguiente obtiene las capas de representación del administrador de dibujos y modifica sus opciones para cambiar el estilo de representación del dibujo. En este caso, los puntos se representan con un icono de marcador azul. Las líneas son rojas y tienen cuatro píxeles de ancho. Los polígonos tienen el relleno verde y el contorno naranja. Después, cambia los estilos de los controladores de arrastre para que sean iconos cuadrados.

//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 obtener un ejemplo de trabajo completo que muestre cómo personalizar la representación de las formas de dibujo en el administrador de dibujo mediante el acceso a las capas de representación, consulte Cambiar el estilo de representación de dibujo en los ejemplos de Azure Maps. Para obtener el código fuente de este ejemplo, consulte el código fuente Cambiar el estilo de representación de dibujo.

Captura de pantalla que muestra diferentes formas de dibujo representadas en un mapa.

Nota

Cuando está en modo de edición, se pueden girar las formas. La rotación se admite desde geometrías MultiPoint, LineString, MultiLineString, Polygon, MultiPolygon y Rectangle. Las geometrías de punto y círculo no se pueden girar.