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

Článek
08/30/2024

Tento článek ukazuje, jak používat modul Nástroje kreslení a zobrazit panel nástrojů výkresu na mapě. Ovládací prvek Panel nástrojů Kreslení přidá na mapě panel nástrojů výkresu. Naučíte se vytvářet mapy pouze s jedním a všemi nástroji kreslení a jak přizpůsobit vykreslování obrazců výkresu ve správci výkresu.

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 do mapy přidat panel nástrojů výkresu, najdete v tématu Přidání panelu nástrojů výkresu pro mapování v ukázkách Azure Maps. Zdrojový kód pro tuto ukázku naleznete v tématu Přidání panelu nástrojů výkresu pro mapování zdrojového kódu.

Následující kód vytvoří instanci správce výkresu a zobrazí panel nástrojů pouze s mnohoúhelníkovým kreslicím nástrojem 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ů pouze s jední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() a funkcí a drawingManager.getPreviewLayers() následným nastavením možností na jednotlivých vrstvách. Úchyty pro přetažení, které se zobrazí pro souřadnice při úpravě obrazce, jsou značky HTML. Styl úchytů pro přetahování lze přizpůsobit předáním možností značky HTML do dragHandleStyle správce výkresu a secondaryDragHandleStyle možnostmi správce výkresu.

Následující kód získá vykreslovací vrstvy od správce výkresu a upraví jejich možnosti pro změnu stylu vykreslování pro kreslení. V tomto případě se body vykreslují ikonou modré značky. Čáry jsou červené a čtyři pixely široké. Mnohoúhelníky mají zelenou barvu výplně a oranžovou obrys. Potom změní styly úchytů 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 přístupem k vykreslovací vrstvě, najdete v tématu Změna stylu vykreslování výkresu v ukázkách Azure Maps. 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 je možné obrazce otočit. Otočení je podporováno z geometrie MultiPoint, LineString, MultiLineString, Polygon, MultiPolygon a Rectangle. Geometrie bodů a kruhů nelze otočit.