Az azure-maps-control npm-csomag használata
Az azure-maps-control npm-csomag egy ügyféloldali kódtár, amely lehetővé teszi az Azure Maps térképvezérlő beágyazását node.js alkalmazásokba JavaScript vagy TypeScript használatával. Ez a kódtár megkönnyíti az Azure Maps REST-szolgáltatások használatát, és lehetővé teszi az interaktív térképek testreszabását tartalommal és képekkel.
Előfeltételek
Az npm-csomag alkalmazásbeli használatához a következő előfeltételekkel kell rendelkeznie:
- Azure Maps-fiók
- Egy előfizetési kulcs vagy a Microsoft Entra hitelesítő adatai. További információkért lásd a hitelesítési beállításokat.
Telepítés
Telepítse a legújabb azure-maps-control csomagot.
npm install azure-maps-control
Ez a csomag tartalmazza a forráskód, a CSS stíluslap és az Azure Maps térképvezérlő TypeScript-definícióinak egy minifikált verzióját.
A különböző vezérlők megfelelő megjelenítéséhez a CSS-stíluslapot 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
Első lépésként telepítse style-loader
és css-loader
:
npm install --save-dev style-loader css-loader
A forrásfájlon belül importálja a atlas.min.css:
import "azure-maps-control/dist/atlas.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"]
}
]
}
};
A teljes példáért tekintse meg a következő szakaszt.
Térkép létrehozása node.js alkalmazásban
Térkép beágyazása weblapra a térképvezérlő npm-csomagjának használatával.
Új projekt létrehozása
npm init
npm init
egy parancs, amely segít létrehozni egy package.json fájlt a csomópontprojekthez. Kérdéseket tesz fel, és a válaszok alapján hozza létre a fájlt. Használhatja vagy–yes
kihagyhatja-y
a kérdéseket, és használhatja az alapértelmezett értékeket. A package.json fájl információkat tartalmaz a projektről, például a nevét, verzióját, függőségeit, szkripteit stb.Telepítse a legújabb azure-maps-control csomagot.
npm install azure-maps-control
Telepítse a webpackot és más fejlesztői függőségeket.
npm install --save-dev webpack webpack-cli style-loader css-loader
Frissítse a package.json egy új szkript hozzáadásával a következőhöz
"build": "webpack"
: . A fájlnak a következőhöz hasonlóan kell kinéznie:{ "name": "azure-maps-npm-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" }, "author": "", "license": "ISC", "dependencies": { "azure-maps-control": "^2.3.1" }, "devDependencies": { "css-loader": "^6.8.1", "style-loader": "^3.3.3", "webpack": "^5.88.1", "webpack-cli": "^5.1.4" } }
Hozzon létre egy webpack.config.js nevű webpack konfigurációs fájlt a projekt gyökérmappájában. Adja meg ezeket a beállításokat a konfigurációs fájlban.
module.exports = { entry: "./src/js/main.js", mode: "development", output: { path: `${__dirname}/dist`, filename: "bundle.js" }, module: { rules: [ { test: /\.css$/i, use: ["style-loader", "css-loader"] } ] } };
Adjon hozzá egy új JavaScript-fájlt a ./src/js/main.js címen ezzel a kóddal.
import * as atlas from "azure-maps-control"; import "azure-maps-control/dist/atlas.min.css"; const onload = () => { // Initialize a map instance. const map = new atlas.Map("map", { view: "Auto", // Add authentication details for connecting to Azure Maps. authOptions: { authType: "subscriptionKey", subscriptionKey: "<Your Azure Maps Key>" } }); }; document.body.onload = onload;
Adjon hozzá egy új, index.html nevű HTML-fájlt a projekt gyökérmappájába ezzel a tartalommal:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Azure Maps demo</title> <script src="./dist/bundle.js" async></script> <style> html, body, #map { width: 100%; height: 100%; padding: 0; margin: 0; } </style> </head> <body> <div id="map"></div> </body> </html>
A projektnek most a következő fájlokkal kell rendelkeznie:
├───node_modules ├───index.html ├───package-lock.json ├───package.json ├───webpack.config.js └───src └───js └───main.js
Futtassa a következő parancsot Egy JavaScript-fájl létrehozásához a ./dist/bundle.js
npm run build
Nyissa meg a fájl index.html a webböngészőben, és tekintse meg a renderelt térképet. A következő képnek kell kinéznie:
Egyéb Azure Maps npm-csomagok használata
Az Azure Maps más modulokat is kínál npm-csomagként, amelyek integrálhatók az alkalmazásba. Ezek a modulok a következők:
Az alábbi minta bemutatja, hogyan importálhat egy modult, és hogyan használhatja azt az alkalmazásban. Ez a minta az azure-maps-spatial-io használatával olvas be egy sztringet POINT(-122.34009 47.60995)
GeoJSON-ként, és buborékréteggel jeleníti meg a térképen.
Telepítse az npm csomagot.
npm install azure-maps-spatial-io
Ezután egy importálási deklarációval adja hozzá a modult egy forrásfájlhoz:
import * as spatial from "azure-maps-spatial-io";
A szöveg elemzésére használható
spatial.io.ogc.WKT.read()
.import * as atlas from "azure-maps-control"; import * as spatial from "azure-maps-spatial-io"; import "azure-maps-control/dist/atlas.min.css"; const onload = () => { // Initialize a map instance. const map = new atlas.Map("map", { center: [-122.34009, 47.60995], zoom: 12, view: "Auto", // Add authentication details for connecting to Azure Maps. authOptions: { authType: "subscriptionKey", subscriptionKey: "<Your Azure Maps Key>" } }); // Wait until the map resources are ready. map.events.add("ready", () => { // Create a data source and add it to the map. const datasource = new atlas.source.DataSource(); map.sources.add(datasource); // Create a layer to render the data map.layers.add(new atlas.layer.BubbleLayer(datasource)); // Parse the point string. var point = spatial.io.ogc.WKT.read("POINT(-122.34009 47.60995)"); // Add the parsed data to the data source. datasource.add(point); }); }; document.body.onload = onload;
A Webpack 5 hibát jelezhet azzal kapcsolatban, hogy nem lehet megoldani néhány node.js alapvető modult. Adja hozzá ezeket a beállításokat a webpack konfigurációs fájlhoz a probléma megoldásához.
module.exports = { // ... resolve: { fallback: { "crypto": false, "worker_threads": false } } };
Ez a kép a minta kimenetének képernyőképe.
Következő lépések
Ismerje meg, hogyan hozhat létre és használhat térképeket:
Ismerje meg, hogyan formázhat térképet:
Ismerje meg az ajánlott eljárásokat, és tekintse meg a mintákat: