A Rajzeszközök modul használata
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.
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ó freehand
rajzmű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.
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.
Alakzat funkció | Pontok szerkesztése | Forog | Alakzat törlése |
---|---|---|---|
Pont | ✓ | ✓ | |
LineString | ✓ | ✓ | ✓ |
Polygon | ✓ | ✓ | ✓ |
MultiPoint | ✓ | ✓ | |
MultiLineString | ✓ | ✓ | |
MultiPolygon | ✓ | ✓ | |
Kör | ✓ | ✓ | |
Téglalap | ✓ | ✓ | ✓ |
Következő lépések
Ismerje meg, hogyan használhatja a rajzeszközök modul további funkcióit:
További információ a cikkben használt osztályokról és módszerekről: