Lägg till verktygsfältet för ritverktyg för att mappa

Artikel
08/30/2024

Den här artikeln visar hur du använder modulen Ritverktyg och visar verktygsfältet på kartan. Verktygsfältskontrollen Rita lägger till verktygsfältet på kartan. Du lär dig hur du skapar kartor med bara ett och alla ritverktyg och hur du anpassar återgivningen av ritformerna i ritningshanteraren.

Följande kod skapar en instans av ritningshanteraren och visar verktygsfältet på kartan.

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

Ett fullständigt arbetsexempel som visar hur du lägger till ett verktygsfält för ritning på kartan finns i Lägga till verktygsfält för ritning i Azure Maps-exempel. Källkoden för det här exemplet finns i Lägg till verktygsfält för ritning för att mappa källkod.

Följande kod skapar en instans av ritningshanteraren och visar verktygsfältet med bara ett polygonritningsverktyg på kartan.

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

Följande skärmbild visar ett exempel på en instans av ritningshanteraren som visar verktygsfältet med bara ett enda ritverktyg på kartan:

Ändra ritningsstil

Formatmallen för de former som ritas kan anpassas genom att hämta de underliggande lagren i ritningshanteraren med hjälp drawingManager.getLayers() av funktionerna och drawingManager.getPreviewLayers() sedan ange alternativ för de enskilda lagren. Dra referenser som visas för koordinater när du redigerar en form är HTML-markörer. Formatmallen för draghandtagen kan anpassas genom att skicka HTML-marköralternativ till dragHandleStyle ritningshanterarens alternativ och secondaryDragHandleStyle .

Följande kod hämtar återgivningsskikten från ritningshanteraren och ändrar deras alternativ för att ändra renderingsformat för ritning. I det här fallet återges punkter med en blå markörikon. Linjerna är röda och fyra bildpunkter breda. Polygoner har en grön fyllningsfärg och en orange kontur. Sedan ändras formatmallarna för drahandtagen till kvadratikoner.

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

Ett fullständigt arbetsexempel som visar hur du anpassar återgivningen av ritningsformerna i ritningshanteraren genom att komma åt återgivningsskikten finns i Ändra ritningsrenderingsformat i Azure Maps-exempel. Källkoden för det här exemplet finns i Ändra källkod för ritningsrenderingsformat.

Kommentar

När formerna är i redigeringsläge kan de roteras. Rotation stöds från geometrier för MultiPoint, LineString, MultiLineString, Polygon, MultiPolygon och Rektangel. Punkt- och cirkelgeometrier kan inte roteras.