Uwaga
Dostęp do tej strony wymaga autoryzacji. Może spróbować zalogować się lub zmienić katalogi.
Dostęp do tej strony wymaga autoryzacji. Możesz spróbować zmienić katalogi.
Moduł Spatial IO usługi Azure Maps integruje dane przestrzenne z Azure Maps Web SDK przy użyciu języka JavaScript lub TypeScript. W tym poradniku przedstawiono, jak zintegrować i używać modułu Spatial IO w aplikacji internetowej.
Korzystając z niezawodnych funkcji w tym module, możesz wykonywać następujące czynności:
-
Odczytywanie i zapisywanie danych przestrzennych. Możesz użyć formatów plików, które obejmują:
- Keyhole Markup Language (KML).
- Skompresowany plik KML (KMZ).
- GPS Exchange Format (GPX).
- Geograficzny Naprawdę Prosty RSS (GeoRSS).
- Geography Markup Language (GML).
- Geograficzna notacja obiektów JavaScript (GeoJSON).
- Well-Known Text (WKT).
- Wartości rozdzielone przecinkami (CSV), gdy kolumny zawierają informacje przestrzenne.
- Połącz się z usługami Open Geospatial Consortium (OGC) i zintegruj się z zestawem SDK sieci Web usługi Azure Maps. Możesz również nakładać usługi Web Map Services (WMS) i Web Map Tile Services (WMTS) jako warstwy na mapie. Aby uzyskać więcej informacji, zobacz Dodawanie warstwy mapy z Open Geospatial Consortium (OGC).
- Wykonywanie zapytań dotyczących danych w usłudze funkcji sieci Web (WFS). Aby uzyskać więcej informacji, zobacz Nawiązywanie połączenia z usługą WFS.
- Nakładanie złożonych zestawów danych zawierających informacje o stylu, które mogą być renderowane automatycznie. Aby uzyskać więcej informacji, zobacz Dodawanie prostej warstwy danych.
- Używaj szybkich klas do czytania i zapisywania plików XML oraz plików rozdzielanych. Aby uzyskać więcej informacji, zobacz Podstawowe operacje I/O.
Poniższy film wideo zawiera omówienie modułu Spatial IO w zestawie SDK internetowym usługi Azure Maps.
Ostrzeżenie
Używaj danych i usług tylko z zaufanego źródła, zwłaszcza jeśli dane są przywołyne z innej domeny. Moduł Spatial IO podejmuje kroki w celu zminimalizowania ryzyka, ale nie należy zezwalać na żadne niebezpieczne dane w aplikacji niezależnie od tego.
Wymagania wstępne
Instalowanie modułu We/Wy przestrzennego
Moduł We/Wy przestrzenny Azure Maps można załadować, wykorzystując jedną z dwóch opcji:
Pierwszą opcją jest użycie globalnie hostowanej sieci dostarczania treści Azure dla modułu wejścia/wyjścia przestrzennego Azure Maps. Użyj następującego tagu skryptu w
<head>
elemencie pliku HTML, aby dodać odwołanie:<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
Za pomocą drugiej opcji możesz załadować kod źródłowy dla usługi azure-maps-spatial-io lokalnie i hostować go za pomocą aplikacji. Ten pakiet zawiera również definicje języka TypeScript. Użyj następującego polecenia, aby zainstalować pakiet:
npm install azure-maps-spatial-io
Użyj deklaracji importu, aby dodać moduł do pliku źródłowego:
import * as spatial from "azure-maps-spatial-io";
Aby dowiedzieć się więcej, zobacz How to use the Azure Maps map control npm package (Jak używać pakietu npm kontrolki mapy usługi Azure Maps).
Wdrożenie modułu Wejścia/Wyjścia przestrzennego
Utwórz nowy plik HTML.
Załaduj internetowy zestaw SDK usługi Azure Maps i zainicjuj kontrolkę mapy. Aby uzyskać szczegółowe informacje, zobacz Przewodnik sterowania mapami usługi Azure Maps. Plik HTML powinien wyglądać następująco:
<!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>
Załaduj moduł Azure Maps Spatial IO i użyj sieci dostarczania zawartości dla tego modułu. Dodaj następujące odwołanie do
<head>
elementu pliku HTML:<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
Zainicjuj źródło danych i dodaj je do mapy.
Zainicjuj prostą warstwę danych i dodaj do niej źródło danych.
Renderuj warstwę danych.
Przed przewinięciem w dół, aby zobaczyć pełny kod, przejdź do następnego kroku i określ najlepsze miejsca na umieszczenie fragmentów kodu źródła danych i kodu warstwy. Poczekaj, aż zasoby mapy będą gotowe przed programowym manipulowaniem mapą.
var datasource, layer;
Znajdź najlepsze miejsca do umieszczania fragmentów kodu.
//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);
Kod HTML powinien wyglądać podobnie do poniższego. Przykładowy kod przedstawia sposób wyświetlania danych funkcji pliku XML na mapie.
Uwaga
W tym przykładzie użyto 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>
Pamiętaj, aby zastąpić
<Your Azure Maps Key>
kluczem subskrypcji. Plik HTML powinien zawierać obraz, który wygląda następująco:
Powiązana zawartość
W tym artykule opisano tylko jedną z wielu funkcji dostępnych w module I/O przestrzennego. Aby dowiedzieć się więcej o innych, przeczytaj następujące przewodniki: