Share via

Menambahkan lapisan data sederhana

  • Artikel

Modul IO spasial menyediakan kelas SimpleDataLayer. Kelas ini memudahkan untuk merender fitur dengan gaya pada peta. Kelas ini bahkan dapat merender himpunan data yang memiliki properti gaya dan himpunan data yang berisi campuran jenis geometri. Lapisan data sederhana mencapai fungsionalitas ini dengan mengemas beberapa lapisan penyajian dan menggunakan ekspresi gaya. Ekspresi gaya mencari properti gaya umum dari fitur di dalam kemasan lapisan ini. Fungsi atlas.io.read dan fungsi atlas.io.write menggunakan properti ini untuk membaca dan menulis gaya ke dalam format file yang didukung. Setelah menambahkan properti ke format file yang didukung, file dapat digunakan untuk berbagai tujuan. Misalnya, file dapat digunakan untuk menampilkan fitur dengan gaya pada peta.

Selain fitur gaya, SimpleDataLayer menyediakan fitur popup bawaan dengan templat popup. Popup ditampilkan saat fitur diklik. Fitur popup default dapat dinonaktifkan, jika diinginkan. Lapisan ini juga mendukung data kluster. Saat kluster diklik, peta memperbesar tampilan ke dalam kluster dan memperluasnya menjadi titik dan subklaster individual.

Kelas SimpleDataLayer ini dapat digunakan pada himpunan data besar dengan berbagai jenis geometri dan gaya yang diterapkan pada fitur. Saat digunakan, kelas ini menambahkan enam lapisan overhead yang berisi ekspresi gaya. Jadi, terkadang ada beberapa kasus yang lebih efisien dengan menggunakan lapisan penyajian inti. Misalnya, gunakan lapisan inti untuk merender beberapa jenis geometri dan gaya pada fitur

Menggunakan lapisan data sederhana

SimpleDataLayerKelas ini digunakan seperti lapisan penyajian lainnya yang digunakan. Kode berikut menunjukkan cara menggunakan lapisan data sederhana dalam peta:

//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);

Cuplikan kode berikut menunjukkan menggunakan lapisan data sederhana, mereferensikan data dari sumber online.

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
          });
        }
      }
      });
    }
  });
}

Url yang diteruskan ke loadDataSet fungsi menunjuk ke json berikut:

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

Setelah Anda menambahkan fitur ke sumber data, lapisan data sederhana mencari tahu cara terbaik untuk merendernya. Gaya untuk fitur individual dapat di-set sebagai properti pada fitur.

Kode sampel di atas menunjukkan fitur titik GeoJSON dengan properti diatur color ke red.

Kode sampel ini merender fitur titik menggunakan lapisan data sederhana, dan muncul sebagai berikut:

Cuplikan layar peta dengan koordinat 0, 0 yang menunjukkan titik merah di atas air biru, titik merah ditambahkan menggunakan lapisan simbol.

Catatan

Perhatikan bahwa koordinat yang ditetapkan ketika peta diinisialisasi:

  tengah: [-73.967605, 40.780452]

Ditimpa oleh nilai dari sumber data:

  "coordinates": [0, 0]

Daya nyata dari lapisan data sederhana muncul ketika:

  • Ada beberapa jenis fitur yang berbeda dalam sumber data; Atau
  • Fitur dalam himpunan data memiliki beberapa properti gaya yang di-set secara individual di dalamnya; Atau
  • Anda tidak yakin apa isi dari himpunan data yang tepat.

Misalnya saat mengurai umpan data XML, Anda mungkin tidak mengetahui jenis gaya dan geometri yang tepat dari fitur tersebut. Sampel opsi lapisan data Sederhana menunjukkan kekuatan lapisan data sederhana dengan merender fitur file KML. Sampel ini juga menunjukkan berbagai opsi yang tersedia pada kelas lapisan data sederhana. Untuk kode sumber untuk sampel ini, lihat Lapisan data sederhana options.html dalam sampel kode Azure Maps di GitHub.

Cuplikan layar peta dengan panel di sebelah kiri memperlihatkan berbagai opsi lapisan data sederhana.

Catatan

Lapisan data sederhana ini menggunakan kelas templat popup untuk menampilkan balon KML atau properti fitur sebagai tabel. Secara default, semua konten yang di-render pada popup akan dimasukkan ke kotak pasir di dalam iframe sebagai fitur keamanan. Namun, ada beberapa batasan:

  • Semua skrip, format, pointer lock, dan fungsionalitas navigasi atas dinonaktifkan. Tautan diizinkan untuk terbuka di tab baru saat diklik.
  • Browser lama yang tidak mendukung parameter srcdoc pada iframe hanya dapat merender konten dalam jumlah kecil.

Jika Anda mempercayai data yang dimuat ke dalam popup dan mungkin menginginkan skrip yang dimuat ke dalam popup ini dapat mengakses aplikasi Anda, Anda dapat menonaktifkannya dengan mengatur opsi templat popup sandboxContent menjadi salah.

Properti gaya yang didukung secara default

