A Rajzeszközök modul használata

Cikk
07/26/2023

A Azure Maps Webes SDK egy rajzeszközök modult biztosít. Ezzel a modullal egyszerűen rajzolhat és szerkeszthet alakzatokat a térképen beviteli eszközzel, például egérrel vagy érintőképernyővel. A modul fő osztálya a rajzkezelő. A rajzkezelő biztosítja a térképen lévő alakzatok rajzolásához és szerkesztéséhez szükséges összes képességet. Közvetlenül használható, és integrálható 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 egy weblapon

Hozzon létre egy új HTML-fájlt, és a szokásos módon implementálja a térképet.
Töltse be a Azure Maps rajzeszközök modult. Kétféleképpen töltheti be:
- Használja a Azure Maps szolgáltatási modul globálisan üzemeltetett Azure Content Delivery Network-verzióját. A fájl elemében adja hozzá 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>
```
- A Azure Maps Web SDK forráskódjához tartozó rajzeszközök modult helyileg is betöltheti az azure-maps-drawing-tools npm csomaggal, 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 beágyaznia kell a CSS-t is. Ha JavaScript-kötegelőt használ a függőségek kötegeléséhez és a kód becsomagolásához, tekintse meg a kötegelő dokumentációját a művelet módjáról. A Webpack esetében ez általában a és a stílusbetöltőben elérhető dokumentációval style-loadercss-loader történik.
  
  Először telepítse a style-loadert és a css-loadert:
```
npm install --save-dev style-loader css-loader
```
  A forrásfájlban importálja az atlas-drawing.min.css fájlt:
```
import "azure-maps-drawing-tools/dist/atlas-drawing.min.css";
```
  Ezután adjon hozzá 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ó: A 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ásba, 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 rajzmó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épen a rajz módja látható 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 – A koordináták akkor lesznek hozzáadva, ha az egérre vagy az érintésre kattint.
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 engedélyezi a sokszög rajzolási módot, és beállítja a rajzkezelő által betartandó freehandrajzi interakció 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 azt mutatták be, 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énnyel. A minta forráskódját a Rajzkezelő beállításai forráskód című témakörben találja.

Képernyőkép Seattle térképéről, bal oldalon egy panellel, amelyen a rajzkezelő beállításai láthatók, amelyek kiválaszthatók a térképre gyakorolt hatások megtekintéséhez.

Alakzat beszúrása szerkesztési módba

Programozott módon helyezzen át egy meglévő alakzatot szerkesztési módba úgy, hogy átadja azt a rajzkezelő függvénynek edit . Ha az alakzat GeoJSON-funkció, burkolja be az atls.Shape osztályba, mielőtt átadja azt.

Ha egy alakzatot programozott módon szeretne kivenni 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' });

Megjegyzé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 azt az 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.