Använda modulen för ritningsverktyg

Artikel
07/25/2023

Azure Maps Web SDK innehåller en ritverktygsmodul. Den här modulen gör det enkelt att rita och redigera former på kartan med hjälp av en indataenhet, till exempel en mus eller pekskärm. Kärnklassen i den här modulen är ritningshanteraren. Ritningshanteraren innehåller alla funktioner som behövs för att rita och redigera former på kartan. Den kan användas direkt och integreras med ett anpassat gränssnitt i verktygsfältet. Du kan också använda den inbyggda klassen DrawingToolbar.

Läsa in ritverktygsmodulen på en webbsida

Skapa en ny HTML-fil och implementera kartan som vanligt.
Läs in modulen Azure Maps ritverktyg. Du kan läsa in den på något av två sätt:
- Använd den globalt värdbaserade Azure Content Delivery Network-versionen av modulen Azure Maps-tjänster. Lägg till referens till JavaScript och CSS i -elementet <head> i filen:
```
<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>
```
- Eller så kan du läsa in ritverktygsmodulen för Azure Maps Web SDK-källkoden lokalt med hjälp av npm-paketet azure-maps-drawing-tools och sedan vara värd för den med din app. Det här paketet innehåller även TypeScript-definitioner. Använd det här kommandot:
  
  npm install azure-maps-drawing-tools
  
  Importera sedan JavaScript i en källfil:
```
import * as drawing from "azure-maps-drawing-tools";
```
  Du skulle också behöva bädda in CSS för att olika kontroller ska visas korrekt. Om du använder en JavaScript-paketerare för att paketera beroendena och paketera koden kan du läsa dokumentationen för din bundler om hur det går till. För Webpack görs det ofta via en kombination av style-loader och css-loader med dokumentation som är tillgänglig på style-loader.
  
  Börja med att installera style-loader och css-loader:
```
npm install --save-dev style-loader css-loader
```
  Importera atlas-drawing.min.css i källfilen:
```
import "azure-maps-drawing-tools/dist/atlas-drawing.min.css";
```
  Lägg sedan till inläsare i modulregeldelen i Webpack-konfigurationen:
```
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
};
```
  Mer information finns i Så här använder du npm-paketet för Azure Maps kartkontroll.

Använd ritningshanteraren direkt

När ritverktygsmodulen har lästs in i ditt program kan du aktivera funktioner för ritning och redigering med hjälp av ritningshanteraren. Du kan ange alternativ för ritningshanteraren när du instansierar den eller använder drawingManager.setOptions() funktionen.

Ange ritläge

Följande kod skapar en instans av ritningshanteraren och anger alternativet för ritningsläge .

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

Följande bild är ett exempel på ritningsläget för DrawingManager. Välj valfri plats på kartan för att börja rita en polygon.

En skärmbild av en karta som visar central park i New York City där ritningschefen demonstreras genom ritningslinje.

Ange interaktionstyp

Ritningshanteraren har stöd för tre olika sätt att interagera med kartan för att rita former.

click - Koordinater läggs till när du klickar på musen eller touchen.
freehand – Koordinater läggs till när musen eller touchen dras på kartan.
hybrid – Koordinater läggs till när musen eller touchen klickas eller dras.

Följande kod aktiverar polygonritningsläget och anger vilken typ av ritningsinteraktion som ritningshanteraren ska följa freehand.

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

Anpassa ritningsalternativ

I föregående exempel visades hur du anpassar ritningsalternativ när du instansierar Rithanteraren. Du kan också ange Alternativen för Ritningshanteraren med hjälp drawingManager.setOptions() av funktionen .

Ritningshanterarens alternativ kan användas för att testa anpassningen av alla alternativ för ritningshanteraren med hjälp av setOptions funktionen . Källkoden för det här exemplet finns i Källkod för alternativ för Ritningshanteraren.

En skärmbild av en karta över Seattle med en panel till vänster som visar de alternativ för ritningshanteraren som kan väljas för att se vilka effekter de gör på kartan.

Placera en form i redigeringsläge

Placera en befintlig form i redigeringsläge programmatiskt genom att skicka den till ritningshanteringsfunktionen edit . Om formen är en GeoJSON-funktion kan du omsluta den atls.Shape med klassen innan den skickas in.

Om du programmatiskt vill ta en form ur redigeringsläget ställer du in ritningshanteringsläget på 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' });

Anteckning

När en form skickas till edit ritningshanterarens funktion läggs den till i den datakälla som underhålls av ritningshanteraren. Om formen tidigare fanns i en annan datakälla tas den bort från den datakällan.

Om du vill lägga till former i ritningshanteraren så att slutanvändaren kan visa och redigera, men inte programmässigt vill placera dem i redigeringsläge, hämtar du datakällan från ritningshanteraren och lägger till dina former i den.

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

I följande tabell visas vilken typ av redigering som stöds av olika typer av formfunktioner.