Použití modulu Azure Maps Spatial IO

Článek
02/25/2025

Modul Azure Maps Spatial IO integruje prostorová data s webovou sadou SDK služby Azure Maps pomocí JavaScriptu nebo TypeScriptu. Tato příručka ukazuje, jak integrovat a používat modul Spatial IO ve webové aplikaci.

Robustní funkce v tomto modulu můžete použít k:

Čtení a zápis prostorových dat Můžete použít formáty souborů, které zahrnují:
- Keyhole Markup Language (KML).
- Komprimované KML (KMZ).
- GPS Exchange Format (GPX).
- Geografická opravdu jednoduchá syndikace (GeoRSS).
- GML (Geography Markup Language).
- Geografický zápis objektu JavaScriptu (GeoJSON).
- Dobře známý text (WKT).
- Hodnoty oddělené čárkami (CSV), když sloupce obsahují prostorové informace.
Připojte se ke službám Open Geospatial Consortium (OGC) a integrujte se se sadou Azure Maps Web SDK. Můžete také překryt služby WMS (Web Map Tile Services) a WMTS (Web Map Tile Services) 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í ke službě WFS.
Překryvné komplexní datové sady obsahující informace o stylu, které se můžou vykreslit automaticky. Další informace najdete v tématu Přidání jednoduché datové vrstvy.
Používejte vysokorychlostní třídy xml a oddělovače souborů a zapisovače. Další informace najdete v tématu Základní vstupně-výstupní operace.

Následující video obsahuje přehled modulu Spatial IO v sadě Azure Maps Web SDK.

Upozorňující

Data a služby používejte pouze ze zdroje, kterému důvěřujete, zejména pokud se na data odkazují z jiné domény. Modul Prostorových vstupně-výstupních operací provádí kroky k minimalizaci rizika, ale neměli byste do aplikace povolit žádná nebezpečná data bez ohledu na to.

Požadavky

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

Instalace modulu Spatial IO

Modul Azure Maps Spatial IO můžete načíst pomocí jedné z následujících dvou možností:

První možností je použít globálně hostované sítě azure pro doručování obsahu pro modul Azure Maps Spatial IO. Pomocí následující značky skriptu v <head> elementu souboru HTML přidejte odkaz:
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
Druhou možností můžete načíst zdrojový kód pro azure-maps-spatial-io místně a hostovat ho s vaší aplikací. Tento balíček obsahuje také definice TypeScriptu. K instalaci balíčku použijte následující příkaz:
```
npm install azure-maps-spatial-io
```
K přidání modulu do zdrojového souboru použijte deklaraci importu:
```
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 Maps.

Implementace modulu Spatial IO

Vytvořte nový soubor HTML.

Načtěte webovou sadu SDK služby Azure Maps a inicializujete ovládací prvek mapy. Podrobnosti najdete v průvodci mapou Azure Maps. Soubor HTML by měl vypadat takto:

<!DOCTYPE html>
<html>

<head>
    <title></title>

    <meta charset="utf-8">

    <!-- Ensure that Internet Explorer and Edge use the latest version and don't emulate an older version. -->
    <meta http-equiv="x-ua-compatible" content="IE=Edge">

    <!-- Ensure that 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 Maps Spatial IO a použijte síť pro doručování obsahu pro modul Azure Maps Spatial IO. 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 zdroj dat a přidá ho do mapy.
Inicializuje jednoduchou datovou vrstvu a přidá do ní zdroj dat.
Vykreslení datové vrstvy
Než se posunete dolů, abyste viděli celý kód v dalším kroku, určete nejlepší místa pro umístění fragmentů kódu zdroje dat a vrstvy. Než budete s mapou manipulovat programově, počkejte, až budou prostředky mapy připravené.
```
var datasource, layer;
```
Najděte nejlepší místa pro vložení fragmentů kódu.
```
//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);
```

Kód HTML by měl vypadat takto: Ukázkový kód 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">

    <!-- Ensure that Internet Explorer and Edge use the latest version and don't emulate an older version. -->
    <meta http-equiv="x-ua-compatible" content="IE=Edge">

    <!-- Ensure that 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. Soubor HTML by měl obsahovat obrázek, který vypadá takto:

Tento článek popisuje pouze jednu z mnoha funkcí dostupných v modulu Prostorové vstupně-výstupní operace. Další informace o ostatních najdete v následujících příručkách:

Sdílet prostřednictvím

Použití modulu Azure Maps Spatial IO

Požadavky

Instalace modulu Spatial IO

Implementace modulu Spatial IO

Váš názor

Další materiály

Sdílet prostřednictvím

Použití modulu Azure Maps Spatial IO

Požadavky

Instalace modulu Spatial IO

Implementace modulu Spatial IO

Související obsah

Váš názor

Další materiály