Azure Haritalar Uzamsal GÇ modülünü kullanma
Azure Haritalar Uzamsal GÇ modülü, JavaScript veya TypeScript kullanarak uzamsal verileri Azure Haritalar Web SDK'sı ile tümleştirir. Bu kılavuz, Uzamsal GÇ modülünü bir web uygulamasında tümleştirmeyi ve kullanmayı gösterir.
Bu modüldeki sağlam özellikleri kullanarak şunları yapabilirsiniz:
-
Uzamsal verileri okuma ve yazma. Şunları içeren dosya biçimlerini kullanabilirsiniz:
- Anahtar Deliği İşaretlemeyi Dili (KML).
- Sıkıştırılmış KML (KMZ).
- GPS Değişim Biçimi (GPX).
- Coğrafi Gerçekten Basit Dağıtım (GeoRSS).
- Coğrafya İşaretlemeyi Dili (GML).
- Coğrafi JavaScript Nesne Gösterimi (GeoJSON).
- İyi Bilinen Metin (WKT).
- Sütunlar uzamsal bilgiler içerdiğinde virgülle Ayrılmış Değerler (CSV).
- Open Geospatial Consortium (OGC) hizmetlerine bağlanın ve Azure Haritalar Web SDK'sı ile tümleştirin. Ayrıca, Web Haritası Hizmetleri (WMS) ve Web Haritası Kutucuk Hizmetleri'ni (WMTS) harita üzerinde katman olarak da katmanlayabilirsiniz. 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 bilgileri içeren ve otomatik olarak işlenebilen 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.
Aşağıdaki video, Azure Haritalar Web SDK'sında Uzamsal GÇ modülüne genel bir bakış sağlar.
Uyarı
Özellikle verilere başka bir etki alanından başvurulsa, yalnızca güvendiğiniz bir kaynaktan gelen verileri ve hizmetleri kullanın. Uzamsal GÇ modülü, riski en aza indirmek için gerekli adımları uygular, ancak ne olursa olsun uygulamanıza tehlikeli veriler girmemesi gerekir.
Önkoşullar
Uzamsal GÇ modülünü yükleme
Aşağıdaki iki seçenekten birini kullanarak Azure Haritalar Uzamsal GÇ modülünü yükleyebilirsiniz:
İlk seçenek, Azure Haritalar Uzamsal GÇ modülü için genel olarak barındırılan Azure içerik teslim ağını kullanmaktır. Başvuruyu eklemek için HTML dosyasının öğesinde
<head>aşağıdaki betik etiketini kullanın:<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>İkinci seçenekle azure-maps-spatial-io kaynak kodunu yerel olarak yükleyebilir ve uygulamanızla barındırabilirsiniz. Bu paket, TypeScript tanımlarını da içerir. Paketi yüklemek için aşağıdaki komutu kullanın:
npm install azure-maps-spatial-ioModü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ü uygulama
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. HTML dosyanız şu şekilde görünmelidir:
<!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>Azure Haritalar Uzamsal GÇ modülünü yükleyin ve Azure Haritalar Uzamsal GÇ modülü için içerik teslim ağını 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>Veri kaynağını başlatın ve haritaya ekleyin.
Basit bir veri katmanı başlatın ve veri kaynağını buna ekleyin.
Veri katmanını işleme.
Sonraki adımda tam kodu görmek için aşağı kaydırmadan önce, veri kaynağını ve katman kodu parçacıklarını yerleştirmek için en iyi yerleri belirleyin. Haritayı program aracılığıyla işlemeden önce harita kaynakları hazır olana kadar bekleyin.
var datasource, layer;Kod parçacıklarını koymak için en iyi yerleri bulun.
//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 aşağıdaki gibi görünmelidir. Örnek kod, 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"> <!-- 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>yerine abonelik anahtarınızı değiştirmeyi
<Your Azure Maps Key>unutmayın. HTML dosyanız şuna benzer bir görüntü içermelidir:
İlgili içerik
Bu makalede, Uzamsal GÇ modülünde kullanılabilen birçok özelliğin yalnızca biri açıklanmaktadır. Diğer kişiler hakkında bilgi edinmek için aşağıdaki kılavuzları okuyun: