A Rajzeszközök modul használata

Cikk
12/18/2024

Az Azure Maps Web SDK egy rajzeszközökkel kapcsolatos modult biztosít. Ezzel a modullal egyszerűen rajzolhat és szerkeszthet alakzatokat a térképen egy beviteli eszközzel, például egérrel vagy érintőképernyővel. A modul alapvető osztálya a rajzkezelő. A rajzkezelő biztosítja a térkép alakzatainak rajzolásához és szerkesztéséhez szükséges összes képességet. Közvetlenül használható, és integrálva van egy egyéni eszköztár felhasználói felületével. A beépített DrawingToolbar osztályt is használhatja.

A rajzeszközök modul betöltése weblapon

Hozzon létre egy új HTML-fájlt, és a szokásos módon implementálja a térképet.
Töltse be az Azure Maps rajzeszközök modult. Kétféleképpen töltheti be:
- Használja az Azure Maps szolgáltatásmodul globálisan üzemeltetett Azure Content Delivery Network-verzióját. A fájl elemében adja meg a JavaScriptre és a <head> CSS-re mutató hivatkozást:
```
<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>
```
- Az Azure Maps Web SDK forráskódjához tartozó rajzeszközök modult helyileg is betöltheti az azure-maps-drawing-tools npm csomag használatával, majd üzemeltetheti azt az alkalmazással. Ez a csomag TypeScript-definíciókat is tartalmaz. Használja a következő parancsot:
  
  npm install azure-maps-drawing-tools
  
  Ezután importálja a JavaScriptet egy forrásfájlba:
```
import * as drawing from "azure-maps-drawing-tools";
```
  A különböző vezérlők megfelelő megjelenítéséhez a CSS-t is beágyaznia kell. Ha JavaScript-kötegelőt használ a függőségek kötegeléséhez és a kód csomagolásához, tekintse meg a csomagkötegelő dokumentációját a művelet módjáról. A webpack esetében ez általában a style-loaderben elérhető dokumentáció kombinációján style-loader keresztül történik.css-loader
  
  Először telepítse a style-loadert és a css-loadert:
```
npm install --save-dev style-loader css-loader
```
  A forrásfájlon belül importáljon atlas-drawing.min.css:
```
import "azure-maps-drawing-tools/dist/atlas-drawing.min.css";
```
  Ezután adja hozzá a betöltőket a webpack konfiguráció modulszabályainak részéhez:
```
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
};
```
  További információ: Az Azure Maps térképvezérlő npm-csomagjának használata.

A rajzkezelő használata közvetlenül

Miután betöltötte a rajzeszközök modult az alkalmazásban, a rajzkezelővel engedélyezheti a rajz- és szerkesztési képességeket. Megadhatja a rajzkezelő beállításait a példányosítás során, vagy használhatja a függvényt drawingManager.setOptions() .

A rajz mód beállítása

Az alábbi kód létrehozza a rajzkezelő egy példányát, és beállítja a rajzmód beállítását.

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

Az alábbi kép a rajz módra mutat példát.DrawingManager Jelöljön ki egy tetszőleges helyet a térképen a sokszög rajzolásához.

Képernyőkép egy new york-i központi parkot ábrázoló térképről, ahol a rajzkezelőt rajzvonal szemlélteti.

Az interakció típusának beállítása

A rajzkezelő három különböző módszert támogat a térképen az alakzatok rajzolásához.

click – Az egér vagy érintés kattintásakor a rendszer koordinátákat ad hozzá.
freehand – A koordináták akkor lesznek hozzáadva, ha az egér vagy az érintés a térképen húzódik.
hybrid – A koordináták akkor lesznek hozzáadva, amikor az egérre vagy az érintésre kattint vagy húz.

Az alábbi kód lehetővé teszi a sokszög rajzolási módot, és beállítja a rajzkezelő által betartandó freehandrajzművelet típusát.

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

Rajzbeállítások testreszabása

Az előző példák bemutatják, hogyan szabhatja testre a rajzbeállításokat a Rajzkezelő példányosítása közben. A Rajzkezelő beállításait a függvény használatával is beállíthatja drawingManager.setOptions() .

A Rajzkezelő beállításaival tesztelheti a rajzkezelő összes beállításának testreszabását a setOptions függvény használatával. A minta forráskódját a Rajzkezelő beállításai forráskódja ismerteti.

Képernyőkép Seattle térképéről, bal oldalon egy panellel, amelyen a rajzkezelő beállításai láthatók, hogy milyen effektusok jelenjenek meg a térképen.

Alakzat szerkesztési módba helyezése

Programozott módon helyezzen át egy meglévő alakzatot szerkesztési módba a rajzkezelő edit függvénybe való továbbítással. Ha az alakzat GeoJSON-funkció, akkor az átadás előtt csomagolja be az atlas.Shape osztályba.

Ha programozott módon szeretne kivenni egy alakzatot a szerkesztési módból, állítsa a rajzkezelő módot a következőre 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' });

Feljegyzés

Amikor egy alakzat bekerül a edit rajzkezelő függvényébe, a rendszer hozzáadja azt a rajzkezelő által karbantartott adatforráshoz. Ha az alakzat korábban egy másik adatforrásban volt, a rendszer eltávolítja az adott adatforrásból.

Ha alakzatokat szeretne hozzáadni a rajzkezelőhöz, hogy a végfelhasználó megtekinthesse és szerkessze őket, de nem szeretné programozott módon szerkesztési módba helyezni őket, kérje le az adatforrást a rajzkezelőből, és adja hozzá az alakzatokat.

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

Az alábbi táblázat a különböző típusú alakzatfunkciók által támogatott szerkesztési típusokat sorolja fel.