Cara menggunakan modul IO Spasial Azure Maps

Artikel
10/18/2023

SDK Azure Maps Web menyediakan modul IO Spasial, yang mengintegrasikan data spasial dengan SDK web Azure Maps menggunakan JavaScript atau TypeScript. Fitur canggih dalam modul ini memungkinkan pengembang untuk:

Membaca dan menulis data spasial. Format file yang didukung meliputi: file KML, KMZ, GPX, GeoRSS, GML, GeoJSON, dan CSV yang berisi kolom dengan informasi spasial. Juga mendukung Teks yang Dikenal (WKT).
Koneksi ke layanan Open Geospatial Consortium (OGC) dan berintegrasi dengan Azure Peta web SDK, dan Overlay Web Map Services (WMS) dan Web Map Tile Services (WMTS) sebagai lapisan di peta. Untuk informasi selengkapnya, lihat Menambahkan lapisan peta dari Open Geospatial Consortium (OGC).
Kueri data di Web Feature Service (WFS). Untuk informasi selengkapnya, lihat Koneksi ke layanan WFS.
Melapisi himpunan data kompleks yang berisi informasi gaya dan membuatnya dirender secara otomatis. Untuk informasi selengkapnya, lihat Menambahkan lapisan data sederhana.
Manfaatkan XML berkecepatan tinggi serta kelas pembaca dan penulis file yang dibatasi. Untuk informasi selengkapnya, lihat Operasi IO Inti.

Panduan ini menunjukkan cara mengintegrasikan dan menggunakan modul IO Spasial dalam aplikasi web.

Video ini memberikan gambaran umum tentang modul IO Spasial di SDK Azure Maps Web.

Peringatan

Hanya gunakan data dan layanan yang berasal dari sumber yang Anda percayai, terutama jika merujuknya dari domain lain. Modul IO spasial memang mengambil langkah-langkah untuk meminimalkan risiko, namun pendekatan paling aman terlalu tidak memungkinkan data berbahaya apa pun ke dalam aplikasi Anda dimulai.

Prasyarat

Akun Azure Peta
Kunci langganan

Menginstal modul IO Spasial

Anda dapat memuat modul IO spasial Azure Maps menggunakan salah satu dari dua opsi:

Azure CDN yang dihosting secara global untuk modul IO spasial Azure Maps. Untuk opsi ini, Anda menambahkan referensi ke JavaScript di elemen <head> file HTML.
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
Kode sumber untuk azure-maps-spatial-io dapat dimuat secara lokal, lalu dihosting dengan aplikasi Anda. Paket ini juga memasukkan definisi TypeScript. Untuk opsi ini, gunakan perintah berikut untuk menginstal paket:
```
npm install azure-maps-spatial-io
```
Kemudian, gunakan deklarasi impor untuk menambahkan modul ke dalam file sumber:
```
import * as spatial from "azure-maps-spatial-io";
```
Untuk mempelajari selengkapnya, lihat Cara menggunakan paket npm kontrol peta Azure Peta.

Menggunakan modul IO Spasial

Buat file HTML baru.

Muat Azure Maps Web SDK dan inisialisasi kontrol peta. Lihat panduan kontrol peta Azure Maps untuk detailnya. Setelah Anda selesai dengan langkah ini, file HTML Anda akan terlihat seperti ini:

<!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>

Muat modul IO spasial Azure Maps. Untuk latihan ini, gunakan CDN untuk modul IO spasial Azure Maps. Tambahkan referensi berikut ke <head> elemen file HTML Anda:
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
Inisialisasi datasource, lalu tambahkan sumber data ke peta. Inisialisasi layer, lalu tambahkan sumber data ke lapisan peta. Kemudian, render sumber data dan lapisannya. Sebelum Anda menggulir ke bawah untuk melihat kode lengkap di langkah berikutnya, pikirkan tentang tempat terbaik untuk meletakkan sumber data dan cuplikan kode lapisan. Ingatlah bahwa, sebelum kita memanipulasi peta secara terprogram, kita harus menunggu hingga sumber daya peta siap.
```
var datasource, layer;
```
dan
```
//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);
```

Kode HTML Anda sekarang akan terlihat seperti kode berikut. Sampel ini menunjukkan cara menampilkan data fitur file XML di peta.

Catatan

Contoh ini menggunakan 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>

Ingatlah untuk mengganti <Your Azure Maps Key> dengan kunci langganan Anda. Anda akan melihat hasil yang mirip dengan gambar berikut dalam file HTML Anda:

Langkah berikutnya

Fitur yang kami tunjukkan hanyalah salah satu dari banyak fitur yang tersedia dalam modul IO Spasial. Baca panduan berikut untuk mempelajari cara menggunakan fungsionalitas lain dalam modul IO Spasial:

Menambahkan lapisan data sederhana

Membaca dan menulis data spasial

Menambahkan lapisan peta OGC

Menyambungkan ke layanan WFS

Memanfaatkan operasi inti

Detail format data yang didukung

Lihat dokumentasi IO Spasial Azure Maps:

Paket IO Spasial Azure Maps

Cara menggunakan modul IO Spasial Azure Maps

Prasyarat

Menginstal modul IO Spasial

Menggunakan modul IO Spasial

Langkah berikutnya

Sumber Daya Tambahan: