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

Článek
07/26/2023

Sada Azure Maps Web SDK poskytuje modul nástrojů kreslení. Tento modul usnadňuje kreslení a úpravy obrazců na mapě pomocí vstupního zařízení, jako je například myš nebo dotyková obrazovka. Základní třídou tohoto modulu je správce kreslení. Správce výkresu poskytuje všechny možnosti potřebné ke kreslení a úpravám obrazců na mapě. Dá se 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 DrawingToolbar.

Načtení modulu nástroje kreslení na webové stránce

Vytvořte nový soubor HTML a implementujte mapu obvyklým způsobem.
Načtěte modul nástrojů Azure Maps kreslení. Můžete ho načíst jedním ze dvou způsobů:
- Použijte globálně hostované modul Azure Maps services ve službě Azure Content Delivery Network. Do elementu souboru přidejte odkaz na JavaScript a šablony stylů CSS <head> :
```
<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ů kreslení pro zdrojový kód sady Azure Maps Web SDK místně pomocí balíčku npm azure-maps-drawing-tools a pak ho hostovat ve vaší aplikaci. Tento balíček obsahuje také definice TypeScriptu. Použijte tento příkaz:
  
  npm install azure-maps-drawing-tools
  
  Potom importujte JavaScript do zdrojového souboru:
```
import * as drawing from "azure-maps-drawing-tools";
```
  Budete také muset vložit šablony stylů CSS, aby se různé ovládací prvky zobrazovaly správně. Pokud k vytváření balíčků závislostí a zabalení kódu používáte javascriptový bundler, přečtěte si dokumentaci k sadě, jak se to dělá. U webpacku se to obvykle provádí prostřednictvím kombinace style-loader a css-loader s dokumentací dostupnou na webu style-loader.
  
  Začněte instalací zavaděče stylů a zavaděče css:
```
npm install --save-dev style-loader css-loader
```
  Do zdrojového souboru importujte atlas-drawing.min.css:
```
import "azure-maps-drawing-tools/dist/atlas-drawing.min.css";
```
  Pak přidejte zavaděče do části konfigurace webpacku s pravidly modulu:
```
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
};
```
  Další informace najdete v tématu Použití balíčku npm Azure Maps mapového ovládacího prvku.

Přímé použití správce výkresu

Jakmile je modul nástroje kreslení načten do aplikace, můžete povolit funkce kreslení a úpravy pomocí správce výkresu. Můžete zadat možnosti pro správce výkresu při vytváření jeho instance nebo alternativně použít drawingManager.setOptions() funkci .

Nastavení režimu kreslení

Následující kód vytvoří instanci správce výkresu 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ásledující obrázek je příkladem režimu kreslení objektu DrawingManager. Výběrem libovolného místa na mapě můžete začít kreslit mnohoúhelník.

Snímek obrazovky s mapou znázorňující centrální park v New Yorku, kde je správce výkresu znázorněn pomocí kreslicí čáry

Nastavení typu interakce

Správce výkresu podporuje tři různé způsoby interakce s mapou při kreslení obrazců.

click - Souřadnice se přidají při kliknutí myší nebo dotykem.
freehand - Souřadnice se přidají při přetažení myši nebo dotyku na mapě.
hybrid - Souřadnice se přidají při kliknutí nebo přetažení myši nebo dotyku.

Následující kód povolí režim kreslení mnohoúhelníku a nastaví typ interakce výkresu, který by měl správce výkresu dodržovat freehand.

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

Přizpůsobení možností výkresu

Předchozí příklady ukázaly, jak přizpůsobit možnosti výkresu při vytváření instance Správce výkresu. Pomocí funkce můžete také nastavit možnosti Správce výkresu drawingManager.setOptions() .

Možnosti Správce výkresu lze použít k otestování přizpůsobení všech možností pro správce výkresu setOptions pomocí funkce . Zdrojový kód pro tuto ukázku najdete v tématu Zdrojový kód možností Správce výkresu.

Snímek obrazovky s mapou Seattlu s panelem vlevo s možnostmi správce výkresu, které je možné vybrat, aby se zobrazily efekty, které na mapě udělují.

Nastavení obrazce do režimu úprav

Prostřednictvím kódu programu můžete existující obrazec převést do režimu úprav tak, že ho předáte do funkce správců edit výkresu. Pokud je obrazec funkce GeoJSON, zabalte ho atls.Shape s třídou před jeho předáním.

Pokud chcete obrazec programově odebrat z režimu úprav, nastavte režim správců výkresu 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ž je obrazec předán edit funkci správce výkresu, přidá se do zdroje dat spravovaného správcem výkresu. Pokud byl obrazec dříve v jiném zdroji dat, odebere se z daného zdroje dat.

Pokud chcete do správce výkresu přidat obrazce, aby koncový uživatel mohl zobrazovat a upravovat, ale nechcete je programově převést do režimu úprav, načtěte zdroj dat ze správce výkresu a přidejte do něj obrazce.

//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ý různými typy funkcí obrazců.