Membuat sumber data

Artikel
10/18/2023

Azure Maps Web SDK menyimpan data di sumber data. Menggunakan sumber data akan mengoptimalkan operasi data untuk pembuatan kueri dan penyajian. Saat ini, ada dua jenis sumber data:

Sumber GeoJSON: Mengelola data lokasi mentah dalam format GeoJSON secara lokal. Baik untuk himpunan data kecil hingga menengah (di atas ratusan ribu bentuk).
Sumber petak peta vektor: Memuat data yang diformat sebagai petak peta vektor untuk tampilan peta saat ini, didasarkan pada sistem petak peta. Ideal untuk himpunan data besar hingga masif (jutaan atau miliaran bentuk).

Sumber data GeoJSON

Sumber data berbasis GeoJSON memuat dan menyimpan data secara lokal menggunakan kelas DataSource. Data GeoJSON dapat dibuat atau dibuat secara manual menggunakan kelas pendukung di namespace layanan atlas.data. Kelas DataSource ini menyediakan fungsi untuk mengimpor file GeoJSON lokal atau jarak jauh. File GeoJSON jarak jauh harus dihosting pada titik akhir yang diaktifkan COR. Kelas DataSource menyediakan fungsi untuk data titik pengklusteran. Dan, data dapat dengan mudah ditambahkan, dihapus, dan diperbarui dengan kelas DataSource. Kode berikut menunjukkan cara membuat data GeoJSON di Azure Maps.

//Create raw GeoJSON object.
var rawGeoJson = {
     "type": "Feature",
     "geometry": {
         "type": "Point",
         "coordinates": [-100, 45]
     },
     "properties": {
         "custom-property": "value"
     }
};

//Create GeoJSON using helper classes (less error prone and less typing).
var geoJsonClass = new atlas.data.Feature(new atlas.data.Point([-100, 45]), {
    "custom-property": "value"
});

Setelah dibuat, sumber data dapat ditambah ke peta melalui properti map.sources, yang merupakan SourceManager. Kode berikut menunjukkan cara membuat DataSource dan menambahkannya ke peta.

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

Kode berikut menunjukkan berbagai cara data GeoJSON dapat ditambahkan ke DataSource.

//GeoJsonData in the following code can be a single or array of GeoJSON features or geometries, a GeoJSON feature colleciton, or a single or array of atlas.Shape objects.

//Add geoJSON object to data source. 
source.add(geoJsonData);

//Load geoJSON data from URL. URL should be on a CORs enabled endpoint.
source.importDataFromUrl(geoJsonUrl);

//Overwrite all data in data source.
source.setShapes(geoJsonData);

Tip

Katakanlah Anda ingin menimpa semua data dalam DataSource. Jika Anda melakukan panggilan ke fungsi clear dan add, peta mungkin dirender ulang dua kali, yang dapat menyebabkan sedikit keterlambatan. Daripada menggunakan fungsi setShapes, yang akan menghapus dan mengganti semua data di sumber data dan hanya memicu satu render ulang peta.

Sumber petak peta vektor

Sumber petak peta vektor menjelaskan cara mengakses lapisan petak peta vektor. Gunakan kelas VectorTileSource untuk membuat instans sumber petak peta vektor. Lapisan petak peta vektor mirip lapisan petak peta tetapi tidak sama. Lapisan petak peta adalah gambar raster. Lapisan petak peta vektor adalah file terkompresi, dalam format PBF. File terkompresi ini terdiri atas data peta vektor dan satu atau beberapa lapisan. File dapat dirender dan ditata pada klien, berdasarkan gaya setiap lapisan. Data dalam petak peta vektor terdiri atas fitur geografis dalam bentuk titik, garis, dan poligon. Ada beberapa keuntungan menggunakan lapisan petak peta vektor daripada lapisan petak peta raster:

