Korzystanie z modułu narzędzi do rysowania

Artykuł
07/26/2023

Zestaw SDK sieci Web Azure Maps udostępnia moduł narzędzi do rysowania. Ten moduł ułatwia rysowanie i edytowanie kształtów na mapie przy użyciu urządzenia wejściowego, takiego jak mysz lub ekran dotykowy. Podstawową klasą tego modułu jest menedżer rysunku. Menedżer rysunku zapewnia wszystkie możliwości potrzebne do rysowania i edytowania kształtów na mapie. Można go używać bezpośrednio i jest zintegrowany z niestandardowym interfejsem użytkownika paska narzędzi. Możesz również użyć wbudowanej klasy DrawingToolbar.

Ładowanie modułu narzędzi do rysowania na stronie internetowej

Utwórz nowy plik HTML i zaimplementuj mapę w zwykły sposób.
Załaduj moduł narzędzi do rysowania Azure Maps. Można go załadować na jeden z dwóch sposobów:
- Użyj globalnie hostowanej wersji usługi Azure Content Delivery Network modułu usług Azure Maps. Dodaj odwołanie do języków JavaScript i CSS w elemencie <head> pliku:
```
<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>
```
- Możesz też załadować moduł narzędzi do rysowania dla kodu źródłowego zestawu SDK sieci Web Azure Maps lokalnie przy użyciu pakietu npm azure-maps-drawing-tools, a następnie hostować go z aplikacją. Ten pakiet zawiera również definicje języka TypeScript. Użyj następującego polecenia:
  
  npm install azure-maps-drawing-tools
  
  Następnie zaimportuj kod JavaScript do pliku źródłowego:
```
import * as drawing from "azure-maps-drawing-tools";
```
  Należy również osadzić arkusz CSS dla różnych kontrolek, aby wyświetlić je poprawnie. Jeśli używasz pakietu JavaScript do tworzenia pakietów zależności i tworzenia pakietu kodu, zapoznaj się z dokumentacją pakietu pakietów, aby dowiedzieć się, jak to zrobić. W przypadku pakietu Webpack często odbywa się to za pomocą kombinacji style-loader elementów i css-loader z dokumentacją dostępną w narzędziu style-loader.
  
  Aby rozpocząć, zainstaluj moduł style-loader i css-loader:
```
npm install --save-dev style-loader css-loader
```
  W pliku źródłowym zaimportuj plik atlas-drawing.min.css:
```
import "azure-maps-drawing-tools/dist/atlas-drawing.min.css";
```
  Następnie dodaj moduły ładujących do części reguł modułu konfiguracji pakietu Webpack:
```
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
};
```
  Aby dowiedzieć się więcej, zobacz How to use the Azure Maps map control npm package (Jak używać pakietu npm kontrolki mapy Azure Maps).

Używanie menedżera rysunku bezpośrednio

Po załadowaniu modułu narzędzi do rysowania w aplikacji można włączyć możliwości rysowania i edytowania przy użyciu menedżera rysunku. Można określić opcje menedżera rysunku podczas tworzenia wystąpienia lub użyć drawingManager.setOptions() funkcji.

Ustawianie trybu rysunku

Poniższy kod tworzy wystąpienie menedżera rysunku i ustawia opcję trybu rysowania.

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

Na poniższej ilustracji przedstawiono przykład trybu rysowania obiektu DrawingManager. Wybierz dowolne miejsce na mapie, aby rozpocząć rysowanie wielokąta.

Zrzut ekranu przedstawiający mapę przedstawiającą park centralny w Nowym Jorku, w którym menedżer rysunku jest pokazany przez linię rysunkową.

Ustawianie typu interakcji

Menedżer rysunku obsługuje trzy różne sposoby interakcji z mapą w celu narysowania kształtów.

click - Współrzędne są dodawane po kliknięciu myszy lub dotyku.
freehand - Współrzędne są dodawane po przeciągnięciu myszy lub dotyku na mapie.
hybrid - Współrzędne są dodawane po kliknięciu lub przeciągnięciu myszy lub dotyku.

Poniższy kod umożliwia tryb rysunku wielokątnego i ustawia typ interakcji rysunku, który menedżer rysunku powinien przestrzegać .freehand

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

Dostosowywanie opcji rysunku

W poprzednich przykładach pokazano, jak dostosować opcje rysunku podczas tworzenia wystąpienia Menedżera rysunku. Opcje Menedżera rysunku można również ustawić za pomocą drawingManager.setOptions() funkcji .

Opcje Menedżera rysunku mogą służyć do testowania dostosowywania wszystkich opcji menedżera rysunku setOptions przy użyciu funkcji . Aby zapoznać się z kodem źródłowym dla tego przykładu, zobacz Rysunek opcje menedżera kodu źródłowego.

Zrzut ekranu przedstawiający mapę Seattle z panelem po lewej stronie przedstawiającym opcje menedżera rysunku, które można wybrać, aby zobaczyć efekty, które tworzą na mapie.

Umieszczanie kształtu w trybie edycji

Programowo umieść istniejący kształt w trybie edycji, przekazując go do funkcji menedżerów rysunku edit . Jeśli kształt jest funkcją GeoJSON, zawijaj ją za atls.Shape pomocą klasy przed przekazaniem.

Aby programowo wyjąć kształt z trybu edycji, ustaw tryb menedżerów rysunku na idlewartość .

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

Uwaga

Gdy kształt jest przekazywany do edit funkcji menedżera rysunku, jest dodawany do źródła danych obsługiwanego przez menedżera rysunku. Jeśli kształt znajdował się wcześniej w innym źródle danych, zostanie on usunięty z tego źródła danych.

Aby dodać kształty do menedżera rysunku, aby użytkownik końcowy mógł wyświetlać i edytować, ale nie chce programowo umieszczać ich w trybie edycji, pobierz źródło danych z menedżera rysunku i dodaj do niego kształty.

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

W poniższej tabeli wymieniono typ edycji obsługiwany przez różne typy cech kształtu.