Aracılığıyla paylaş


Basit bir veri katmanı ekleme

Uzamsal GÇ modülü bir SimpleDataLayer sınıf sağlar. Bu sınıf, haritada stil özelliklerini işlemeyi kolaylaştırır. Karma geometri türleri içeren stil özelliklerine ve veri kümelerine sahip veri kümelerini bile işleyebilir. Basit veri katmanı, birden çok işleme katmanını sarmalayarak ve stil ifadelerini kullanarak bu işlevi elde eder. Stil ifadeleri, bu sarmalanmış katmanların içindeki özelliklerin ortak stil özelliklerini arar. atlas.io.read İşlev ve atlas.io.write işlevi, stilleri okumak ve desteklenen bir dosya biçiminde yazmak için bu özellikleri kullanır. Özellikleri desteklenen bir dosya biçimine ekledikten sonra, dosya çeşitli amaçlarla kullanılabilir. Örneğin, dosya haritada stil özelliklerini görüntülemek için kullanılabilir.

stil özelliklerine ek olarak, SimpleDataLayer açılır pencere şablonuyla birlikte yerleşik bir açılır pencere özelliği sağlar. Bir özelliğe tıklandığında açılır pencere görüntülenir. İsterseniz varsayılan açılır pencere özelliği devre dışı bırakılabilir. Bu katman, kümelenmiş verileri de destekler. Bir kümeye tıklandığında, harita kümeyi yakınlaştırır ve tek tek noktalara ve alt kümelere genişletir.

SimpleDataLayer sınıfı, birçok geometri türüne ve özelliklere uygulanan birçok stile sahip büyük veri kümelerinde kullanılmak üzere tasarlanmıştır. Bu sınıf kullanıldığında, stil ifadeleri içeren altı katman ek yükü ekler. Bu nedenle, çekirdek işleme katmanlarını kullanmanın daha verimli olduğu durumlar vardır. Örneğin, bir özellikte birkaç geometri türü ve birkaç stil işlemek için çekirdek katmanı kullanın

Basit bir veri katmanı kullanma

sınıfı SimpleDataLayer , diğer işleme katmanları gibi kullanılır. Aşağıdaki kod, haritada basit bir veri katmanının nasıl kullanılacağını gösterir:

//Create a data source and add it to the map.
var datasource = new atlas.source.DataSource();
map.sources.add(datasource);

//Add a simple data layer for rendering data.
var layer = new atlas.layer.SimpleDataLayer(datasource);
map.layers.add(layer);

Aşağıdaki kod parçacığı, çevrimiçi bir kaynaktan verilere başvuran basit bir veri katmanı kullanmayı gösterir.

function InitMap()
{
  var map = new atlas.Map('myMap', {
    center: [-73.967605, 40.780452],
    zoom: 12,
    view: "Auto",

    //Add authentication details for connecting to Azure Maps.
    authOptions: {
      // Get an Azure Maps key at https://azuremaps.com/.
      authType: 'subscriptionKey',
      subscriptionKey: '{Your-Azure-Maps-Subscription-key}'
    },
  });    

  //Wait until the map resources are ready.
  map.events.add('ready', function () {

    //Create a data source and add it to the map.
    var datasource = new atlas.source.DataSource();
    map.sources.add(datasource);

    //Add a simple data layer for rendering data.
    var layer = new atlas.layer.SimpleDataLayer(datasource);
    map.layers.add(layer);

    //Load an initial data set.
    loadDataSet('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1717245/use-simple-data-layer.json');

    function loadDataSet(url) {
      //Read the spatial data and add it to the map.
      atlas.io.read(url).then(r => {
      if (r) {
        //Update the features in the data source.
        datasource.setShapes(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
          });
        }
      }
      });
    }
  });
}

İşleve loadDataSet geçirilen URL aşağıdaki json'a işaret ediyor:

{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [0, 0]
    },
    "properties": {
        "color": "red"
    }
}

Veri kaynağına özellik ekledikten sonra, basit veri katmanı bunları en iyi şekilde nasıl işleyebileceğinizi anlar. Tek tek özellikler için stiller özellikte özellik olarak ayarlanabilir.