Ukuran file petak peta vektor biasanya jauh lebih kecil daripada petak peta raster yang setara. Dengan demikian, lebih sedikit bandwidth akan digunakan. Ini berarti latensi yang lebih rendah, peta yang lebih cepat, dan pengalaman pengguna yang lebih baik.
Karena petak peta vektor dirender pada klien, petak peta beradaptasi dengan resolusi perangkat tempat peta ditampilkan. Akibatnya, peta yang dirender tampak lebih terdefinisi dengan baik, dengan label sejernih kristal.
Mengubah gaya data di peta vektor tidak memerlukan pengunduhan data lagi karena gaya baru dapat diterapkan pada klien. Sebaliknya, mengubah gaya lapisan petak peta raster biasanya perlu memuat petak peta dari server, kemudian menerapkan gaya baru.
Karena data dikirimkan dalam bentuk vektor, ada lebih sedikit pemrosesan sisi server yang diperlukan untuk menyiapkan data. Akibatnya, data yang lebih baru dapat tersedia lebih cepat.

Azure Maps mematuhi Spesifikasi Petak Peta Vektor Mapbox, sebuah standar terbuka. Azure Maps menyediakan layanan petak peta vektor berikut sebagai bagian dari platform:

Petak peta jalan
Insiden lalu lintas
Arus lalu lintas
Azure Peta Creator juga memungkinkan petak peta vektor kustom dibuat dan diakses melalui REnder - Get Map Tile API

Tip

Saat menggunakan petak peta gambar vektor atau raster dari layanan render Azure Maps dengan SDK web, Anda dapat mengganti atlas.microsoft.com dengan tempat penampung {azMapsDomain}. Tempat penampung ini akan diganti dengan domain yang sama, yang digunakan oleh peta dan akan secara otomatis menambahkan detail autentikasi yang sama juga. Ini sangat menyederhanakan autentikasi dengan layanan render saat menggunakan autentikasi Microsoft Entra.

Untuk menampilkan data dari sumber petak peta vektor di peta, sambungkan sumber ke salah satu lapisan penyajian data. Semua lapisan yang menggunakan sumber vektor harus menentukan nilai sourceLayer dalam opsi. Kode berikut memuat layanan petak peta vektor alur lalu lintas Azure Maps sebagai sumber petak peta vektor, lalu menampilkannya di peta menggunakan lapisan baris. Sumber petak peta vektor ini memiliki satu himpunan data di lapisan sumber yang disebut "Alur lalu lintas". Data baris dalam himpunan data ini memiliki properti bernama traffic_level yang digunakan dalam kode ini untuk memilih warna dan menskalakan ukuran baris.

//Create a vector tile source and add it to the map.
var source = new atlas.source.VectorTileSource(null, {
    tiles: ['https://{azMapsDomain}/traffic/flow/tile/pbf?api-version=1.0&style=relative&zoom={z}&x={x}&y={y}'],
    maxZoom: 22
});
map.sources.add(source);

//Create a layer for traffic flow lines.
var flowLayer = new atlas.layer.LineLayer(source, null, {
    //The name of the data layer within the data source to pass into this rendering layer.
    sourceLayer: 'Traffic flow',

    //Color the roads based on the traffic_level property. 
    strokeColor: [
        'interpolate',
        ['linear'],
        ['get', 'traffic_level'],
        0, 'red',
        0.33, 'orange',
        0.66, 'green'
    ],

    //Scale the width of roads based on the traffic_level property. 
        strokeWidth: [
        'interpolate',
        ['linear'],
        ['get', 'traffic_level'],
        0, 6,
        1, 1
    ]
});

//Add the traffic flow layer below the labels to make the map clearer.
map.layers.add(flowLayer, 'labels');

Untuk sampel kerja lengkap tentang cara menampilkan data dari sumber petak peta vektor di peta, lihat Lapisan garis petak peta vektor di Sampel Azure Peta. Untuk kode sumber untuk sampel ini, lihat Kode sampel lapisan garis petak peta vektor.

