Rajzeszközök eszköztárának hozzáadása a leképezéshez

Cikk
08/30/2024

Ez a cikk bemutatja, hogyan használhatja a Rajzeszközök modult, és hogyan jelenítheti meg a rajz eszköztárát a térképen. A Rajz eszköztár vezérlőelem hozzáadja a rajz eszköztárat a térképhez. Megtudhatja, hogyan hozhat létre térképeket egyetlen és minden rajzeszközzel, és hogyan szabhatja testre a rajzalakzatok renderelését a rajzkezelőben.

Az alábbi kód létrehozza a rajzkezelő egy példányát, és megjeleníti az eszköztárat a térképen.

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

Ha egy teljes munkamintát szeretne, amely bemutatja, hogyan adhat hozzá rajz eszköztárat a térképhez, olvassa el a Rajz eszköztár hozzáadása térképhez az Azure Maps-mintákban című témakört . A minta forráskódját lásd : Rajz eszköztár hozzáadása a forráskód leképezéséhez.

Az alábbi kód létrehozza a rajzkezelő egy példányát, és megjeleníti az eszköztárat egy sokszögrajzoló eszközzel a térképen.

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

Az alábbi képernyőkép a rajzkezelő egy példányát mutatja be, amely egyetlen rajzeszközzel jeleníti meg az eszköztárat a térképen:

Rajzmegjelenítési stílus módosítása

A rajzolt alakzatok stílusa testre szabható a rajzkezelő mögöttes rétegeinek beolvasásával a drawingManager.getLayers() függvények használatával drawingManager.getPreviewLayers() , majd az egyes rétegek beállításainak beállításával. Az alakzatok szerkesztésekor a koordinátákhoz megjelenő fogópontok HTML-jelölők. A húzási fogópontok stílusa testre szabható a HTML-jelölők beállításainak a rajzkezelőben és secondaryDragHandleStyle a dragHandleStyle beállításokban való átadásával.

Az alábbi kód lekéri a renderelési rétegeket a rajzkezelőből, és módosítja a rajz megjelenítési stílusának módosítására vonatkozó beállításokat. Ebben az esetben a pontok kék jelölő ikonnal jelennek meg. A vonalak pirosak és négy képpont szélesek. A sokszögek zöld kitöltési színnel és narancssárga körvonallal rendelkeznek. Ezután a fogópontok stílusát négyzet ikonokként módosítja.

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

Ha egy teljes munkamintát szeretne, amely bemutatja, hogyan szabhatja testre a rajzalakzatok renderelését a rajzkezelőben a renderelési rétegek elérésével, tekintse meg az Azure Maps-minták rajzmegjelenítési stílusának módosítása című témakört . A minta forráskódját a rajzmegjelenítési stílus forráskódjának módosítása című témakörben talál.

Feljegyzés

Szerkesztési módban az alakzatok elforgathatók. A forgás a MultiPoint, LineString, MultiLineString, Polygon, MultiPolygon és Téglalap geometriákban támogatott. A pont- és körgeometria nem forgatható.