jak používat modul Azure Maps prostorového vstupu/výstupu

Článek
09/03/2021
4 min ke čtení

sada Azure Maps Web SDK poskytuje modul pro prostorové vstupně-výstupní operace, který integruje prostorová data do Azure Maps Web sdk pomocí javascriptu nebo TypeScript. Robustní funkce v tomto modulu umožňují vývojářům:

Čtení a zápis běžných souborů prostorových dat. Mezi podporované formáty souborů patří: KML, KMZ, GPX, GeoRSS, GML, soubory. JSON a CSV, které obsahují sloupce s prostorovými informacemi. Podporuje také Well-Known text (Well).
služby Připojení a Open Geospatial Consortium (OGC) a integrace s Azure Maps web SDK. Překrývá služby webového mapování (WMS) a WMTS (Web Map) jako vrstvy na mapě.
Dotazování dat ve službě webové funkce (WFS).
Překrytí složitých datových sad, které obsahují informace o stylu a jejich automatické vykreslování pomocí minimálního kódu.
Využijte vysokorychlostní XML a oddělených tříd pro čtení a zápis souborů.

V této příručce se dozvíte, jak integrovat a používat modul pro prostorové vstupně-výstupní operace ve webové aplikaci.

toto video poskytuje přehled modulu pro prostorové vstupně-výstupní operace v sadě Azure Maps Web SDK.

Upozornění

Používejte jenom data a služby, které jsou ze zdroje, kterému důvěřujete, zejména v případě, že se na něj odkazuje z jiné domény. Modul pro prostorové vstupně-výstupní operace provede kroky pro minimalizaci rizika, ale nejbezpečnější přístup je příliš, takže danagerous data do vaší aplikace neumožňují začít.

Požadavky

než budete moct použít modul pro vytváření prostorových dat, budete muset vytvořit účet Azure Maps a získat pro svůj účet primární klíč předplatného.

Instalace modulu pro prostorové vstupně-výstupní operace

modul Azure Maps prostorového vstupu a výstupu můžete načíst pomocí jedné ze dvou možností:

globálně hostovaný Azure CDN pro modul Azure Maps prostorového vstupu/výstupu. Pro tuto možnost přidáte odkaz na JavaScript v <head> prvku souboru HTML.
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
Zdrojový kód pro Azure-Maps- v místě – v/v lze načíst místně a pak hostovat s vaší aplikací. Tento balíček obsahuje také definice TypeScript. Pro tuto možnost použijte následující příkaz k instalaci balíčku:
```
npm install azure-maps-spatial-io
```
Pak přidejte odkaz na JavaScript v <head> prvku dokumentu HTML:
```
<script src="node_modules/azure-maps-spatial-io/dist/atlas-spatial.min.js"></script>
```

Použití modulu pro prostorové vstupně-výstupní operace

Vytvořte nový soubor HTML.

načtěte Azure Maps Web SDK a inicializujte mapový ovládací prvek. podrobnosti najdete v příručce k ovládacímu prvku mapa Azure Maps . Až budete s tímto krokem hotovi, váš soubor HTML by měl vypadat takto:

<!DOCTYPE html>
<html>

<head>
    <title></title>

    <meta charset="utf-8">

    <!-- Ensures that IE and Edge uses the latest version and doesn't emulate an older version -->
    <meta http-equiv="x-ua-compatible" content="IE=Edge">

    <!-- Ensures the web page looks good on all screen sizes. -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.js"></script>

    <script type='text/javascript'>

        var map;

        function GetMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                view: 'Auto',

                //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function() {

                // Write your code here to make sure it runs once the map resources are ready

            });
        }
    </script>
</head>

<body onload="GetMap()">
    <div id="myMap"></div>
</body>

</html>

načtěte modul Azure Maps prostorového vstupu. pro toto cvičení použijte CDN pro modul Azure Maps prostorového vstupu/výstupu. Níže přidejte odkaz na <head> element souboru HTML:
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
Inicializujte datasource a přidejte zdroj dat do mapy. Inicializujte layer a přidejte zdroj dat do vrstvy mapy. Potom vykreslete zdroj dat i vrstvu. Než se posuňte dolů k zobrazení úplného kódu v dalším kroku, zamyslete se nad nejlepšími místy pro vložení zdrojů dat a fragmentů kódu vrstvy. Navrácení: před tím, než programově spolupracujeme s mapou, doporučujeme počkat, až bude prostředek mapy připravený.
```
var datasource, layer;
```
a
```
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);

//Add a simple data layer for rendering the data.
layer = new atlas.layer.SimpleDataLayer(datasource);
map.layers.add(layer);
```

Pokaždé dohromady, váš kód HTML by měl vypadat jako následující kód. Tato ukázka demonstruje, jak číst soubor XML z adresy URL. Pak načtěte a zobrazte data funkce souboru na mapě.

<!DOCTYPE html>
<html>

<head>
    <title>Spatial IO Module Example</title>

    <meta charset="utf-8">

    <!-- Ensures that IE and Edge uses the latest version and doesn't emulate an older version -->
    <meta http-equiv="x-ua-compatible" content="IE=Edge">

    <!-- Ensures the web page looks good on all screen sizes. -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.js"></script>

    <!-- Add reference to the Azure Maps Spatial IO module. -->
    <script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>

    <script type='text/javascript'>
        var map, datasource, layer;

        function GetMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                view: 'Auto',

                //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function() {

                //Create a data source and add it to the map.
                datasource = new atlas.source.DataSource();
                map.sources.add(datasource);

                //Add a simple data layer for rendering the data.
                layer = new atlas.layer.SimpleDataLayer(datasource);
                map.layers.add(layer);

                //Read an XML file from a URL or pass in a raw XML string.
                atlas.io.read('superCoolKmlFile.xml').then(r => {
                    if (r) {
                        //Add the feature data to the data source.
                        datasource.add(r);

                        //If bounding box information is known for data, set the map view to it.
                        if (r.bbox) {
                            map.setCamera({
                                bounds: r.bbox,
                                padding: 50
                            });
                        }
                    }
                });
            });
        }
    </script>
</head>

<body onload="GetMap()">
    <div id="myMap"></div>
</body>

</html>

Nezapomeňte nahradit <Your Azure Maps Key> primární klíč. Otevřete soubor HTML a zobrazí se podobné výsledky jako na následujícím obrázku:

Další kroky

Funkce, kterou jsme tady ukázali, je jenom jedna z mnoha funkcí dostupných v modulu pro prostorové vstupně-výstupní operace. Přečtěte si následující příručky, kde se dozvíte, jak používat další funkce v modulu prostorového vstupu/výstupu:

Přidání jednoduché datové vrstvy

Čtení a zápis prostorových dat

Přidání vrstvy mapy OGC

Připojení ke službě WFS

Využití základních operací

Podrobnosti o podporovaných formátech dat

přečtěte si dokumentaci Azure Maps prostor v/v:

balení Azure Maps prostorového vstupu/výstupu

jak používat modul Azure Maps prostorového vstupu/výstupu

Ohodnoťte vaše zkušenosti

Požadavky

Instalace modulu pro prostorové vstupně-výstupní operace

Použití modulu pro prostorové vstupně-výstupní operace

Další kroky