Använda modulen för ritningsverktyg

Artikel
11/03/2021
4 minuter för att läsa

Azure Kartor Web SDK tillhandahåller en modul för ritningsverktyg. 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. Huvudklassen 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 är integrerad med ett anpassat verktygsfältsgränssnitt. Du kan också använda den inbyggda verktygsfältsklassen för ritning.

Läsa in modulen för ritningsverktyg på en webbsida

Skapa en ny HTML-fil och implementera kartan som vanligt.
Läs in modulen azure Kartor-ritningsverktyg. Du kan läsa in den på något av två sätt:
- Använd den globalt värd-, Azure Content Delivery Network-versionen av modulen Azure Kartor Services. Lägg till referens till formatmallen JavaScript och CSS <head> i -elementet 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 modulen med ritningsverktyg för Azure Kartor Web SDK-källkoden lokalt med hjälp av npm-paketet azure-maps-drawing-tools och sedan använda appen som värd. Det här paketet innehåller även TypeScript-definitioner. Använd det här kommandot:
  
  npm install azure-maps-drawing-tools
  
  Lägg sedan till en referens till formatmallen JavaScript och CSS <head> i -elementet i filen:
```
<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>
```

Använda ritningshanteraren direkt

När modulen för ritningsverktyg 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ända drawingManager.setOptions() funktionen .

Ställ in ritningsläget

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

Koden nedan är ett fullständigt körningsexempel på hur du ställer in ett ritningsläge för ritningshanteraren. Klicka på kartan för att börja rita en polygon.

Ange interaktionstyp

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

click – Koordinater läggs till när musen eller pekskärmen klickas.
freehand – Koordinater läggs till när musen eller pekskärmen dras på kartan.
hybrid – Koordinater läggs till när musen eller pekskärmen klickas eller dras.

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

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

Det här kodexe exemplet implementerar funktionerna för att rita en polygon på kartan. Håll bara ned den vänstra musknappen och dra runt den fritt.

Anpassa ritningsalternativ

I föregående exempel visades hur du anpassar ritningsalternativ samtidigt som du instansierar Ritningshanteraren. Du kan också ange alternativen för Ritningshanteraren med hjälp av drawingManager.setOptions() funktionen . Nedan visas ett verktyg för att testa anpassningen av alla alternativ för ritningshanteraren med hjälp av funktionen setOptions.

Placera en form i redigeringsläge

Placera en befintlig form programmässigt i redigeringsläge genom att skicka den till funktionen edit ritningshanterare. Om formen är en GeoJSON-funktion omsluter du den med atls.Shape klassen innan du lägger till den.

Om du vill ta bort formen från redigeringsläget programmatiskt ställer du in läget för ritningshanterare 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 ritningshanterarens funktion läggs den till i datakällan som edit underhålls av ritningshanteraren. Om formen tidigare fanns i en annan datakälla tas den bort från datakällan.

Om du vill lägga till figurer i ritningshanteraren så att slutanvändaren kan visa och redigera, men inte vill placera dem i redigeringsläge programmatiskt, 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 den typ av redigering som stöds av olika typer av formfunktioner.