Yukarıdaki örnek kod, özelliği olarak ayarlanmış redbir color GeoJSON noktası özelliğini gösterir.

Bu örnek kod, basit veri katmanını kullanarak nokta özelliğini işler ve aşağıdaki gibi görünür:

Mavi su üzerinde kırmızı bir nokta gösteren 0, 0 koordinatlarına sahip haritanın ekran görüntüsü, kırmızı nokta sembol katmanı kullanılarak eklendi.

Not

Harita başlatıldığında koordinatların ayarlandığına dikkat edin:

  center: [-73.967605, 40.780452]

Veri kaynağındaki değerin üzerine yazılır:

  "koordinatlar": [0, 0]

Basit veri katmanının gerçek gücü şu durumlarda gelir:

  • Veri kaynağında birkaç farklı özellik türü vardır; Veya
  • Veri kümesindeki özelliklerin üzerinde ayrı ayrı ayarlanmış birkaç stil özelliği vardır; Veya
  • Veri kümesinin tam olarak ne içerdiğinden emin değilsiniz.

Örneğin, XML veri akışlarını ayrıştırırken özelliklerin stillerini ve geometri türlerini tam olarak bilmiyor olabilirsiniz. Basit veri katmanı seçenekleri örneği, kml dosyasının özelliklerini işleyerek basit veri katmanının gücünü gösterir. Ayrıca basit veri katmanı sınıfının sağladığı çeşitli seçenekleri de gösterir. Bu örneğin kaynak kodu için GitHub'daki Azure Haritalar kod örneklerinde basit veri katmanı options.htmlbölümüne bakın.

Sol tarafta farklı basit veri katmanı seçeneklerini gösteren panel içeren haritanın ekran görüntüsü.

Not

Bu basit veri katmanı, KML balonlarını veya özellik özelliklerini tablo olarak görüntülemek için açılır şablon sınıfını kullanır. Varsayılan olarak, açılan pencerede işlenen tüm içerik bir iframe içinde bir güvenlik özelliği olarak korumalı alana eklenir. Bununla birlikte, sınırlamalar vardır:

  • Tüm betikler, formlar, işaretçi kilidi ve üst gezinti işlevleri devre dışı bırakılır. Tıklandığında bağlantıların yeni bir sekmede açılmasına izin verilir.
  • iframe'lerde parametresini srcdoc desteklemeyen eski tarayıcılar, az miktarda içerik işlemekle sınırlı olacaktır.

Açılan pencerelere yüklenen verilere güveniyorsanız ve bu betiklerin açılan pencerelere yüklenmesini istiyorsanız, açılan şablonlar sandboxContent seçeneğini false olarak ayarlayarak bunu devre dışı bırakabilirsiniz.

Varsayılan desteklenen stil özellikleri

Daha önce belirtildiği gibi, basit veri katmanı çekirdek işleme katmanlarından birkaçını sarmalar: kabarcık, sembol, çizgi, çokgen ve ekstrüzyonlu çokgen. Ardından, tek tek özelliklerde geçerli stil özelliklerini aramak için ifadeleri kullanır.

Azure Haritalar ve GitHub stili özellikleri desteklenen iki ana özellik adı kümesidir. Farklı Azure harita katmanı seçeneklerinin özellik adlarının çoğu, basit veri katmanındaki özelliklerin stil özellikleri olarak desteklenir. GitHub tarafından yaygın olarak kullanılan stil özellik adlarını desteklemek için bazı katman seçeneklerine ifadeler eklenmiştir. GitHub'ın GeoJSON eşleme desteği bu özellik adlarını tanımlar ve platformda depolanan ve işlenen GeoJSON dosyalarına stil eklemek için kullanılır. Stil özellikleri dışında tüm GitHub stil özellikleri basit veri katmanında marker-symbol desteklenir.

