De module voor tekenprogramma's gebruiken

Artikel
07/26/2023

De Azure Maps Web SDK biedt een module tekenhulpmiddelen. Met deze module kunt u eenvoudig vormen op de kaart tekenen en bewerken met behulp van een invoerapparaat zoals een muis of touchscreen. De kernklasse van deze module is tekenbeheer. Tekenbeheer biedt alle mogelijkheden die nodig zijn om shapes op de kaart te tekenen en te bewerken. Het kan rechtstreeks worden gebruikt en is geïntegreerd met een aangepaste werkbalkgebruikersinterface. U kunt ook de ingebouwde klasse DrawingToolbar gebruiken.

De module Tekenhulpmiddelen laden op een webpagina

Maak een nieuw HTML-bestand en implementeer de kaart zoals gewoonlijk.
Laad de module Azure Maps tekenhulpmiddelen. U kunt deze op twee manieren laden:
- Gebruik de wereldwijd gehoste Azure Content Delivery Network-versie van de module Azure Maps services. Voeg een verwijzing toe naar javascript en CSS 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 tekenhulpprogramma's voor de Azure Maps 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
  
  Importeer vervolgens de JavaScript in een bronbestand:
```
import * as drawing from "azure-maps-drawing-tools";
```
  U moet ook de CSS insluiten om verschillende besturingselementen correct weer te geven. Als u een JavaScript-bundelaar gebruikt om de afhankelijkheden te bundelen en uw code in te pakken, raadpleegt u de documentatie van uw bundelaar over hoe dit wordt gedaan. Voor Webpack wordt dit meestal gedaan via een combinatie van style-loader en css-loader met documentatie die beschikbaar is op style-loader.
  
  Installeer eerst style-loader en css-loader:
```
npm install --save-dev style-loader css-loader
```
  Importeer atlas-drawing.min.css in het bronbestand:
```
import "azure-maps-drawing-tools/dist/atlas-drawing.min.css";
```
  Voeg vervolgens loaders toe aan het gedeelte met moduleregels van de Webpack-configuratie:
```
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
};
```
  Zie How to use the Azure Maps map control NPM package (Het npm-pakket voor Azure Maps kaartbeheer gebruiken) voor meer informatie.

Tekenbeheer rechtstreeks gebruiken

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

De tekenmodus instellen

Met de volgende code wordt een exemplaar van tekenbeheer gemaakt en wordt de optie voor tekenmodus ingesteld.

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

De volgende afbeelding is een voorbeeld van de tekenmodus van de DrawingManager. Selecteer een plaats op de kaart om een veelhoek te tekenen.

Een schermopname van een kaart met Central Park in New York City, waar de tekenmanager wordt gedemonstreerd door een tekenlijn.

Het interactietype instellen

Tekenbeheer ondersteunt drie verschillende manieren om met de kaart te werken om vormen te tekenen.

click - Coördinaten worden toegevoegd wanneer op de muis of aanraking wordt geklikt.
freehand - Coördinaten worden toegevoegd wanneer de muis of aanraking op de kaart wordt gesleept.
hybrid - Coördinaten worden toegevoegd wanneer de muis of aanraking wordt aangeklikt of gesleept.

Met de volgende code wordt de tekenmodus voor veelhoeken ingeschakeld en wordt het type tekeninteractie ingesteld waaraan de tekenmanager moet voldoen freehand.

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

Tekenopties aanpassen

In de vorige voorbeelden is gedemonstreerd hoe u tekenopties kunt aanpassen tijdens het instantiëren van Tekenbeheer. U kunt ook de opties voor Tekenbeheer instellen met behulp van de drawingManager.setOptions() functie .

De opties voor Tekenbeheer kunnen worden gebruikt om de aanpassing van alle opties voor tekenbeheer te testen met behulp van de setOptions functie . Zie Broncode van tekenbeheeropties voor de broncode voor dit voorbeeld.

Een schermopname van een kaart van Seattle met een deelvenster aan de linkerkant met de opties voor tekenbeheer die kunnen worden geselecteerd om de effecten te zien die ze op de kaart hebben.

Een shape in de bewerkingsmodus plaatsen

Plaats een bestaande shape programmatisch in de bewerkingsmodus door deze door te geven aan de functie tekenbeheerders edit . Als de shape een GeoJSON-functie is, verpakt u deze met de atls.Shape klasse voordat u deze doorgeeft.

Als u een shape programmatisch uit de bewerkingsmodus wilt halen, stelt u de modus Tekenbeheer 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 shape wordt doorgegeven aan de edit functie van tekenbeheer, wordt deze toegevoegd aan de gegevensbron die wordt onderhouden door de tekenmanager. Als de shape zich eerder in een andere gegevensbron bevond, wordt deze verwijderd uit die gegevensbron.

Als u shapes wilt toevoegen aan tekenbeheer, zodat de eindgebruiker deze kan bekijken en bewerken, maar deze niet programmatisch in de bewerkingsmodus wil plaatsen, haalt u de gegevensbron op uit tekenbeheer en voegt u de shapes eraan 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 shapefuncties.