Jak používat modul Azure Mapy Spatial IO

Článek
10/18/2023

Sada Azure Mapy Web SDK poskytuje modul Spatial IO, který integruje prostorová data s webovou sadou SDK azure Mapy pomocí JavaScriptu nebo TypeScriptu. Robustní funkce v tomto modulu umožňují vývojářům:

Čtení a zápis prostorových dat Mezi podporované formáty souborů patří: KML, KMZ, GPX, GeoRSS, GML, GeoJSON a CSV soubory obsahující sloupce s prostorovými informacemi. Podporuje také dobře známý text (WKT).
Připojení otevřít služby OGC (Open Geospatial Consortium) a integrovat se sadou Azure Mapy web SDK a překryvnými službami WMS (Web Map Tile Services) a Web Map Tile Services (WMTS) jako vrstvy na mapě. Další informace naleznete v tématu Přidání vrstvy mapy z Open Geospatial Consortium (OGC).
Dotazování dat ve službě webových funkcí (WFS) Další informace najdete v tématu Připojení do služby WFS.
Překryvné komplexní datové sady, které obsahují informace o stylu, a mají je automaticky vykreslit. Další informace najdete v tématu Přidání jednoduché datové vrstvy.
Využijte vysokorychlostní třídy xml a oddělovače souborů a zapisovače. Další informace najdete v tématu Základní vstupně-výstupní operace.

Tato příručka ukazuje, jak integrovat a používat modul Spatial IO ve webové aplikaci.

Toto video obsahuje přehled modulu Spatial IO v sadě Azure Mapy Web SDK.

Upozorňující

Používejte pouze data a služby, které pocházejí ze zdroje, kterému důvěřujete, zejména pokud na něj odkazujete z jiné domény. Modul prostorových vstupně-výstupních operací provádí kroky k minimalizaci rizika, ale nejbezpečnější přístup neumožňuje do vaší aplikace začínat žádnými nebezpečnými daty.

Předpoklady

Účet Azure Mapy
Klíč předplatného

Instalace modulu Spatial IO

Modul prostorových vstupně-výstupních operací Azure Mapy můžete načíst pomocí jedné ze dvou možností:

Globálně hostovaný Azure CDN pro modul Azure Mapy prostorových vstupně-výstupních operací. Pro tuto možnost přidáte odkaz na JavaScript v <head> elementu souboru HTML.
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
Zdrojový kód pro azure-maps-spatial-io se dá načíst místně a pak hostovat s vaší aplikací. Tento balíček obsahuje také definice TypeScriptu. Pro tuto možnost nainstalujte balíček pomocí následujícího příkazu:
```
npm install azure-maps-spatial-io
```
Pak pomocí deklarace importu přidejte modul do zdrojového souboru:
```
import * as spatial from "azure-maps-spatial-io";
```
Další informace najdete v tématu Použití balíčku npm pro ovládací prvek mapy Azure Mapy.

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

Vytvořte nový soubor HTML.

Načtěte sadu Azure Mapy Web SDK a inicializujete ovládací prvek mapování. Podrobnosti najdete v průvodci ovládacími prvky mapy Azure Mapy. Po dokončení tohoto kroku by soubor HTML 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/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/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" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
</body>

</html>

Načtěte modul Azure Mapy prostorových vstupně-výstupních operací. V tomto cvičení použijte CDN pro modul Azure Mapy prostorových vstupně-výstupních operací. Do elementu <head> souboru HTML přidejte následující odkaz:
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
Inicializuje a datasourcepřidá zdroj dat do mapy. Inicializuje a layerpřidá zdroj dat do vrstvy mapy. Pak vykreslujte zdroj dat i vrstvu. Než se posunete dolů, abyste viděli celý kód v dalším kroku, zamyslete se nad nejlepším místem pro vložení zdroje dat a fragmentů kódu vrstvy. Vzpomeňte si, že před programovou manipulací s mapou bychom měli 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);
```

Váš kód HTML by teď měl vypadat jako následující kód. Tato ukázka ukazuje, jak zobrazit data funkcí souboru XML na mapě.

Poznámka:

Tento příklad používá Route66Attractions.xml.

<!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/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/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('Route66Attractions.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" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
</body>
</html>

Nezapomeňte nahradit <Your Azure Maps Key> klíčem předplatného. Ve vašem souboru HTML by se měly zobrazit výsledky podobné následujícímu obrázku:

Další kroky

Tato funkce, kterou jsme si ukázali, je pouze jednou z mnoha funkcí dostupných v modulu Prostorových vstupně-výstupních operací. V následujících příručkách se dozvíte, jak používat další funkce v modulu Prostorové vstupně-výstupní operace:

Přidání jednoduché datové vrstvy

Čtení a zápis prostorových dat

Přidání vrstvy mapy OGC

Připojení do služby WFS

Využití základních operací

Podrobnosti o podporovaném formátu dat

Projděte si dokumentaci ke službě Azure Mapy Spatial IO:

Balíček Azure Mapy Spatial IO

Jak používat modul Azure Mapy Spatial IO

Předpoklady

Instalace modulu Spatial IO

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

Další kroky

Další materiály