Použití modulu nástrojů pro kreslení

Článek
11/03/2021
3 min ke čtení

Sada Azure Mapy Web SDK poskytuje modul nástrojů pro kreslení. Tento modul usnadňuje kreslení a úpravy obrazců na mapě pomocí vstupního zařízení, jako je myš nebo dotyková obrazovka. Základní třídou tohoto modulu je správce kreslení. Správce kreslení poskytuje všechny možnosti potřebné k kreslení a úpravám obrazců na mapě. Lze ji použít přímo a je integrovaná s vlastním uživatelským rozhraním panelu nástrojů. Můžete také použít integrovanou třídu panelu nástrojů pro kreslení.

Načtení modulu nástrojů pro kreslení na webové stránce

Vytvořte nový soubor HTML a implementujte mapu obvyklým způsobem.
Načtěte modul Azure Mapy drawing tools. Můžete ho načíst jedním ze dvou způsobů:
- Použijte globálně hostovanou verzi azure Content Delivery Network modulu Azure Mapy Services. Do elementu souboru přidejte odkaz na šablonu stylů JavaScript a <head> CSS:
```
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.js"></script>
```
- Nebo můžete načíst modul nástrojů pro kreslení pro zdrojový kód sady Azure Mapy Web SDK místně pomocí balíčku npm azure-maps-drawing-tools a pak ho hostovat v aplikaci. Tento balíček obsahuje také definice TypeScriptu. Použijte tento příkaz:
  
  npm install azure-maps-drawing-tools
  
  Pak do elementu souboru přidejte odkaz na šablonu stylů JavaScript a <head> CSS:
```
<link rel="stylesheet" href="node_modules/azure-maps-drawing-tools/dist/atlas-drawing.min.css" type="text/css" />
<script src="node_modules/azure-maps-drawing-tools/dist/atlas-drawing.min.js"></script>
```

Přímé použití správce kreslení

Po načtení modulu nástrojů pro kreslení do vaší aplikace můžete povolit možnosti kreslení a úprav pomocí správce kreslení. Při vytváření instance můžete zadat možnosti pro správce kreslení nebo můžete použít funkci drawingManager.setOptions() .

Nastavení režimu kreslení

Následující kód vytvoří instanci správce kreslení a nastaví možnost režimu kreslení.

//Create an instance of the drawing manager and set drawing mode.
drawingManager = new atlas.drawing.DrawingManager(map,{
    mode: "draw-polygon"
});

Níže uvedený kód je kompletní spuštěný příklad nastavení režimu kreslení správce kreslení. Kliknutím na mapu začněte kreslit mnohoúhelník.

Nastavení typu interakce

Správce kreslení podporuje tři různé způsoby interakce s mapou a kreslení tvarů.

click – Souřadnice se přidávají při kliknutí myší nebo dotykem.
freehand – Souřadnice se přidávají, když se na mapu přetáhá myš nebo dotykové ovládání.
hybrid – Souřadnice se přidávají, když kliknete nebo přetáháte myš nebo dotyk.

Následující kód povolí režim mnohoúhelníkového kreslení a nastaví typ interakce kreslení, kterou by měl správce kreslení freehand dodržovat.

//Create an instance of the drawing manager and set drawing mode.
drawingManager = new atlas.drawing.DrawingManager(map,{
    mode: "draw-polygon",
    interactionType: "freehand"
});

Tento vzorový kód implementuje funkci kreslení mnohoúhelníku na mapě. Jednoduše podržte levé tlačítko myši a volně ho přetáhněte.

Přizpůsobení možností kreslení

Předchozí příklady předvedli, jak přizpůsobit možnosti kreslení při vytváření instancí Správce kreslení. Možnosti Správce kreslení můžete také nastavit pomocí drawingManager.setOptions() funkce . Níže je nástroj k otestování přizpůsobení všech možností pro správce kreslení pomocí funkce setOptions.

Nastavení obrazce do režimu úprav

Programově pře dejte existující tvar do režimu úprav tak, že ho předáte do funkce správců edit kreslení. Pokud je tvar funkce GeoJSON, zabalte ji atls.Shape do třídy před jeho předáním.

Pokud chcete tvar změnit z režimu úprav prostřednictvím kódu programu, nastavte režim správců kreslení na idle .

//If you are starting with a GeoJSON feature, wrap it with the atlas.Shape class.
var feature = { 
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [0,0]
        },
    "properties":  {}
};

var shape = new atlas.Shape(feature);

//Pass the shape into the edit function of the drawing manager.
drawingManager.edit(shape);

//Later, to programmatically take shape out of edit mode, set mode to idle. 
drawingManager.setOptions({ mode: 'idle' });

Poznámka

Když se tvar předá do funkce správce kreslení, přidá se do zdroje dat, který edit spravuje správce kreslení. Pokud byl tvar dříve v jiném zdroji dat, odebere se z tohoto zdroje dat.

Pokud chcete do správce kreslení přidat tvary, aby koncový uživatel mohl zobrazit a upravit, ale nechcete je programově přetát do režimu úprav, načtěte zdroj dat ze správce kreslení a přidejte do něj tvary.

//The shape(s) you want to add to the drawing manager so 
var shape = new atlas.Shape(feature);

//Retrieve the data source from the drawing manager.
var source = drawingManager.getSource();

//Add your shape.
source.add(shape);

//Alternatively, load in a GeoJSON feed using the sources importDataFromUrl function.
source.importDataFromUrl('yourFeatures.json');

Následující tabulka uvádí typ úprav podporovaných různými typy tvarových funkcí.