Azure Haritalar Uzamsal GÇ modülünü kullanma

Makale
09/28/2024

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

Uzamsal verileri okuma ve yazma. Desteklenen dosya biçimleri şunlardır: KML, KMZ, GPX, GeoRSS, GML, GeoJSON ve uzamsal bilgiler içeren sütunlar içeren CSV dosyaları. Ayrıca İyi Bilinen Metin (WKT) de destekler.
Open Geospatial Consortium (OGC) hizmetlerine bağlanın ve harita üzerinde katman olarak Azure Haritalar web SDK'sı ve katman Web Haritası Hizmetleri (WMS) ve Web Haritası Kutucuk Hizmetleri (WMTS) ile tümleştirin. Daha fazla bilgi için bkz . Open Geospatial Consortium'dan (OGC) harita katmanı ekleme.
Web Özellik Hizmeti'nde (WFS) verileri sorgulama. Daha fazla bilgi için bkz . WFS hizmetine bağlanma.
Stil bilgilerini içeren ve bunların otomatik olarak işlenmesini sağlayan karmaşık veri kümelerini yer paylaşımlı hale getirin. Daha fazla bilgi için bkz . Basit veri katmanı ekleme.
Yüksek hızlı XML ve sınırlandırılmış dosya okuyucu ve yazıcı sınıflarını kullanın. Daha fazla bilgi için bkz . Çekirdek GÇ işlemleri.

Bu kılavuz, Uzamsal GÇ modülünü bir web uygulamasında tümleştirmeyi ve kullanmayı gösterir.

Bu video, Azure Haritalar Web SDK'sında Uzamsal GÇ modülüne genel bir bakış sağlar.

Uyarı

Özellikle başka bir etki alanından başvuruyorsanız, yalnızca güvendiğiniz bir kaynaktan gelen verileri ve hizmetleri kullanın. Uzamsal GÇ modülü riski en aza indirmek için adımlar atar, ancak en güvenli yaklaşım, uygulamanıza herhangi bir tehlikeli verinin başlamasına izin vermez.

Önkoşullar

Azure Haritalar hesabı
Abonelik anahtarı

Uzamsal GÇ modülünü yükleme

İki seçenekten birini kullanarak Azure Haritalar uzamsal GÇ modülünü yükleyebilirsiniz:

Azure Haritalar uzamsal GÇ modülü için genel olarak barındırılan Azure CDN. Bu seçenek için, HTML dosyasının öğesinde JavaScript'e <head> 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ızla barındırılabilir. Bu paket, TypeScript tanımlarını da içerir. Bu seçenek için aşağıdaki komutu kullanarak paketi yükleyin:
```
npm install azure-maps-spatial-io
```
Ardından, modülü bir kaynak dosyaya eklemek için içeri aktarma bildirimini kullanın:
```
import * as spatial from "azure-maps-spatial-io";
```
Daha fazla bilgi edinmek için bkz. Azure Haritalar eşleme denetimi npm paketini kullanma.

Uzamsal GÇ modülünü kullanma

Yeni bir HTML dosyası oluşturun.

Azure Haritalar Web SDK'sını yükleyin ve harita denetimini başlatın. Ayrıntılar için Azure Haritalar harita denetim kılavuzuna bakın. Bu adımı tamamladıktan sonra HTML dosyanız şu şekilde görünmelidir:

<!DOCTYPE html>
<html>

<head>
    <title></title>

    <meta charset="utf-8">

    <!-- Ensures that Internet Explorer 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>

Azure Haritalar uzamsal GÇ modülünü yükleyin. Bu alıştırmada, Azure Haritalar uzamsal GÇ modülü için CDN'yi kullanın. HTML dosyanızın öğesine aşağıdaki başvuruyu <head> ekleyin:
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
bir datasourcebaşlatın ve veri kaynağını haritaya ekleyin. bir layerbaşlatın ve veri kaynağını harita katmanına ekleyin. Ardından hem veri kaynağını hem de katmanı işleyin. Sonraki adımda tam kodu görmek için aşağı kaydırmadan önce, veri kaynağını ve katman kodu parçacıklarını koymak için en iyi yerleri düşünün. Unutmayın, haritayı program aracılığıyla işlemeden önce harita kaynağı hazır olana kadar beklememiz gerekir.
```
var datasource, layer;
```
ile
```
//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);
```

HTML kodunuz artık aşağıdaki kod gibi görünmelidir. Bu örnek, bir XML dosyasının özellik verilerinin haritada nasıl görüntüleneceğini gösterir.

Not

Bu örnekte Route66Attractions.xml kullanılır.

<!DOCTYPE html>
<html>
<head>
    <title>Spatial IO Module Example</title>

    <meta charset="utf-8">

    <!-- Ensures that Internet Explorer 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>

yerine abonelik anahtarınızı değiştirmeyi <Your Azure Maps Key> unutmayın. HTML dosyanızda aşağıdaki görüntüye benzer sonuçlar görmeniz gerekir:

Sonraki adımlar

Gösterdiğimiz özellik, Uzamsal GÇ modülünde kullanılabilen birçok özellik arasında yalnızca bir tanesidir. Uzamsal GÇ modülündeki 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şlemden yararlanma

Desteklenen veri biçimi ayrıntıları

Azure Haritalar Uzamsal GÇ belgelerine bakın:

Uzamsal GÇ paketini Azure Haritalar

Aracılığıyla paylaş

Azure Haritalar Uzamsal GÇ modülünü kullanma

Önkoşullar

Uzamsal GÇ modülünü yükleme

Uzamsal GÇ modülünü kullanma

Sonraki adımlar

Geri Bildirim

Ek kaynaklar