Seperti disebutkan sebelumnya, lapisan data sederhana mengemas beberapa lapisan penyajian inti: gelembung, simbol, garis, poligon, dan poligon ekstrusi. Lapisan data ini kemudian menggunakan ekspresi untuk mencari properti gaya yang valid pada fitur individual.

Properti gaya Azure Maps dan GitHub adalah dua set utama nama properti yang didukung. Sebagian besar nama properti dari berbagai opsi lapisan peta Azure didukung sebagai properti gaya fitur dalam lapisan data sederhana. Ekspresi telah ditambahkan ke beberapa opsi lapisan untuk mendukung nama properti gaya yang umumnya digunakan oleh GitHub. Dukungan peta GeoJSON GitHub mendefinisikan nama properti ini, dan digunakan untuk menata file GeoJSON yang disimpan dan dirender dalam platform. Semua properti gaya GitHub didukung di lapisan data sederhana, kecuali marker-symbol properti gaya.

Jika pembaca menemukan properti gaya yang kurang umum, pembaca akan mengonversinya ke properti gaya Azure Maps terdekat. Selain itu, ekspresi gaya default dapat ditimpa dengan menggunakan getLayers fungsi lapisan data sederhana dan memperbarui opsi pada salah satu lapisan.

Bagian berikut ini menyediakan detail tentang properti gaya default yang didukung oleh lapisan data sederhana. Urutan nama properti yang didukung juga menjadi prioritas properti. Jika dua properti gaya ditetapkan untuk opsi layer yang sama, maka yang pertama dalam daftar memiliki prioritas yang lebih tinggi. Warna bisa dari semua nilai warna CSS3; HEX, RGB, RGBA, HSL, HSLA, atau nilai warna bernama.

Properti gaya lapisan gelembung

Jika fitur adalah Point atau MultiPoint, dan fitur tidak memiliki image properti yang akan digunakan sebagai ikon kustom untuk merender titik sebagai simbol, maka fitur dirender dengan BubbleLayer.

Opsi lapisan Nama-nama properti yang didukung Nilai default
color color, marker-color '#1A73AA'
radius size1, marker-size2, scale1 8
strokeColor strokeColor, stroke '#FFFFFF'

[1] Nilai size dan scale dianggap sebagai nilai skalar, dan dikalikan dengan 8

[2] Jika opsi GitHub marker-size ditentukan, maka nilai berikut digunakan untuk radius.

Ukuran penanda Radius
small 6
medium 8
large 12

Kluster juga di-render menggunakan lapisan gelembung. Secara default radius kluster di-set ke 16. Warna kluster bervariasi tergantung pada jumlah titik dalam kluster, seperti yang didefinisikan dalam tabel berikut:

Titik # Warna
>= 100 red
>= 10 yellow
< 10 green

Properti gaya simbol

Jika fitur adalah Point atau MultiPoint, dan fitur dan memiliki image properti yang akan digunakan sebagai ikon kustom untuk merender titik sebagai simbol, maka fitur dirender dengan SymbolLayer.

Opsi lapisan Nama-nama properti yang didukung Nilai default
image image none
size size, marker-size1 1
rotation rotation 0
offset offset [0, 0]
anchor anchor 'bottom'

[1] Jika opsi GitHub marker-size ditentukan, maka nilai berikut digunakan untuk opsi ukuran ikon.

Ukuran penanda Ukuran simbol
small 0.5
medium 1
large 2

Jika fitur titik adalah kluster, point_count_abbreviated properti dirender sebagai label teks. Tidak ada gambar yang dirender.

Properti gaya garis

Jika fiturnya adalah LineString, , MultiLineStringPolygon, atau MultiPolygon, maka fitur tersebut dirender dengan LineLayer.

Opsi lapisan Nama-nama properti yang didukung Nilai default
strokeColor strokeColor, stroke '#1E90FF'
strokeWidth strokeWidth, stroke-width, stroke-thickness 3
strokeOpacity strokeOpacity, stroke-opacity 1

Properti gaya poligon

Jika fiturnya adalah Polygon atau , dan fitur tidak memiliki height properti atau height properti adalah nol, maka fitur tersebut dirender dengan PolygonLayerMultiPolygon.

Opsi lapisan Nama-nama properti yang didukung Nilai default
fillColor fillColor, fill '#1E90FF'
fillOpacity fillOpacity, 'fill-opacity 0.5

Properti gaya poligon yang di-ekstrusi

Jika fiturnya adalah Polygon atau MultiPolygon, dan memiliki height properti dengan nilai lebih besar dari nol, fitur tersebut dirender dengan PolygonExtrusionLayer.

Opsi lapisan Nama-nama properti yang didukung Nilai default
base base 0
fillColor fillColor, fill '#1E90FF'
height height 0

Langkah berikutnya

Pelajari selengkapnya tentang kelas dan metode yang digunakan dalam artikel ini:

SimpleDataLayer

SimpleDataLayerOptions

Lihat artikel berikut untuk mengetahui sampel kode lainnya yang akan ditambahkan ke peta Anda:

Membaca dan menulis data spasial

Tambahkan lapisan peta OGC

Sambungkan ke layanan WFS

Memanfaatkan operasi inti

Detail format data yang didukung