Azure Haritalar Spatial IO modülünü kullanma

Makale
08/29/2021
Okumak için 4 dakika

Azure Haritalar Web SDK'sı, JavaScript veya TypeScript kullanarak uzamsal verileri Azure Haritalar web SDK'sı ile tümleştiren Uzamsal IO modülünü sağlar. Bu modülde yer alan güçlü özellikler, geliştiricilerin şunların olmasına olanak sağlar:

Ortak uzamsal veri dosyalarını okuma ve yazma. Desteklenen dosya biçimleri şunlardır: Uzamsal bilgiler içeren sütunlar içeren KML, KMZ, GPX, GeoRSS, GML, GeoJSON ve CSV dosyaları. Ayrıca, Well-Known (WKT) destekler.
Bağlan (OGC) Open Geospatial Consortium ve Azure web SDK'sı ile Haritalar gerekir. Web Harita Hizmetleri'ni (WMS) ve Web Haritası Kutucuk Hizmetlerini (WMTS) harita üzerinde katmanlar olarak katmanla.
Bir veri kaynağında Web Feature Service (WFS).
Stil bilgileri içeren karmaşık veri kümelerini katmanla ve en az kodla otomatik olarak işlemelerini sağlar.
Yüksek hızlı XML ve sınırlandırılmış dosya okuyucu ve yazıcı sınıflarından faydalanın.

Bu kılavuzda, Uzamsal IO modülünü bir web uygulamasında tümleştirin ve kullanmayı öğrenin.

Bu videoda Azure Haritalar Web SDK'sı Uzamsal IO modülüne genel bir bakış sağlar.

Uyarı

Özellikle başka bir etki alanından başvurursanız, yalnızca güven istediğiniz bir kaynaktan gelen verileri ve hizmetleri kullanın. Uzamsal IO modülü riski en aza indirmek için gerekli adımları atsa da en güvenli yaklaşım, uygulamanıza herhangi bir verinin ilk olarak girilmesine izin vermek değildir.

Önkoşullar

Uzamsal IO modülünü kullanamadan önce bir Azure Haritalar hesabı ve hesabınız için birincil abonelik anahtarını alasınız.

Uzamsal IO modülünü yükleme

İki seçenek arasında azure Haritalar uzamsal IO modülünü de yükleyebilirsiniz:

Azure sanal makine uzamsal Azure CDN için Haritalar barındırılan sanal makine. Bu seçenek için, HTML dosyasının öğesinde <head> JavaScript'e bir başvuru eklersiniz.
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
azure-maps-spatial-io kaynak kodu yerel olarak yüklenebilir ve ardından uygulamanız ile barındırılabilir. Bu paket, TypeScript tanımlarını da içerir. Bu seçenek için, paketi yüklemek için aşağıdaki komutu kullanın:
```
npm install azure-maps-spatial-io
```
Ardından, HTML belgesinin öğesinde <head> JavaScript'e bir başvuru ekleyin:
```
<script src="node_modules/azure-maps-spatial-io/dist/atlas-spatial.min.js"></script>
```

Uzamsal IO modülünü kullanma

Yeni bir HTML dosyası oluşturun.

Azure web Haritalar SDK'sını yükleyin ve harita denetimine başlayın. Ayrıntılar için azure Haritalar harita denetimi kılavuzuna bakın. Bu adımı tamamlasanız HTML dosyanız şu şekilde görünmeli:

<!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/2/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/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"></div>
</body>

</html>

Azure Haritalar uzamsal IO modülünü yükleme. Bu alıştırmada, Azure CDN uzamsal Haritalar modülünün Haritalar kullanın. Aşağıdaki başvuru dosyasını <head> HTML dosyanız öğesine ekleyin:
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
bir datasource başlatma ve veri kaynağını haritaya ekleme. bir layer başlatma ve veri kaynağını harita katmanına ekleme. Ardından hem veri kaynağını hem de katmanı işebilirsiniz. Bir sonraki adımda kodun tamamını görmek için aşağı kaydırmadan önce, veri kaynağını ve katman kod parçacıklarını koymak için en iyi yerleri düşünebilirsiniz. Haritayı program aracılığıyla işlemeden önce harita kaynağının hazır hale gelene kadar beklememiz gerektiğini hatırlayın.
```
var datasource, layer;
```
ve
```
//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);
```

Hepsini bir araya koyarak HTML kodunuz aşağıdaki koda benzer şekilde görünmeli. Bu örnek, BIR URL'den XML dosyasının nasıl okunarak okunabileceklerini gösterir. Ardından, dosyanın özellik verilerini yükleniyor ve haritada görüntüleniyor.

<!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/2/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/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('superCoolKmlFile.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"></div>
</body>

</html>

yerine birincil <Your Azure Maps Key> anahtarınızı da unutmayın. HTML dosyanızı açın. Aşağıdaki görüntüye benzer sonuçlarla karşınıza çıktı elde edin:

Sonraki adımlar

Burada gösterdiğimiz özellik, Uzamsal IO modülünde kullanılabilen birçok özellik arasında yalnızca bir özelliktir. Uzamsal IO modülünde diğer işlevleri kullanmayı öğrenmek için aşağıdaki kılavuzları okuyun:

Basit bir veri katmanı ekleme

Uzamsal verileri okuma ve yazma

OGC harita katmanı ekleme

WFS hizmetine bağlanma

Çekirdek işlemlerden yararlanma

Desteklenen veri biçimi ayrıntıları

Azure Haritalar Spatial IO belgelerine bakın:

Azure Haritalar Spatial IO paketi

Azure Haritalar Spatial IO modülünü kullanma

Lütfen deneyiminizi değerlendirin

Önkoşullar

Uzamsal IO modülünü yükleme

Uzamsal IO modülünü kullanma

Sonraki adımlar