Přidání panelu nástrojů nástroje kreslení do mapy

V tomto článku se dozvíte, jak používat modul Nástroje kreslení a zobrazit panel nástrojů kreslení na mapě. Ovládací prvek Kreslení panel nástrojů přidá panel nástrojů kreslení do mapy. Naučíte se vytvářet mapy jenom s jedním a všemi nástroji kreslení a jak přizpůsobit vykreslování kreslicích obrazců ve správci kreslení.

Přidání panelu nástrojů pro kreslení

Následující kód vytvoří instanci správce výkresu a zobrazí panel nástrojů na mapě.

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

Kompletní funkční ukázku, která ukazuje, jak přidat do mapy panel nástrojů kreslení, najdete v tématu Přidání panelu nástrojů kreslení do mapy v Azure Maps Ukázky. Zdrojový kód pro tuto ukázku najdete v tématu Přidání panelu nástrojů kreslení pro mapování zdrojového kódu.

Omezit zobrazené možnosti panelu nástrojů

Následující kód vytvoří instanci správce výkresu a zobrazí panel nástrojů s nástrojem pro kreslení mnohoúhelníku na mapě.

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

Následující snímek obrazovky ukazuje ukázku instance správce výkresu, která zobrazuje panel nástrojů s jediným nástrojem kreslení na mapě:

Změna stylu vykreslování výkresu

Styl nakreslených obrazců lze přizpůsobit načtením podkladových vrstev správce výkresu pomocí drawingManager.getLayers() funkcí a a drawingManager.getPreviewLayers() následným nastavením možností pro jednotlivé vrstvy. Úchyty pro přetažení, které se zobrazí pro souřadnice při úpravě obrazce, jsou značky HTML. Styl úchytů lze přizpůsobit předáním možností značky HTML do dragHandleStyle možností a secondaryDragHandleStyle správce výkresu.

Následující kód získá vrstvy vykreslování ze správce výkresu a upraví jejich možnosti pro změnu stylu vykreslování výkresu. V tomto případě se body vykreslují pomocí ikony modré značky. Čáry jsou červené a široké čtyři pixely. Mnohoúhelníky mají zelenou barvu výplně a oranžový obrys. Potom změní styly úchytů pro přetažení na čtvercové ikony.

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

Kompletní funkční ukázku, která ukazuje, jak přizpůsobit vykreslování obrazců výkresu ve správci výkresu pomocí přístupu k vykreslovací vrstvě, najdete v tématu Změna stylu vykreslování výkresu v Azure Maps Ukázky. Zdrojový kód pro tuto ukázku najdete v tématu Změna zdrojového kódu stylu vykreslování výkresu.

Poznámka

V režimu úprav se dají obrazce otáčet. Otáčení se podporuje z geometrií MultiPoint, LineString, MultiLineString, Polygon, MultiPolygon a Rectangle. Geometrie bodů a kruhů nelze otáčet.

Další kroky

Naučte se používat další funkce modulu nástroje kreslení:

Získání dat tvaru

Reagovat na události vykreslování

Typy interakcí a klávesové zkratky

Další informace o třídách a metodách použitých v tomto článku:

Mapa

Panel nástrojů Kreslení

Správce výkresu