De module voor tekenprogramma's gebruiken

Artikel
11/03/2021
4 minuten om te lezen

De Azure Kaarten Web SDK biedt een module voor tekenprogramma's. Met deze module kunt u eenvoudig vormen op de kaart tekenen en bewerken met behulp van een invoerapparaat, zoals een muis of aanraakscherm. De belangrijkste klasse van deze module is de tekenmanager. De tekenbeheerder biedt alle mogelijkheden die nodig zijn om vormen op de kaart te tekenen en te bewerken. Het kan rechtstreeks worden gebruikt en is geïntegreerd met een aangepaste gebruikersinterface van de werkbalk. U kunt ook de ingebouwde tekenwerkbalkklasse gebruiken.

De module voor tekenprogramma's laden op een webpagina

Maak een nieuw HTML-bestand en implementeert de kaart zoals gebruikelijk.
Laad de module Azure Kaarten-tekenprogramma's. U kunt deze op twee manieren laden:
- Gebruik de wereldwijd gehoste Azure Content Delivery Network-versie van de module Azure Kaarten-services. Voeg verwijzing toe naar het javascript- en CSS-werkblad in het <head> element van het bestand:
```
<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>
```
- U kunt ook de module voor tekenprogramma's voor de Azure Kaarten Web SDK-broncode lokaal laden met behulp van het npm-pakket azure-maps-drawing-tools en deze vervolgens hosten met uw app. Dit pakket bevat ook TypeScript-definities. Gebruik deze opdracht:
  
  npm install azure-maps-drawing-tools
  
  Voeg vervolgens een verwijzing toe naar het javascript- en CSS-stijlblad in het <head> element van het bestand:
```
<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>
```

De tekenbeheerder rechtstreeks gebruiken

Zodra de module met tekenhulpmiddelen in uw toepassing is geladen, kunt u teken- en bewerkingsmogelijkheden inschakelen met behulp van tekenbeheer. U kunt opties voor de tekenbeheerder opgeven tijdens het instantiëren of de functie drawingManager.setOptions() gebruiken.

De tekenmodus instellen

Met de volgende code maakt u een exemplaar van de tekenbeheerder en stelt u de optie voor de tekenmodus in.

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

De onderstaande code is een volledig actief voorbeeld van het instellen van een tekenmodus van de tekenbeheerder. Klik op de kaart om een veelhoek te tekenen.

Het interactietype instellen

De tekenbeheerder ondersteunt drie verschillende manieren om met de kaart te communiceren om vormen te tekenen.

click - Coördinaten worden toegevoegd wanneer er op de muis of het aanraken wordt geklikt.
freehand - Coördinaten worden toegevoegd wanneer de muis of het aanraken op de kaart wordt gesleept.
hybrid - Coördinaten worden toegevoegd wanneer de muis of het aanraken wordt geklikt of gesleept.

Met de volgende code wordt de polygoontekeningmodus inschakelen en wordt het type tekeninteractie bepaald dat de tekenbeheerder moet freehand naleven.

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

Dit codevoorbeeld implementeert de functionaliteit van het tekenen van een veelhoek op de kaart. Houd de linkermuisknop ingedrukt en sleep deze vrij rond.

Tekenopties aanpassen

In de vorige voorbeelden is gedemonstreerd hoe u tekenopties kunt aanpassen tijdens het instantiëren van de tekenmanager. U kunt ook de opties voor Tekenbeheer instellen met behulp van de drawingManager.setOptions() functie . Hieronder vindt u een hulpprogramma om de aanpassing van alle opties voor de tekenbeheerder te testen met behulp van de functie setOptions.

Een shape in de bewerkingsmodus zetten

Programmatisch een bestaande vorm in de bewerkingsmodus zetten door deze door te geven aan de edit tekenmanagerfunctie. Als de vorm een GeoJSON-functie is, verpakt u deze met de atls.Shape klasse voordat u deze door geven.

Als u de bewerkingsmodus programmatisch wilt uitschakelen, stelt u de tekenmanagermodus in op 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' });

Notitie

Wanneer een vorm wordt doorgegeven aan de functie van de tekenbeheerder, wordt deze toegevoegd aan de edit gegevensbron die wordt onderhouden door de tekenbeheerder. Als de vorm eerder in een andere gegevensbron was, wordt deze verwijderd uit die gegevensbron.

Als u vormen wilt toevoegen aan de tekenbeheerder, zodat de eindgebruiker deze kan bekijken en bewerken, maar deze niet programmatisch in de bewerkingsmodus wilt zetten, haalt u de gegevensbron op uit de tekenbeheerder en voegt u er uw vormen aan toe.

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

De volgende tabel bevat het type bewerking dat wordt ondersteund door verschillende typen vormfuncties.