Usare il modulo Strumenti di disegno

Articolo
07/26/2023

L'SDK Web Mappe di Azure fornisce un modulo di strumenti di disegno. Questo modulo consente di disegnare e modificare forme sulla mappa usando un dispositivo di input, ad esempio un mouse o uno schermo touch. La classe principale di questo modulo è la gestione disegno. Il gestore disegni offre tutte le funzionalità necessarie per disegnare e modificare le forme sulla mappa. Può essere usato direttamente ed è integrato con un'interfaccia utente personalizzata della barra degli strumenti. È anche possibile usare la classe DrawingToolbar predefinita.

Caricamento del modulo strumenti di disegno in una pagina Web

Creare un nuovo file HTML e implementare la mappa come di consueto.
Caricare il modulo strumenti di disegno Mappe di Azure. È possibile caricarlo in uno dei due modi seguenti:
- Usare la versione globale di Rete per la distribuzione di contenuti di Azure del modulo servizi di Mappe di Azure. Aggiungere riferimento a JavaScript e CSS nell'elemento <head> del file:
```
<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>
```
- In alternativa, è possibile caricare il modulo strumenti di disegno per il codice sorgente Mappe di Azure Web SDK in locale usando il pacchetto npm azure-maps-drawing-tools e quindi ospitarlo con l'app. Questo pacchetto include anche le definizioni TypeScript. Usare questo comando:
  
  npm install azure-maps-drawing-tools
  
  Importare quindi JavaScript in un file di origine:
```
import * as drawing from "azure-maps-drawing-tools";
```
  È anche necessario incorporare il CSS per vari controlli per visualizzare correttamente. Se si usa un bundler JavaScript per raggruppare le dipendenze e creare il pacchetto del codice, vedere la documentazione del bundler su come viene eseguita. Per Webpack, viene comunemente eseguita tramite una combinazione di style-loader e css-loader con la documentazione disponibile in style-loader.
  
  Per iniziare, installare style-loader e css-loader:
```
npm install --save-dev style-loader css-loader
```
  All'interno del file di origine importare atlas-drawing.min.css:
```
import "azure-maps-drawing-tools/dist/atlas-drawing.min.css";
```
  Aggiungere quindi caricatori alla parte delle regole del modulo della configurazione Webpack:
```
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
};
```
  Per altre informazioni, vedere Come usare il pacchetto npm del controllo mappa Mappe di Azure.

Usare direttamente il manager di disegno

Dopo aver caricato il modulo strumenti di disegno nell'applicazione, è possibile abilitare le funzionalità di disegno e modifica usando il gestore disegni. È possibile specificare le opzioni per il gestore disegni durante l'istanza o in alternativa usare la drawingManager.setOptions() funzione.

Impostare la modalità disegno

Il codice seguente crea un'istanza del gestore disegni e imposta l'opzione modalità disegno.

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

L'immagine seguente è un esempio di modalità di disegno dell'oggetto DrawingManager. Selezionare qualsiasi posizione sulla mappa per avviare il disegno di un poligono.

Screenshot di una mappa che mostra il parco centrale a New York City in cui il responsabile del disegno è dimostrato dalla linea di disegno.

Impostare il tipo di interazione

Il responsabile disegno supporta tre diversi modi di interagire con la mappa per disegnare forme.

click - Le coordinate vengono aggiunte quando viene fatto clic sul mouse o sul tocco.
freehand - Le coordinate vengono aggiunte quando il mouse o il tocco vengono trascinati sulla mappa.
hybrid - Le coordinate vengono aggiunte quando il mouse o il tocco viene fatto clic o trascinato.

Il codice seguente abilita la modalità di disegno poligono e imposta il tipo di interazione di disegno a cui deve rispettare freehandil gestore disegno .

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

Personalizzazione delle opzioni di disegno

Gli esempi precedenti illustrano come personalizzare le opzioni di disegno durante l'istanza di Drawing Manager. È anche possibile impostare le opzioni di Gestione disegno usando la drawingManager.setOptions() funzione .

Le opzioni di Gestione disegno possono essere usate per testare la personalizzazione di tutte le opzioni per la gestione disegno usando la setOptions funzione. Per il codice sorgente per questo esempio, vedere Codice sorgente delle opzioni di Gestione disegno.

Screenshot di una mappa di Seattle con un pannello a sinistra che mostra le opzioni di gestione disegno che possono essere selezionate per visualizzare gli effetti apportati alla mappa.

Inserire una forma in modalità di modifica

Inserire a livello di codice una forma esistente in modalità di modifica passandola alla funzione di gestione edit disegni. Se la forma è una funzionalità GeoJSON, eseguire il wrapping con la atls.Shape classe prima di passarla.

Per prendere una forma in modalità di modifica a livello di codice, impostare la modalità di gestione disegno su 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' });

Nota

Quando una forma viene passata alla edit funzione di gestione disegno, viene aggiunta all'origine dati gestita dal gestore disegni. Se la forma è stata precedentemente in un'altra origine dati, verrà rimossa dall'origine dati.

Per aggiungere forme al gestore disegni in modo che l'utente finale possa visualizzare e modificare, ma non vuole inserirle a livello di codice in modalità di modifica, recuperare l'origine dati dal gestore disegni e aggiungerle.

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

Nella tabella seguente viene elencato il tipo di modifica supportato da diversi tipi di funzionalità della forma.