De module voor tekenprogramma's gebruiken

Artikel
12/18/2024

De Azure Maps Web SDK biedt een module voor 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 de tekenbeheerder. Het tekenbeheer biedt alle mogelijkheden die nodig zijn voor het tekenen en bewerken van vormen op de kaart. Het kan rechtstreeks worden gebruikt en is geïntegreerd met een aangepaste werkbalkinterface. 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 gebruikelijk.
Laad de module Azure Maps-tekenhulpprogramma's. U kunt deze op twee manieren laden:
- Gebruik de wereldwijd gehoste Azure Content Delivery Network-versie van de Azure Maps-servicesmodule. 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 tekenhulpmiddelen voor de broncode van de Azure Maps Web SDK 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 het JavaScript in een bronbestand:
```
import * as drawing from "azure-maps-drawing-tools";
```
  U moet ook de CSS insluiten voor verschillende besturingselementen om correct weer te geven. Als u een JavaScript-bundeler gebruikt om de afhankelijkheden te bundelen en uw code in te pakken, raadpleegt u de documentatie van uw bundelaar over hoe dit werkt. Voor Webpack wordt dit meestal gedaan via een combinatie van style-loader en css-loader met documentatie die beschikbaar is bij style-loader.
  
  Installeer om te beginnen 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 moduleregelsgedeelte van de webpack-configuratie:
```
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
};
```
  Zie Het npm-pakket voor kaartbeheer in Azure Maps gebruiken voor meer informatie.

Het tekenbeheer rechtstreeks gebruiken

Zodra de module hulpmiddelen voor tekenen in uw toepassing is geladen, kunt u de mogelijkheden voor tekenen en bewerken inschakelen met behulp van het tekenbeheer. U kunt opties voor de tekenbeheerder opgeven tijdens het instantiëren of de drawingManager.setOptions() functie ook gebruiken.

De tekenmodus instellen

Met de volgende code maakt u een exemplaar van het tekenbeheer 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 volgende afbeelding is een voorbeeld van de tekenmodus van de DrawingManager. Selecteer een willekeurige plaats op de kaart om een veelhoek te tekenen.

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

Het interactietype instellen

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

click - Coördinaten worden toegevoegd wanneer 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 geklikt of gesleept.

Met de volgende code kan de tekenmodus veelhoek worden ingeschakeld en wordt het type tekeninteractie ingesteld waaraan de tekenbeheerder 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 terwijl u tekenenbeheer maakt. U kunt ook de opties voor tekenbeheer instellen met behulp van de drawingManager.setOptions() functie.

De opties voor tekenenbeheer kunnen worden gebruikt om de aanpassing van alle opties voor het tekenbeheer te testen met behulp van de setOptions functie. Zie de broncode voor 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 maken.

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 atlas.Shape klasse voordat u deze doorgeeft.

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

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