Menggunakan modul Azure Maps Spatial IO

Artikel
02/25/2025

Modul Azure Maps Spatial IO mengintegrasikan data spasial dengan Azure Maps Web SDK dengan menggunakan JavaScript atau TypeScript. Panduan ini menunjukkan cara mengintegrasikan dan menggunakan modul IO Spasial dalam aplikasi web.

Anda dapat menggunakan fitur yang kuat dalam modul ini untuk:

Membaca dan menulis data spasial. Anda dapat menggunakan format file yang mencakup:
- Keyhole Markup Language (KML).
- KML Terkompresi (KMZ).
- Format Pertukaran GPS (GPX).
- Sindikasi Geografis Sangat Sederhana (GeoRSS).
- Bahasa Markup Geografi (GML).
- Notasi Objek JavaScript Geografis (GeoJSON).
- Teks Terkenal (WKT).
- Nilai yang Dipisahkan Koma (CSV) saat kolom menyertakan informasi spasial.
Sambungkan ke layanan Open Geospatial Consortium (OGC) dan integrasikan dengan Azure Maps Web SDK. Anda juga dapat melapisi 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 Menyambungkan ke layanan WFS.
Overlay himpunan data kompleks yang berisi informasi gaya, yang dapat dirender secara otomatis. Untuk informasi selengkapnya, lihat Menambahkan lapisan data sederhana.
Gunakan XML berkecepatan tinggi dan kelas pembaca dan penulis file yang dibatasi. Untuk informasi selengkapnya, lihat Operasi IO Inti.

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

Peringatan

Gunakan data dan layanan hanya dari sumber yang Anda percayai, terutama jika data dirujuk dari domain lain. Modul IO Spasial mengambil langkah-langkah untuk meminimalkan risiko, tetapi Anda tidak boleh mengizinkan data berbahaya apa pun ke dalam aplikasi Anda terlepas dari itu.

Prasyarat

Akun Azure Maps
Kunci langganan

Menginstal modul IO Spasial

Anda dapat memuat modul IO Spasial Azure Maps dengan menggunakan salah satu dari dua opsi berikut:

Opsi pertama adalah menggunakan jaringan pengiriman konten Azure yang dihosting secara global untuk modul IO Spasial Azure Maps. Gunakan tag skrip berikut dalam <head> elemen file HTML untuk menambahkan referensi:
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
Dengan opsi kedua, Anda dapat memuat kode sumber untuk azure-maps-spatial-io secara lokal, dan menghostingnya dengan aplikasi Anda. Paket ini juga memasukkan definisi TypeScript. Gunakan perintah berikut untuk menginstal paket:
```
npm install azure-maps-spatial-io
```
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 Maps.

Menerapkan modul IO Spasial

Buat file HTML baru.

Muat Azure Maps Web SDK dan inisialisasi kontrol peta. Lihat panduan kontrol peta Azure Maps untuk detailnya. File HTML Anda akan terlihat seperti ini:

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

Muat modul IO Spasial Azure Maps dan gunakan jaringan pengiriman konten 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 sumber data dan tambahkan ke peta.
Inisialisasi lapisan data sederhana dan tambahkan sumber data ke dalamnya.
Merender lapisan data.
Sebelum Anda menggulir ke bawah untuk melihat kode lengkap di langkah berikutnya, tentukan tempat terbaik untuk menempatkan sumber data dan cuplikan kode lapisan. Tunggu hingga sumber daya peta siap sebelum Anda memanipulasi peta secara terprogram.
```
var datasource, layer;
```
Temukan tempat terbaik untuk menempatkan cuplikan kode.
```
//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 akan terlihat seperti berikut ini. Kode sampel menunjukkan kepada Anda 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">

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

Ingatlah untuk mengganti <Your Azure Maps Key> dengan kunci langganan Anda. File HTML Anda harus menyertakan gambar yang terlihat seperti ini:

Artikel ini hanya menjelaskan salah satu dari banyak fitur yang tersedia dalam modul IO Spasial. Untuk mempelajari tentang orang lain, baca panduan berikut:

Bagikan melalui

Menggunakan modul Azure Maps Spatial IO

Prasyarat

Menginstal modul IO Spasial

Menerapkan modul IO Spasial

Saran dan Komentar

Sumber Daya Tambahan:

Bagikan melalui

Menggunakan modul Azure Maps Spatial IO

Prasyarat

Menginstal modul IO Spasial

Menerapkan modul IO Spasial

Konten terkait

Saran dan Komentar

Sumber Daya Tambahan: