Utilizar o módulo de ferramentas de desenho

Artigo
07/26/2023

O Azure Maps SDK Web fornece um módulo de ferramentas de desenho. Este módulo torna mais fácil desenhar e editar formas no mapa com um dispositivo de entrada, como um rato ou ecrã tátil. A classe principal deste módulo é o gestor de desenho. O gestor de desenho fornece todas as capacidades necessárias para desenhar e editar formas no mapa. Pode ser utilizado diretamente e está integrado numa IU da barra de ferramentas personalizada. Também pode utilizar a classe DrawingToolbar incorporada.

Carregar o módulo de ferramentas de desenho numa página Web

Crie um novo ficheiro HTML e implemente o mapa como habitualmente.
Carregue o módulo Azure Maps ferramentas de desenho. Pode carregá-lo de uma de duas formas:
- Utilize a versão global alojada da Rede de Entrega de Conteúdos do Azure do módulo Azure Maps serviços. Adicione referência ao JavaScript e ao CSS no <head> elemento do ficheiro:
```
<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>
```
- Em alternativa, pode carregar o módulo de ferramentas de desenho para o código fonte do SDK Web Azure Maps localmente com o pacote npm azure-maps-drawing-tools e, em seguida, alojá-lo com a sua aplicação. Este pacote também inclui definições de TypeScript. Utilize este comando:
  
  npm install azure-maps-drawing-tools
  
  Em seguida, importe o JavaScript num ficheiro de origem:
```
import * as drawing from "azure-maps-drawing-tools";
```
  Também teria de incorporar o CSS para que vários controlos fossem apresentados corretamente. Se estiver a utilizar um bundler JavaScript para agrupar as dependências e empacotar o código, consulte a documentação do seu bundler sobre como é feito. Para o Webpack, é geralmente feito através de uma combinação de style-loader e css-loader com documentação disponível no style-loader.
  
  Para começar, instale o style-loader e o css-loader:
```
npm install --save-dev style-loader css-loader
```
  No seu ficheiro de origem, importe atlas-drawing.min.css:
```
import "azure-maps-drawing-tools/dist/atlas-drawing.min.css";
```
  Em seguida, adicione carregadores à parte das regras do módulo da configuração do Webpack:
```
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
};
```
  Para saber mais, veja Como utilizar o pacote npm de controlo de mapa Azure Maps.

Utilizar o gestor de desenho diretamente

Assim que o módulo de ferramentas de desenho for carregado na sua aplicação, pode ativar as capacidades de desenho e edição com o gestor de desenho. Pode especificar opções para o gestor de desenho ao instanciá-lo ou, em alternativa, utilizar a drawingManager.setOptions() função.

Definir o modo de desenho

O código seguinte cria uma instância do gestor de desenho e define a opção de modo de desenho.

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

A imagem seguinte é um exemplo do modo de desenho do DrawingManager. Selecione qualquer local no mapa para começar a desenhar um polígono.

Uma captura de ecrã de um mapa a mostrar o central park em Nova Iorque, onde o gestor de desenho é demonstrado pela linha de desenho.

Definir o tipo de interação

O gestor de desenho suporta três formas diferentes de interagir com o mapa para desenhar formas.

click - As coordenadas são adicionadas quando o rato ou o toque é clicado.
freehand - As coordenadas são adicionadas quando o rato ou o toque são arrastados no mapa.
hybrid - As coordenadas são adicionadas quando o rato ou o toque é clicado ou arrastado.

O código seguinte ativa o modo de desenho polígono e define o tipo de interação de desenho que o gestor de desenho deve cumprir freehand.

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

Personalizar opções de desenho

Os exemplos anteriores demonstraram como personalizar as opções de desenho ao instanciar o Gestor de Desenho. Também pode definir as opções do Gestor de Desenho com a drawingManager.setOptions() função .

As opções do Gestor de desenho podem ser utilizadas para testar a personalização de todas as opções para o gestor de desenho com a setOptions função . Para obter o código fonte deste exemplo, veja Código fonte das opções do Gestor de Desenho.

Uma captura de ecrã de um mapa de Seattle com um painel à esquerda a mostrar as opções do gestor de desenho que podem ser selecionadas para ver os efeitos que fazem no mapa.

Colocar uma forma no modo de edição

Coloque programaticamente uma forma existente no modo de edição ao transmiti-la para a função de gestores edit de desenho. Se a forma for uma funcionalidade GeoJSON, envolva-a com a classe antes de a atls.Shape transmitir.

Para tirar programaticamente uma forma do modo de edição, defina o modo de gestores de desenho como 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 uma forma é transmitida para a edit função do gestor de desenho, é adicionada à origem de dados mantida pelo gestor de desenho. Se a forma estava anteriormente noutra origem de dados, será removida dessa origem de dados.

Para adicionar formas ao gestor de desenho para que o utilizador final possa ver e editar, mas não pretender colocá-las programaticamente no modo de edição, obtenha a origem de dados do gestor de desenho e adicione as suas formas ao mesmo.

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

A tabela seguinte lista o tipo de edição suportado por diferentes tipos de funcionalidades de forma.