Aggiungere una barra degli strumenti di disegno a una mappa

Articolo
08/30/2024

Questo articolo illustra come usare il modulo Strumenti di disegno e visualizzare la barra degli strumenti di disegno sulla mappa. Il controllo Barra degli strumenti di disegno aggiunge la barra degli strumenti di disegno sulla mappa. Questo articolo illustra come creare mappe con solo uno o tutti gli strumenti di disegno e come personalizzare il rendering delle forme di disegno nel gestore disegno.

Il codice seguente crea un'istanza del gestore disegno e visualizza la barra degli strumenti sulla mappa.

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

Per un esempio reale completo che illustra come aggiungere una barra degli strumenti di disegno alla mappa, vedere Aggiungere la barra degli strumenti di disegno per eseguire il mapping negli esempi di Mappe di Azure. Per il codice sorgente di questo esempio, vedere Aggiungere una barra degli strumenti di disegno al codice sorgente della mappa.

Il codice seguente crea un'istanza del gestore disegno e visualizza la barra degli strumenti con uno strumento di disegno di poligoni su una mappa.

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

Lo screenshot seguente mostra un esempio di un'istanza del gestore disegno che mostra la barra degli strumenti con un solo strumento di disegno sulla mappa:

Modificare lo stile di rendering del disegno

Lo stile delle forme disegnate può essere personalizzato recuperando i livelli sottostanti del gestore disegno utilizzando le funzioni drawingManager.getLayers() e drawingManager.getPreviewLayers() e quindi impostando le opzioni sui singoli livelli. Gli handle di trascinamento visualizzati per le coordinate durante la modifica di una forma sono indicatori HTML. Lo stile degli handle di trascinamento può essere personalizzato passando le opzioni del marcatore HTML nelle opzioni di dragHandleStyle e secondaryDragHandleStyle di gestore disegno.

Il codice seguente ottiene i livelli di rendering dal gestore disegno e modifica le relative opzioni per modificare lo stile di rendering per il disegno. In questo caso, viene eseguito il rendering dei punti con un'icona marcatore blu. Le linee sono rosse e larghe quattro pixel. I poligoni hanno un colore di riempimento verde e un contorno arancione. Ciò modifica quindi gli stili degli handle di trascinamento in modo che siano icone quadrate.

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

Per un esempio reale completo che illustra come personalizzare il rendering delle forme di disegno nel gestore disegno accedendo ai livelli di rendering, vedere Modificare lo stile di rendering del disegno negli esempi di Mappe di Azure. Per il codice sorgente di questo esempio, vedere Modificare il codice sorgente dello stile di rendering del disegno.

Nota

Quando si usa la modalità di modifica, le forme possono essere ruotate. La rotazione è supportata dalle geometrie MultiPoint, LineString, MultiLineString, Polygon, MultiPolygon e Rectangle. Le geometrie punto e cerchio non possono essere ruotate.