Screenshot showing a map displaying data from a vector tile source.

Menyambungkan sumber data ke lapisan

Data dirender di peta menggunakan lapisan penyajian. Satu atau beberapa lapisan penyajian dapat mereferensikan satu sumber data. Lapisan penyajian berikut memerlukan sumber data:

Lapisan gelembung - merender data titik sebagai lingkaran yang diskalakan di peta.
Lapisan simbol- merender data titik sebagai ikon atau teks.
Lapisan peta panas - merender data titik sebagai peta panas kepadatan.
Lapisan baris - merender baris dan atau merender garis luar poligon.
Lapisan poligon - mengisi area poligon dengan warna solid atau pola gambar.

Kode berikut menunjukkan cara membuat sumber data, menambahkan ke peta, dan menyambungkan ke lapisan gelembung. Kemudian, impor data titik GeoJSON dari lokasi jarak jauh ke sumber data.

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

//Create a layer that defines how to render points in the data source and add it to the map.
map.layers.add(new atlas.layer.BubbleLayer(source));

//Load the earthquake data.
source.importDataFromUrl('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/significant_month.geojson');

Ada lapisan penyajian lain yang tidak terhubung ke sumber data ini, tetapi mereka langsung memuat data untuk penyajian.

Lapisan gambar - melapisi satu gambar di atas peta dan mengikat sudutnya ke serangkaian koordinat yang ditentukan.
Lapisan petak peta - menggantikan lapisan petak peta raster di atas peta.

Satu sumber data dengan beberapa lapisan

Beberapa lapisan dapat disambungkan ke satu sumber data. Ada banyak skenario berbeda saat opsi ini berguna. Contohnya, pertimbangkan skenario saat pengguna menggambar poligon. Kita harus merender dan mengisi area poligon saat pengguna menambah titik ke peta. Menambah garis bergaya untuk menguraikan poligon membuatnya lebih mudah melihat tepi poligon, saat pengguna menggambar. Untuk mengedit posisi individu dengan mudah di poligon, kita dapat menambahkan handel, seperti pin atau penanda, di atas setiap posisi.

Map showing multiple layers rendering data from a single data source

Di sebagian besar platform pemetaan, Anda memerlukan objek poligon, objek baris, dan pin untuk setiap posisi di poligon. Saat poligon dimodifikasi, Anda harus memperbarui baris dan pin secara manual, yang dapat dengan cepat menjadi kompleks.

Dengan Azure Peta, yang Anda butuhkan hanyalah satu poligon dalam sumber data seperti yang ditunjukkan dalam kode berikut.

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

//Create a polygon and add it to the data source.
source.add(new atlas.data.Feature(
        new atlas.data.Polygon([[[/* Coordinates for polygon */]]]));

//Create a polygon layer to render the filled in area of the polygon.
var polygonLayer = new atlas.layer.PolygonLayer(source, 'myPolygonLayer', {
     fillColor: 'rgba(255,165,0,0.2)'
});

//Create a line layer for greater control of rendering the outline of the polygon.
var lineLayer = new atlas.layer.LineLayer(source, 'myLineLayer', {
     strokeColor: 'orange',
     strokeWidth: 2
});

//Create a bubble layer to render the vertices of the polygon as scaled circles.
var bubbleLayer = new atlas.layer.BubbleLayer(source, 'myBubbleLayer', {
     color: 'orange',
     radius: 5,
     strokeColor: 'white',
     strokeWidth: 2
});

//Add all layers to the map.
map.layers.add([polygonLayer, lineLayer, bubbleLayer]);

Tip

Saat menambahkan lapisan ke peta menggunakan fungsi map.layers.add, ID atau instans lapisan yang ada dapat diteruskan sebagai parameter kedua. Hal ini akan memberi tahu peta itu untuk memasukkan lapisan baru yang ditambahkan di bawah lapisan yang ada. Selain melewati ID lapisan, metode ini juga mendukung nilai-nilai berikut.