Werkbalk Hulpmiddelen voor tekenen toevoegen aan een kaart

In dit artikel wordt beschreven hoe u de module Hulpmiddelen voor tekenen gebruikt en de werkbalk Tekenen op de kaart weergeeft. Met het besturingselement Werkbalk Tekenen wordt de tekenwerkbalk toegevoegd aan de kaart. U leert hoe u kaarten maakt met slechts één en alle tekenhulpmiddelen en hoe u de weergave van de tekenvormen kunt aanpassen in Tekenbeheer.

Tekenwerkbalk toevoegen

Met de volgende code wordt een exemplaar van tekenbeheer gemaakt en wordt de werkbalk op de kaart weergegeven.

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

Zie Werkbalk tekenen toevoegen om toe te wijzen in de Azure Maps Voorbeelden voor een volledig werkend voorbeeld dat laat zien hoe u een tekenwerkbalk aan uw kaart toevoegt. Zie Werkbalk Tekenen toevoegen om broncode toe te wijzen voor de broncode voor dit voorbeeld.

Weergegeven werkbalkopties beperken

Met de volgende code wordt een exemplaar van tekenbeheer gemaakt en wordt de werkbalk met alleen een tekenhulpmiddel voor veelhoeken op de kaart weergegeven.

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

In de volgende schermafbeelding ziet u een voorbeeld van een exemplaar van de tekenbeheerder waarin de werkbalk met slechts één tekenhulpmiddel op de kaart wordt weergegeven:

De tekenweergavestijl wijzigen

De stijl van de shapes die worden getekend, kan worden aangepast door de onderliggende lagen van tekenbeheer op te halen met behulp van de drawingManager.getLayers() functies en drawingManager.getPreviewLayers() en vervolgens opties in te stellen op de afzonderlijke lagen. De sleepgrepen die worden weergegeven voor coördinaten bij het bewerken van een shape, zijn HTML-markeringen. De stijl van de sleepgrepen kan worden aangepast door HTML-markeringsopties door te geven aan de dragHandleStyle opties en secondaryDragHandleStyle van de tekenmanager.

Met de volgende code worden de renderinglagen opgehaald uit tekenbeheer en worden de opties gewijzigd om de weergavestijl voor tekenen te wijzigen. In dit geval worden punten weergegeven met een blauw markeringspictogram. Lijnen zijn rood en vier pixels breed. Veelhoeken hebben een groene opvulkleur en een oranje omtrek. Vervolgens worden de stijlen van de sleepgrepen gewijzigd in vierkante pictogrammen.

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

Zie Weergavestijl voor tekenen wijzigen in de Azure Maps voorbeelden voor een volledig werkend voorbeeld waarin wordt gedemonstreerd hoe u de weergave van de tekenshapes kunt aanpassen in tekenbeheer door toegang te krijgen tot de renderinglagen. Zie Broncode van tekenweergavestijl wijzigen voor de broncode voor dit voorbeeld.

Notitie

In de bewerkingsmodus kunnen shapes worden gedraaid. Rotatie wordt ondersteund in de geometrieën MultiPoint, LineString, MultiLineString, Polygon, MultiPolygon en Rechthoek. Punt- en cirkelgeometrieën kunnen niet worden gedraaid.

Volgende stappen

Meer informatie over het gebruik van meer functies van de module Hulpmiddelen voor tekenen:

Vormgegevens ophalen

Reageren op tekengebeurtenissen

Interactietypen en sneltoetsen

Meer informatie over de klassen en methoden die worden gebruikt in dit artikel:

Kaart

Werkbalk Tekenen

Tekenbeheer