Okuyucu daha az yaygın bir stil özelliğiyle karşılaşırsa, bunu en yakın Azure Haritalar stil özelliğine dönüştürür. Ayrıca, basit veri katmanının getLayers işlevi kullanılarak ve katmanlardan herhangi birinde seçenekler güncelleştirilerek varsayılan stil ifadeleri geçersiz kılınabilir.

Aşağıdaki bölümlerde, basit veri katmanı tarafından desteklenen varsayılan stil özellikleriyle ilgili ayrıntılar sağlanır. Desteklenen özellik adının sırası da özelliğin önceliğidir. Aynı katman seçeneği için iki stil özelliği tanımlanmışsa, listedeki ilk özellik daha yüksek önceliğe sahiptir. Renkler herhangi bir CSS3 renk değeri olabilir; HEX, RGB, RGBA, HSL, HSLA veya adlandırılmış renk değeri.

Kabarcık katmanı stili özellikleri

Bir özellik Point veya MultiPointise ve özelliğin, noktayı simge olarak işlemek için özel simge olarak kullanılacak bir özelliği yoksa image , özellik ile BubbleLayerişlenir.

Katman seçeneği Desteklenen özellik adları Varsayılan değer
color color, marker-color '#1A73AA'
radius size1, marker-size2, scale1 8
strokeColor strokeColor, stroke '#FFFFFF'

[1] size ve scale değerleri skaler değerler olarak kabul edilir ve ile çarpılır 8

[2] GitHub marker-size seçeneği belirtilirse, yarıçap için aşağıdaki değerler kullanılır.

İşaretçi boyutu Radius
small 6
medium 8
large 12

Kümeler kabarcık katmanı kullanılarak da işlenir. Varsayılan olarak bir kümenin yarıçapı olarak 16ayarlanır. Kümenin rengi, aşağıdaki tabloda tanımlandığı gibi kümedeki nokta sayısına bağlı olarak değişir:

Puan sayısı Renk
>= 100 red
>= 10 yellow
< 10 green

Simge stili özellikleri

Bir özellik Point veya MultiPointise ve özelliği ise ve noktayı simge olarak işlemek için özel simge olarak kullanılacak bir özelliğe sahipse image , özellik ile SymbolLayerişlenir.

Katman seçeneği Desteklenen özellik adları Varsayılan değer
image image none
size size, marker-size1 1
rotation rotation 0
offset offset [0, 0]
anchor anchor 'bottom'

[1] GitHub marker-size seçeneği belirtilirse, simge boyutu seçeneği için aşağıdaki değerler kullanılır.

İşaretçi boyutu Sembol boyutu
small 0.5
medium 1
large 2

Nokta özelliği bir kümeyse, point_count_abbreviated özellik metin etiketi olarak işlenir. Görüntü işlenmez.

Çizgi stili özellikleri

Özellik bir LineString, MultiLineString, Polygonveya MultiPolygonise, özellik ile LineLayerişlenir.

Katman seçeneği Desteklenen özellik adları Varsayılan değer
strokeColor strokeColor, stroke '#1E90FF'
strokeWidth strokeWidth, stroke-width, stroke-thickness 3
strokeOpacity strokeOpacity, stroke-opacity 1

Çokgen stil özellikleri

Özellik bir Polygon veya MultiPolygonise ve özelliğin özelliği height yoksa veya height özelliği sıfırsa, özellik ile PolygonLayerişlenir.

Katman seçeneği Desteklenen özellik adları Varsayılan değer
fillColor fillColor, fill '#1E90FF'
fillOpacity fillOpacity, 'fill-opacity 0.5

Ekstrüde edilmiş çokgen stil özellikleri

Özellik bir Polygon veya MultiPolygonise ve değeri sıfırdan büyük bir height özelliğe sahipse, özellik ile PolygonExtrusionLayerişlenir.

Katman seçeneği Desteklenen özellik adları Varsayılan değer
base base 0
fillColor fillColor, fill '#1E90FF'
height height 0

Sonraki adımlar

Bu makalede kullanılan sınıflar ve yöntemler hakkında daha fazla bilgi edinin:

Haritalarınıza eklenecek daha fazla kod örneği için aşağıdaki makalelere bakın: