Ekspresi gaya berbasis data (Web SDK)

  • Artikel

Ekspresi memungkinkan Anda menerapkan logika bisnis ke opsi gaya yang mengawasi properti yang ditentukan dalam setiap bentuk di sumber data. Ekspresi dapat memfilter data dalam sumber data atau lapisan. Ekspresi mungkin terdiri dari logika bersyarah, seperti pernyataan if. Selain itu, mereka dapat digunakan untuk memanipulasi data menggunakan: operator string, operator logis, dan operator matematika.

Gaya berbasis data mengurangi jumlah kode yang diperlukan untuk mengimplementasikan logika bisnis yang bersangkutan dengan gaya. Saat digunakan dengan lapisan, ekspresi dievaluasi menurut waktu render pada utas terpisah. Fungsionalitas ini memberikan peningkatan performa dibandingkan dengan mengevaluasi logika bisnis pada utas UI.

Video ini memberikan gambaran umum gaya berbasis data di Azure Maps Web SDK.


Ekspresi direpresentasikan sebagai array JSON. Elemen pertama dari ekspresi dalam array adalah string yang menentukan nama operator ekspresi. Misalnya, "+" atau "case". Elemen berikutnya (jika ada) adalah argumen untuk ekspresi. Setiap argumen adalah nilai literal (string, angka, boolean, atau null ), atau array ekspresi lainnya. Pseudocode berikut mendefinisikan struktur dasar ekspresi.

[ 
    expression_operator, 
    argument0, 
    argument1, 
    …
]

Azure Maps Web SDK mendukung banyak jenis ekspresi. Ekspresi dapat digunakan sendiri atau dikombinasikan dengan ekspresi lain.

Jenis ekspresi Deskripsi
Ekspresi agregat Ekspresi yang menentukan penghitungan yang diproses melalui serangkaian data dan dapat digunakan dengan opsi clusterProperties dari DataSource .
Ekspresi Boolean Ekspresi Boolean memberikan serangkaian ekspresi operator boolean untuk mengevaluasi perbandingan boolean.
Ekspresi warna Ekspresi warna memudahkan Anda membuat dan memanipulasi nilai warna.
Ekspresi bersyarat Ekspresi bersyarat menyediakan operasi logika yang mirip dengan pernyataan jika.
Ekspresi data Menyediakan akses ke data properti dalam suatu fitur.
Ekspresi Interpolasi dan Langkah Ekspresi interpolasi dan langkah dapat digunakan untuk menghitung nilai di sepanjang kurva atau fungsi langkah yang diinterpolasi.
Ekspresi khusus lapisan Ekspresi spesifik yang hanya berlaku untuk satu lapisan.
Ekspresi matematika Menyediakan operator matematika untuk melakukan penghitungan berbasis data dalam kerangka kerja ekspresi.
Ekspresi operator string Ekspresi operator string melakukan operasi konversi pada string, misalnya menggabungkan dan mengonversi kasus.
Ekspresi jenis Ekspresi jenis menyediakan alat untuk menguji dan mengonversi jenis data yang berbeda, seperti string, angka, dan nilai boolean.
Ekspresi pengikatan variabel Ekspresi pengikatan variabel menyimpan hasil penghitungan dalam variabel dan direferensikan di tempat lain dalam ekspresi beberapa kali, tanpa harus menghitung ulang nilai yang disimpan.
Ekspresi pembesaran tampilan Mengambil tingkat pembesaran tampilan peta saat ini pada waktu render.

Semua contoh dalam dokumen ini menggunakan fitur berikut untuk menunjukkan berbagai cara di mana berbagai jenis ekspresi dapat digunakan.

{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [-122.13284, 47.63699]
    },
    "properties": {
        "id": 123,
        "entityType": "restaurant",
        "revenue": 12345,
        "subTitle": "Building 40", 
        "temperature": 64,
        "title": "Cafeteria", 
        "zoneColor": "purple",
        "abcArray": ["a", "b", "c"],
        "array2d": [["a", "b"], ["x", "y"]],
        "_style": {
            "fillColor": "red"
        }
    }
}

Ekspresi data

Ekspresi data menyediakan akses ke data properti dalam suatu fitur.

Expression Jenis Pengembalian Deskripsi
['at', number, array] value Mengambil suatu item dari array.
['geometry-type'] string Mendapatkan jenis geometri fitur: Titik, MultiPoint, LineString, MultiLineString, Polygon, MultiPolygon.
['get', string] value Mendapatkan nilai properti dari properti fitur saat ini. Mengembalikan null jika properti yang diminta tidak ditemukan.
['get', string, object] value Mendapatkan nilai properti dari properti objek yang disediakan. Mengembalikan null jika properti yang diminta tidak ditemukan.
['has', string] Boolean Menentukan apakah properti fitur memiliki properti yang ditentukan.
['has', string, object] Boolean Menentukan apakah properti objek memiliki properti yang ditentukan.
['id'] value Mendapatkan ID fitur, jika tersedia.
['in', boolean | string | number, array] Boolean Menentukan apakah item ada dalam array
['in', substring, string] Boolean Menentukan apakah substring ada dalam string
['index-of', boolean | string | number, array | string]

['index-of', boolean | string | number, array | string, number]		 number Mengembalikan posisi pertama di mana item dapat ditemukan dalam array atau substring dapat ditemukan dalam string, atau -1 jika input tidak dapat ditemukan. Menerima indeks opsional untuk memulai pencarian.
['length', string | array] number Mendapatkan panjang suatu string atau array.
['slice', array | string, number]

['slice', array | string, number, number]		 string | larik Mengembalikan item dari array atau substring dari string dari indeks mulai tertentu, atau antara indeks awal dan indeks akhir jika ditetapkan. Nilai yang dikembalikan sudah termasuk indeks awal tetapi bukan dari indeks akhir.

Contoh

Properti fitur dapat diakses secara langsung dalam ekspresi dengan menggunakan ekspresi get. Contoh ini menggunakan nilai zoneColor dari fitur untuk menentukan properti warna lapisan gelembung.

var layer = new atlas.layer.BubbleLayer(datasource, null, {
    color: ['get', 'zoneColor'] //Get the zoneColor value.
});

Contoh di atas berfungsi dengan baik, jika semua fitur titik memiliki zoneColor properti . Jika tidak, warnanya default ke "hitam". Untuk mengubah warna mundur, gunakan ekspresi case yang dikombinasikan dengan ekspresi has untuk memeriksa apakah properti tersebut ada. Jika properti tidak ada, kembalikan warna mundur.

var layer = new atlas.layer.BubbleLayer(datasource, null, {
    color: [
        'case', //Use a conditional case expression.

        ['has', 'zoneColor'],   //Check to see if feature has a "zoneColor" property
        ['get', 'zoneColor'],   //If it does, use it.

        'blue'  //If it doesn't, default to blue.
    ]
});

Lapisan gelembung dan simbol merender koordinat semua bentuk dalam sumber data, secara default. Perilaku ini dapat menyoroti node poligon atau baris. Opsi filter dari lapisan dapat digunakan untuk membatasi jenis geometri dari fitur yang direndernya, dengan menggunakan ekspresi ['geometry-type'] dalam ekspresi boolean. Contoh berikut membatasi lapisan gelembung, sehingga hanya fitur Point yang dirender.

var layer = new atlas.layer.BubbleLayer(datasource, null, {
    filter: ['==', ['geometry-type'], 'Point']
});

Contoh berikut ini memungkinkan fitur Point dan MultiPoint untuk dirender.

var layer = new atlas.layer.BubbleLayer(datasource, null, {
    filter: ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']]
});

Demikian pula, kerangka Poligon dirender dalam lapisan baris. Untuk menonaktifkan perilaku ini dalam lapisan baris, tambahkan filter yang hanya memungkinkan fitur LineString dan MultiLineString.

Berikut adalah beberapa contoh lebih lanjut tentang cara menggunakan ekspresi data:

//Get item [2] from an array "properties.abcArray[1]" = "c"
['at', 2, ['get', 'abcArray']]

//Get item [0][1] from a 2D array "properties.array2d[0][1]" = "b"
['at', 1, ['at', 0, ['get', 'array2d']]]

//Check to see if a value is in an array "properties.abcArray.indexOf('a') !== -1" = true
['in', 'a', ['get', 'abcArray']]

//Gets the index of the value 'b' in an array "properties.abcArray.indexOf('b')" = 1
['index-of', 'b', ['get', 'abcArray']]

//Get the length of an array "properties.abcArray.length" = 3
['length', ['get', 'abcArray']]

//Get the value of a subproperty "properties._style.fillColor" = "red"
['get', 'fillColor', ['get', '_style']]

//Check that "fillColor" exists as a subproperty of "_style".
['has', 'fillColor', ['get', '_style']]

//Slice an array starting at index 2 "properties.abcArray.slice(2)" = ['c']
['slice', ['get', 'abcArray'], 2]

//Slice a string from index 0 to index 4 "properties.entityType.slice(0, 4)" = 'rest'
['slice', ['get', 'entityType'], 0, 4]

Ekspresi matematika

Ekspresi matematika menyediakan operator matematika untuk melakukan penghitungan berbasis data dalam kerangka kerja ekspresi.

Expression Jenis Pengembalian Deskripsi
['+', number, number, …] number Menghitung jumlah angka yang ditentukan.
['-', number] number Mengurangi 0 dengan angka yang ditentukan.
['-', number, number] number Mengurangi angka pertama dengan angka kedua.
['*', number, number, …] number Mengalikan angka yang ditentukan bersama-sama.
['/', number, number] number Membagi angka pertama dengan angka kedua.
['%', number, number] number Menghitung sisa saat membagi angka pertama dengan angka kedua.
['^', number, number] number Menghitung nilai pertama yang dinaikkan ke pangkat angka kedua.
['abs', number] number Menghitung nilai mutlak dari angka yang ditentukan.
['acos', number] number Menghitung arccosine dari angka yang ditentukan.
['asin', number] number Menghitung arcsine dari angka yang ditentukan.
['atan', number] number Menghitung arctangent dari angka yang ditentukan.
['ceil', number] number Membulatkan angka ke atas, ke bilangan bulat berikutnya.
['cos', number] number Menghitung cos dari angka yang ditentukan.
['distance', Point \| MultiPoint \| LineString \| MultiLineString \| Polygon \| MultiPolygon \| Feature \| FeatureCollection] number Menghitung jarak terpendek dalam meter antara fitur yang dievaluasi dan geometri input. Nilai jarak yang dikembalikan mungkin bervariasi secara presisi karena hilangnya presisi dari geometri pengodean, terutama di bawah tingkat pembesaran tampilan 13.
['e'] number Mengembalikan konstanta e matematika.
['floor', number] number Membulatkan angka ke bawah ke bilangan bulat sebelumnya.
['ln', number] number Menghitung logaritma natural dari angka yang ditentukan.
['ln2'] number Mengembalikan konstanta ln(2) matematika.
['log10', number] number Menghitung logaritma basis-sepuluh dari angka yang ditentukan.
['log2', number] number Menghitung logaritma basis-dua dari angka yang ditentukan.
['max', number, number, …] number Menghitung angka maksimum dalam rangkaian angka yang ditentukan.
['min', number, number, …] number Menghitung angka minimum dalam rangkaian angka yang ditentukan.
['pi'] number Mengembalikan konstanta PI matematika.
['round', number] number Membulatkan angka ke bilangan bulat terdekat. Nilai setengah dibulatkan dari nol. Misalnya, ['round', -1.5] dievaluasi ke -2.
['sin', number] number Menghitung sinus dari angka yang ditentukan.
['sqrt', number] number Menghitung akar kuadrat dari angka yang ditentukan.
['tan', number] number Menghitung tangen dari angka yang ditentukan.

Ekspresi agregat

Ekspresi agregat menentukan penghitungan yang diproses melalui serangkaian data dan dapat digunakan dengan opsi clusterProperties dari DataSource . Output dari ekspresi ini harus berupa angka atau boolean.

Ekspresi agregat mengambil tiga nilai: nilai operator, nilai awal, dan ekspresi untuk mengambil properti dari setiap fitur dalam data untuk menerapkan operasi agregat. Ekspresi ini memiliki format berikut:

[operator: string, initialValue: boolean | number, mapExpression: Expression]
  • operator: Fungsi ekspresi yang kemudian diterapkan pada semua nilai yang dihitung oleh mapExpression untuk setiap titik dalam kluster. Operator yang didukung:
    • Untuk angka: +, *, max, min
    • Untuk Boolean: all , any
  • initialValue: Nilai awal di mana nilai terhitung pertama diagregasi.
  • mapExpression: Ekspresi yang diterapkan terhadap setiap titik dalam himpunan data.

Contoh

Jika semua fitur dalam himpunan data memiliki revenue properti, yang merupakan angka. Kemudian, total pendapatan semua titik dalam sebuah klaster, yang dibuat dari himpunan data, dapat dihitung. Perhitungan ini dilakukan menggunakan ekspresi agregat berikut: ['+', 0, ['get', 'revenue']]

Akumulasi ekspresi

Ekspresi accumulated mendapatkan nilai properti kluster yang terakumulasi sejauh ini, digunakan dalam clusterProperties opsi sumber berkluster DataSource .

Penggunaan

["accumulated"]

Ekspresi Boolean

Ekspresi Boolean memberikan serangkaian ekspresi operator boolean untuk mengevaluasi perbandingan boolean.

Perbandingan dititik secara ketat ketika nilai dibandingkan. Nilai dari berbagai jenis yang berbeda selalu dianggap tidak setara. Kasus di mana jenis diketahui berbeda pada waktu penguraian dianggap tidak valid dan menghasilkan kesalahan penguraian.

Expression Jenis Pengembalian Deskripsi
['!', boolean] Boolean Negasi logis. Mengembalikan true jika input adalah false, dan false jika input adalah true.
['!=', value, value] Boolean Mengembalikan true jika nilai input tidak sama, false jika tidak.
['<', value, value] Boolean Mengembalikan true jika input pertama jauh lebih kecil dari yang kedua, dan false jika tidak. Argumen ini diperlukan untuk menjadi kedua string atau kedua angka.
['<=', value, value] Boolean Mengembalikan true jika input pertama kurang dari atau sama dengan yang kedua, false jika tidak. Argumen ini diperlukan untuk menjadi kedua string atau kedua angka.
['==', value, value] Boolean Mengembalikan true jika nilai input sama, dan false jika tidak. Argumen ini diperlukan untuk menjadi kedua string atau kedua angka.
['>', value, value] Boolean Mengembalikan true jika input pertama jauh lebih besar daripada yang kedua, dan false jika tidak. Argumen ini diperlukan untuk menjadi kedua string atau kedua angka.
['>=' value, value] Boolean Mengembalikan true jika input pertama lebih besar atau sama dengan yang kedua, dan false jika tidak. Argumen ini diperlukan untuk menjadi kedua string atau kedua angka.
['all', boolean, boolean, …] Boolean Mengembalikan true jika semua input adalah true, dan false jika tidak.
['any', boolean, boolean, …] Boolean Mengembalikan true jika ada input yang true, dan false jika tidak.
['within', Polygon | MultiPolygon | Feature<Polygon | MultiPolygon>] Boolean Mengembalikan true jika fitur yang dievaluasi sepenuhnya terkandung di dalam batas geometri input, dan false jika sebaliknya. Nilai input bisa jadi GeoJSON dari jenis Polygon, MultiPolygon, Feature, atau FeatureCollection yang valid. Fitur yang didukung untuk evaluasi:

- Titik: Mengembalikan false jika titik berada di batas atau di luar batas.
- LineString: Mengembalikan false jika ada bagian dari garis yang berada di luar batas, garis akan menentukan batas, atau titik akhir garis berada di batas.

Ekspresi bersyarat

Ekspresi bersyarat menyediakan operasi logika yang mirip dengan pernyataan jika.

Ekspresi berikut menjalankan operasi logika bersyarat pada data input. Misalnya, ekspresi case menyediakan logika "if/then/else" saat ekspresi match adalah seperti "switch-statement".

Ekspresi huruf besar/kecil

Ekspresi case adalah jenis ekspresi bersyarat yang menyediakan logika "jika/maka/kalau tidak". Jenis ekspresi ini melangkah melalui urutan persyaratan boolean. Ini mengembalikan nilai output dari syarat boolean pertama untuk dievaluasi sebagai benar.

Pseudocode berikut mendefinisikan struktur ekspresi case.

[
    'case',
    condition1: boolean, 
    output1: value,
    condition2: boolean, 
    output2: value,
    ...,
    fallback: value
]

Contoh

Contoh berikut melangkah melalui berbagai persyaratan boolean yang berbeda sampai menemukan persyaratan yang dievaluasi ke true, lalu mengembalikan nilai terkait tersebut. Jika tidak ada kondisi boolean yang dievaluasi ke true, nilai fallback dikembalikan.

var layer = new atlas.layer.BubbleLayer(datasource, null, {
    color: [
        'case',

        //Check to see if the first boolean expression is true, and if it is, return its assigned result.
        ['has', 'zoneColor'],
        ['get', 'zoneColor'],

        //Check to see if the second boolean expression is true, and if it is, return its assigned result.
        ['all', ['has', ' temperature '], ['>', ['get', 'temperature'], 100]],
        'red',

        //Specify a default value to return.
        'green'
    ]
});

Ekspresi pencocokan

Ekspresi match adalah jenis ekspresi bersyarat yang menyediakan logika mirip pernyataan-tukar. Input bisa berupa ekspresi apa pun seperti ['get', 'entityType'] yang mengembalikan string atau angka. Setiap label harus berupa nilai literal tunggal atau array nilai literal, yang nilainya harus berupa semua string atau semua angka. Input cocok jika salah satu nilai dalam array cocok. Setiap label harus unik. Jika jenis input tidak cocok dengan jenis label, hasilnya adalah nilai fallback.

Pseudocode berikut mendefinisikan struktur ekspresi match.

[
    'match',
    input: number | string,
    label1: number | string | (number | string)[], 
    output1: value,
    label2: number | string | (number | string)[], 
    output2: value,
    ...,
    fallback: value
]

Contoh

Contoh berikut mengamati properti entityType dari fitur Titik dalam lapisan gelembung yang mencari kecocokan. Jika menemukan kecocokan, nilai yang ditentukan akan dikembalikan atau itu akan mengembalikan nilai mundur.

var layer = new atlas.layer.BubbleLayer(datasource, null, {
    color: [
        'match',

        //Get the property to match.
        ['get', 'entityType'],

        //List the values to match and the result to return for each match.
        'restaurant', 'red',
        'park', 'green',

        //Specify a default value to return if no match is found.
        'black'
    ]
});

Contoh berikut ini menggunakan array untuk mencantumkan serangkaian label yang semuanya harus mengembalikan nilai yang sama. Pendekatan ini jauh lebih efisien daripada mencantumkan setiap label secara terpisah. Dalam hal ini, jika entityType properti adalah "restoran" atau "grocery_store", warna "merah" dikembalikan.

var layer = new atlas.layer.BubbleLayer(datasource, null, {
    color: [
        'match',

        //Get the property to match.
        ['get', 'entityType'],

        //List the values to match and the result to return for each match.
        ['restaurant', 'grocery_store'], 'red',

        'park', 'green',

        //Specify a default value to return if no match is found.
        'black'
    ]
});

Ekspresi gabungkan

Ekspresi coalesce melangkah melalui serangkaian ekspresi sampai nilai bukan-null pertama diperoleh, dan mengembalikan nilai tersebut.

Pseudocode berikut mendefinisikan struktur ekspresi coalesce.

[
    'coalesce', 
    value1, 
    value2, 
    …
]

Contoh

Contoh berikut menggunakan ekspresi coalesce untuk mengatur opsi textField dari lapisan simbol. title Jika properti hilang dari fitur atau diatur ke null, ekspresi mencoba mencari subTitle properti , jika hilang atau null, properti akan kembali ke string kosong.

var layer = new atlas.layer.SymbolLayer(datasource, null, {
    textOptions: {
        textField: [
            'coalesce',

            //Try getting the title property.
            ['get', 'title'],

            //If there is no title, try getting the subTitle. 
            ['get', 'subTitle'],

            //Default to an empty string.
            ''
        ]
    }
});

Contoh berikut menggunakan ekspresi coalesce untuk mengambil ikon gambar pertama yang tersedia yang tersedia di sprite peta dari daftar nama gambar yang ditentukan.

var layer = new atlas.layer.SymbolLayer(datasource, null, {
    iconOptions: {
        image: [
            'coalesce',

            //Try getting the image with id 'missing-image'.
            ['image', 'missing-image'],

            //Specify an image id to fallback to. 
            'marker-blue'
        ]
    }
});

Ekspresi jenis

Ekspresi jenis menyediakan alat untuk menguji dan mengonversi jenis data yang berbeda, seperti string, angka, dan nilai boolean.

Expression Jenis Pengembalian Deskripsi
['array', value] | ['array', type: "string" | "number" | "boolean", value] Objek[] Menegaskan bahwa input adalah array.
['boolean', value] | ["boolean", value, fallback: value, fallback: value, ...] Boolean Menegaskan bahwa nilai input adalah boolean. Jika beberapa nilai disediakan, masing-masing dievaluasi agar boolean diperoleh. Jika tidak ada input boolean, ekspresi tersebut adalah kesalahan.
['collator', { 'case-sensitive': boolean, 'diacritic-sensitive': boolean, 'locale': string }] kolator Mengembalikan kolator untuk digunakan dalam operasi perbandingan dependen lokal. Opsi yang peka huruf besar/kecil dan peka diakritik men-default ke salah. Argumen lokal menentukan tag bahasa IETF dari lokal untuk digunakan. Jika tidak tersedia, lokal default akan digunakan. Jika lokal yang diminta tidak tersedia, kolaator menggunakan lokal fallback yang ditentukan sistem. Gunakan resolved-locale untuk menguji hasil perilaku mundur lokal.
['literal', array]

['literal', object]		 larik | objek Mengembalikan array literal atau nilai objek. Gunakan ekspresi ini untuk mencegah array atau objek dievaluasi sebagai ekspresi, diperlukan saat array atau objek dikembalikan oleh ekspresi.
['image', string] string Memeriksa untuk melihat apakah ID gambar tertentu dimuat ke dalam sprite gambar peta. Jika ya, ID akan dikembalikan, jika tidak null akan muncul.
['number', value] | ["number", value, fallback: value, fallback: value, ...] number Menegaskan bahwa nilai input adalah angka. Jika beberapa nilai terseda, masing-masing akan dievaluasi untuk mendapatkan satu angka. Jika tidak ada input angka, ekspresi tersebut adalah kesalahan.
['object', value] | ["object", value, fallback: value, fallback: value, ...] Objek Menegaskan bahwa nilai input adalah sebuah objek. Jika beberapa nilai terseda, masing-masing akan dievaluasi untuk mendapatkan satu objek. Jika tidak ada input objek, ekspresi tersebut adalah kesalahan.
['string', value] | ["string", value, fallback: value, fallback: value, ...] string Menegaskan bahwa nilai input adalah string. Jika beberapa nilai terseda, masing-masing akan dievaluasi untuk mendapatkan satu string. Jika tidak ada input string, ekspresi tersebut adalah kesalahan.
['to-boolean', value] Boolean Mengonversi nilai input menjadi boolean. Hasilnya adalah false ketika input adalah string kosong, 0, false, null, atau NaN; sebaliknya jika true.
['to-color', value]

['to-color', value1, value2…]		 color Mengonversi nilai input menjadi warna. Jika tersedia beberapa nilai, masing-masing nilai dievaluasi untui mendapatkan konversi berhasil pertama. Jika tidak ada input yang dapat dikonversi, ekspresi tersebut adalah kesalahan.
['to-number', value]

['to-number', value1, value2, …]		 number Mengonversi nilai input menjadi angka, jika memungkinkan. Jika inputnya adalah null atau false, hasilnya adalah 0. Jika inputnya adalah true, hasilnya adalah 1. Jika inputnya adalah string, maka akan dikonversi menjadi angka menggunakan fungsi string ToNumber dari Spesifikasi Bahasa ECMAScript. Jika tersedia beberapa nilai, masing-masing nilai dievaluasi untui mendapatkan konversi berhasil pertama. Jika tidak ada input yang dapat dikonversi, ekspresi tersebut adalah kesalahan.
['to-string', value] string Mengonversi nilai input menjadi string. Jika inputnya adalah null, hasilnya adalah "". Jika inputnya adalah boolean, hasilnya adalah "true" atau "false". Jika inputnya adalah angka, maka akan dikonversi menjadi string menggunakan fungsi angka ToString dari Spesifikasi Bahasa ECMAScript. Jika input warna, maka akan dikonversi ke string warna CSS RGBA "rgba(r,g,b,a)". Jika tidak, input dikonversi menjadi string menggunakan fungsi JSON.stringify dari Spesifikasi Bahasa ECMAScript.
['typeof', value] string Mengembalikan string yang menjelaskan jenis nilai yang diberikan.

Tip

Jika pesan kesalahan yang mirip dengan Expression name must be a string, but found number instead. If you wanted a literal array, use ["literal", [...]]. muncul di konsol browser, itu berarti ada ekspresi di suatu tempat dalam kode Anda yang memiliki array yang tidak memiliki string untuk nilai pertamanya. Jika Anda ingin ekspresi mengembalikan array, bungkus array dengan ekspresi literal. Contoh berikut mengatur opsi ikon offset dari lapisan simbol, yang harus berupa larik yang berisi dua angka, dengan menggunakan ekspresi match untuk memilih di antara dua nilai offset berdasarkan nilai properti entityType dari fitur titik.

var layer = new atlas.layer.SymbolLayer(datasource, null, {
    iconOptions: {
        offset: [
            'match',

            //Get the entityType value.
            ['get', 'entityType'],

            //If the entity type is 'restaurant', return a different pixel offset. 
            'restaurant', ['literal', [0, -10]],

            //Default to value.
            ['literal', [0, 0]]
        ]
    }
});

Ekspresi warna

Ekspresi warna memudahkan Anda membuat dan memanipulasi nilai warna.

Expression Jenis Pengembalian Deskripsi
['interpolate-hcl', interpolation: ["linear"] \| ["exponential", base] \| ["cubic-bezier", x1, y1, x2, y2], input: number, stop_input_1: number, stop_output_1: Color, stop_input_n: number, stop_output_n: Color, ...] color Menghasilkan hasil yang berkelanjutan dan lancar dengan menginterpolasi antara pasangan nilai input dan output ("berhenti"). Berfungsi seperti interpolate, tetapi jenis output harus berwarna, dan interpolasi dilakukan di ruang warna Hue-Chroma-Luminance.
['interpolate-lab', interpolation: ["linear"] \| ["exponential", base] \| ["cubic-bezier", x1, y1, x2, y2], input: number, stop_input_1: number, stop_output_1: Color, stop_input_n: number, stop_output_n: Color, ...] color Menghasilkan hasil yang berkelanjutan dan lancar dengan menginterpolasi antara pasangan nilai input dan output ("berhenti"). Berfungsi seperti interpolate, tetapi jenis output harus berwarna, dan interpolasi dilakukan di ruang warna CIELAB.
['rgb', number, number, number] color Membuat nilai warna dari komponen merah, hijau, dan biru mulai antara 0 dan 255, dan komponen alfa dari 1. Jika ada komponen di luar rentang, ekspresi tersebut adalah kesalahan.
['rgba', number, number, number, number] color Membuat nilai warna dari komponen merah, hijau, biru mulai antara 0 dan 255, dan komponen alfa dalam rentang 0 dan 1. Jika ada komponen di luar rentang, ekspresi tersebut adalah kesalahan.
['to-rgba'] [angka, angka, angka, angka] Mengembalikan array empat elemen yang berisi komponen merah, hijau, biru, dan alfa warna input dalam urutan tersebut.

Contoh

Contoh berikut membuat nilai warna RGB yang memiliki nilai merah , dan nilai hijau dan biru yang dihitung dengan mengalikan 2.5 dengan nilai temperature properti .255 Ketika suhu berubah, warna berubah menjadi nuansa merah yang berbeda.

var layer = new atlas.layer.BubbleLayer(datasource, null, {
    color: [
        'rgb', //Create a RGB color value.

        255,    //Set red value to 255.

        ['*', 2.5, ['get', 'temperature']], //Multiple the temperature by 2.5 and set the green value.

        ['*', 2.5, ['get', 'temperature']]  //Multiple the temperature by 2.5 and set the blue value.
    ]
});

Ekspresi operator string

Ekspresi operator string melakukan operasi konversi pada string, misalnya menggabungkan dan mengonversi kasus.

Expression Jenis Pengembalian Deskripsi
['concat', string, string, …] string Menggabungkan beberapa string bersama-sama. Setiap nilai harus berupa string. Gunakan ekspresi jenis to-string untuk mengonversi jenis nilai lain menjadi string, jika diperlukan.
['downcase', string] string Mengonversi string yang ditentukan menjadi huruf kecil.
['is-supported-script', string] | ['is-supported-script', Expression] Boolean Menentukan jika string input menggunakan tataan karakter yang didukung oleh tumpukan font saat ini. Misalnya: ['is-supported-script', 'ಗೌರವಾರ್ಥವಾಗಿ']
['resolved-locale', string] string Mengembalikan tag bahasa IETF dari lokal yang digunakan oleh kolaator yang disediakan yang dapat digunakan untuk menentukan lokal sistem default atau untuk menentukan apakah lokal yang diminta berhasil dimuat.
['upcase', string] string Mengonversi string yang ditentukan menjadi huruf besar.

Contoh

Contoh berikut mengonversi properti temperature dari fitur titik menjadi string, kemudian menggabungkan "°F" ke akhir fitur tersebut.

var layer = new atlas.layer.SymbolLayer(datasource, null, {
    textOptions: {
        textField: ['concat', ['to-string', ['get', 'temperature']], '°F'],

        //Some additional style options.
        offset: [0, -1.5],
        size: 12,
        color: 'white'
    }
});

Ekspresi di atas merender pin di peta dengan teks "64°F" dilapisi di atasnya seperti yang ditunjukkan pada gambar berikut.

Screenshot of a map that demonstrates the string operator expression example.

Ekspresi Interpolasi dan Langkah

Ekspresi interpolasi dan langkah dapat digunakan untuk menghitung nilai di sepanjang kurva atau fungsi langkah yang diinterpolasi. Berbagai ekspresi ini mengambil ekspresi yang mengembalikan nilai numerik sebagai inputnya, misalnya ['get', 'temperature']. Nilai input dievaluasi terhadap pasangan nilai input dan output, untuk menentukan nilai yang paling sesuai dengan kurva terinterpolasi atau fungsi langkah. Nilai output disebut "stop". Nilai input untuk setiap stop harus berupa angka dan berada dalam urutan naik. Nilai output harus berupa angka, dan array angka, atau warna.

Ekspresi interpolasi

Ekspresi interpolate dapat digunakan untuk menghitung rangkaian nilai yang berkelanjutan dan halus, dengan menginterpolasi antar nilai stop. Ekspresi interpolate yang mengembalikan nilai warna menghasilkan gradien warna, tempat nilai hasil dipilih.

Ada tiga jenis metode interpolasi yang dapat digunakan dalam ekspresi interpolate:

  • ['linear'] - Menginterpolasi secara linier antara pasangan stop.
  • ['exponential', base] - Menginterpolasi secara eksponensial antara stop. Nilai base mengontrol laju peningkatan output. Nilai yang lebih tinggi membuat output semakin meningkat ke ujung atas rentang. Nilai base yang mendekati 1 menghasilkan output yang meningkat lebih linier.
  • ['cubic-bezier', x1, y1, x2, y2] - Menginterpolasi menggunakan kurva Bezier kubik yang didefinisikan oleh titik kontrol yang diberikan.

Berikut adalah contoh tampilan berbagai jenis interpolasi ini.

Linier Eksponensial Bezier Kubik
Linear interpolation graph Exponential interpolation graph Cubic Bezier interpolation graph

Pseudocode berikut mendefinisikan struktur ekspresi interpolate.

[
    'interpolate',
    interpolation: ['linear'] | ['exponential', base] | ['cubic-bezier', x1, y1, x2, y2],
    input: number,
    stopInput1: number, 
    stopOutput1: value1,
    stopInput2: number, 
    stopOutput2: value2, 
    ...
]

Contoh

Contoh berikut menggunakan ekspresi linear interpolate untuk mengatur properti color lapisan gelembung berdasarkan properti temperature fitur titik. temperature Jika nilainya kurang dari 60, "biru" dikembalikan. Jika antara 60 dan kurang dari 70, kuning dikembalikan. Jika antara 70 dan kurang dari 80, "oranye" dikembalikan. Jika 80 atau lebih besar, "merah" dikembalikan.

var layer = new atlas.layer.BubbleLayer(datasource, null, {
    color: [
        'interpolate',
        ['linear'],
        ['get', 'temperature'],
        50, 'blue',
        60, 'yellow',
        70, 'orange',
        80, 'red'
    ]
});

Gambar berikut menunjukkan bagaimana warna dipilih untuk ekspresi di atas.

Interpolate expression example

Ekspresi langkah

Ekspresi step dapat digunakan untuk menghitung nilai hasil langkah yang diskrit dengan mengevaluasi fungsi konstanta sepotong yang ditentukan oleh stop.

Pseudocode berikut mendefinisikan struktur ekspresi step.

[
    'step',
    input: number,
    output0: value0,
    stop1: number, 
    output1: value1,
    stop2: number, 
    output2: value2, 
    ...
]

Ekspresi langkah mengembalikan nilai output stop tepat sebelum nilai input, atau nilai input pertama jika input kurang dari stop pertama.

Contoh

Contoh berikut menggunakan ekspresi step untuk mengatur properti color lapisan gelembung berdasarkan properti temperature fitur titik. temperature Jika nilainya kurang dari 60, "biru" dikembalikan. Jika antara 60 dan kurang dari 70, "kuning" dikembalikan. Jika antara 70 dan kurang dari 80, "oranye" dikembalikan. Jika 80 atau lebih besar, "merah" dikembalikan.

var layer = new atlas.layer.BubbleLayer(datasource, null, {
    color: [
        'step',
        ['get', 'temperature'],
        'blue',
        60, 'yellow',
        70, 'orange',
        80, 'red'
    ]
});

Gambar berikut menunjukkan bagaimana warna dipilih untuk ekspresi di atas.

Step expression example

Ekspresi spesifik lapisan

Ekspresi spesifik yang hanya berlaku untuk lapisan tertentu.

Ekspresi kepadatan peta panas

Ekspresi kepadatan peta panas mengambil nilai kepadatan peta panas untuk setiap piksel dalam lapisan peta panas dan didefinisikan sebagai ['heatmap-density']. Nilai ini berupa angka antara 0 dan 1. Ini digunakan dalam kombinasi dengan ekspresi interpolation atau step untuk menentukan gradien warna yang digunakan untuk mewarnai peta panas. Ekspresi ini hanya dapat digunakan dalam opsi warna lapisan peta panas.

Tip

Warna pada indeks 0, dalam ekspresi interpolasi atau warna default warna langkah, menentukan warna area di mana tidak ada data. Warna pada indeks 0 dapat digunakan untuk menentukan warna latar belakang. Banyak orang lebih suka mengatur nilai ini menjadi transparan atau hitam semi-transparan.

Contoh

Contoh ini menggunakan ekspresi interpolasi linier untuk membuat gradien warna yang halus untuk merender peta panas.

var layer = new atlas.layer.HeatMapLayer(datasource, null, {
    color: [
        'interpolate',
        ['linear'],
        ['heatmap-density'],
        0, 'transparent',
        0.01, 'purple',
        0.5, '#fb00fb',
        1, '#00c3ff'
    ]
});

Selain menggunakan gradien halus untuk mewarnai peta panas, warna dapat ditentukan dalam serangkaian rentang dengan menggunakan ekspresi step. Menggunakan ekspresi step untuk mewarnai peta panas secara visual memecah kepadatan menjadi beberapa rentang yang menyerupai peta kontur atau gaya radar.

var layer = new atlas.layer.HeatMapLayer(datasource, null, {
    color: [
        'step',
        ['heatmap-density'],
        'transparent',
        0.01, 'navy',
        0.25, 'navy',
        0.5, 'green',
        0.75, 'yellow',
        1, 'red'
    ]
});

Untuk informasi selengkapnya, lihat dokumentasi Menambah lapisan peta panas.

Ekspresi kemajuan garis

Ekspresi kemajuan garis mengambil kemajuan di sepanjang garis gradien dalam lapisan garis dan didefinisikan sebagai ['line-progress']. Nilai ini berupa angka antara 0 dan 1. Ini digunakan dalam kombinasi dengan ekspresi interpolation atau step. Ekspresi ini hanya dapat digunakan dengan opsi strokeGradient dari lapisan baris.

Catatan

Opsi strokeGradient lapisan baris memerlukan opsi lineMetrics sumber data untuk diatur ke true.

Contoh

Contoh ini menggunakan ekspresi ['line-progress'] untuk menerapkan gradien warna ke goresan garis.

var layer = new atlas.layer.LineLayer(datasource, null, {
    strokeGradient: [
        'interpolate',
        ['linear'],
        ['line-progress'],
        0, "blue",
        0.1, "royalblue",
        0.3, "cyan",
        0.5, "lime",
        0.7, "yellow",
        1, "red"
    ]
});

Untuk contoh kerja interaktif, lihat Menambahkan gradien goresan ke baris.

Ekspresi format bidang teks

Ekspresi format bidang teks dapat digunakan dengan opsi textField properti textOptions lapisan simbol untuk menyediakan pemformatan teks campuran. Ekspresi ini memungkinkan penentuan sekumpulan string input dan opsi pemformatan. Opsi berikut dapat ditentukan untuk setiap string input dalam ekspresi ini.

  • 'font-scale' - Menentukan faktor penskalaan untuk ukuran fon. Jika ditentukan, nilai ini akan mengambil alih size properti textOptions untuk string individual.
  • 'text-font' - Menentukan satu atau beberapa keluarga fon yang harus digunakan untuk string ini. Jika ditentukan, nilai ini akan mengambil alih font properti textOptions untuk string individual.

Pseudocode berikut mendefinisikan struktur ekspresi format bidang teks.

[
    'format', 
    input1: string, 
    options1: { 
        'font-scale': number, 
        'text-font': string[]
    },
    input2: string, 
    options2: { 
        'font-scale': number, 
        'text-font': string[]
    },
    …
]

Contoh

Contoh berikut memformat bidang teks dengan menambahkan fon tebal dan meningkatkan ukuran fon properti title dari fitur. Contoh ini juga menambahkan properti subTitle dari fitur pada baris baru, dengan ukuran fon yang diperkecil.

var layer = new atlas.layer.SymbolLayer(datasource, null, {
    textOptions: {
        textField: [
            'format',

            //Bold the title property and scale its font size up.
            ['get', 'title'],
            {
                'text-font': ['literal', ['StandardFont-Bold']],
                'font-scale': 1.25
            },

            '\n', {},   //Add a new line without any formatting.

            //Scale the font size down of the subTitle property. 
            ['get', 'subTitle'],
            { 
                'font-scale': 0.75
            }
        ]
    }
});

Lapisan ini merender fitur titik seperti yang ditunjukkan pada gambar berikut:

Image of Point feature with formatted text field

Ekspresi format angka

Ekspresi number-format hanya dapat digunakan dengan opsi lapisan textField dari lapisan simbol. Ekspresi ini mengonversi angka yang disediakan menjadi string yang diformat. Ekspresi ini membungkus fungsi Number.toLocalString JavaScript dan mendukung serangkaian opsi berikut.

  • locale - Tentukan opsi ini untuk mengonversi angka menjadi string dengan cara yang selaras dengan bahasa yang ditentukan. Berikan tag bahasa BCP 47 ke dalam opsi ini.
  • currency - Untuk mengkonversi angka menjadi string yang mewakili mata uang. Nilai yang dapat digunakan adalah kode mata uang ISO 4217, seperti "USD" untuk dolar AS, "EUR" untuk euro, atau "CNY" untuk RMB Cina.
  • 'min-fraction-digits' - Menentukan jumlah minimum tempat desimal untuk disertakan dalam versi string dari angka tersebut.
  • 'max-fraction-digits' - Menentukan jumlah maksimum tempat desimal untuk disertakan dalam versi string dari angka tersebut.

Pseudocode berikut mendefinisikan struktur ekspresi format bidang teks.

[
    'number-format', 
    input: number, 
    options: {
        locale: string, 
        currency: string, 
        'min-fraction-digits': number, 
        'max-fraction-digits': number
    }
]

Contoh

Contoh berikut menggunakan ekspresi number-format untuk memodifikasi bagaimana properti revenue fitur poin dirender dalam opsi textField lapisan simbol sedemikian rupa sehingga muncul nilai dolar AS.

var layer = new atlas.layer.SymbolLayer(datasource, null, {
    textOptions: {
        textField: [
            'number-format', 
            ['get', 'revenue'], 
            { 'currency': 'USD' }
        ],

        offset: [0, 0.75]
    }
});

Lapisan ini merender fitur titik seperti yang ditunjukkan pada gambar berikut:

Number format expression example

Ekspresi gambar

Ekspresi gambar dapat digunakan dengan opsi image dan textField lapisan simbol, dan opsi fillPattern lapisan poligon. Ekspresi ini memeriksa bahwa gambar yang diminta ada dalam gaya dan mengembalikan nama gambar yang diselesaikan atau null, tergantung pada apakah gambar saat ini dalam gaya atau tidak. Proses validasi ini sinkron dan mengharuskan gambar telah ditambahkan ke gaya sebelum memintanya dalam argumen gambar.

Contoh

Contoh berikut menggunakan ekspresi image untuk menambahkan ikon yang sejajar dengan teks dalam lapisan simbol.

 //Load the custom image icon into the map resources.
map.imageSprite.add('wifi-icon', 'wifi.png').then(function () {

    //Create a data source and add it to the map.
    datasource = new atlas.source.DataSource();
    map.sources.add(datasource);
    
    //Create a point feature and add it to the data source.
    datasource.add(new atlas.data.Point(map.getCamera().center));
    
    //Add a layer for rendering point data as symbols.
    map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
        iconOptions: {
            image: 'none'
        },
        textOptions: {
            //Create a formatted text string that has an icon in it.
            textField: ["format", 'Ricky\'s ', ["image", "wifi-icon"], ' Palace']
        }
    }));
});

Lapisan ini merender bidang teks di lapisan simbol seperti yang ditunjukkan pada gambar berikut:

Image expression example

Ekspresi pembesaran tampilan

Ekspresi zoom digunakan untuk mengambil tingkat pembesaran tampilan peta saat ini pada waktu render dan didefinisikan sebagai ['zoom']. Ekspresi ini mengembalikan angka di antara rentang tingkat pembesaran tampilan minimum dan maksimum peta. Kontrol peta interaktif Azure Maps untuk web dan Android mendukung 25 tingkat perbesar tampilan, dengan nomor 0 hingga 24. Menggunakan ekspresi zoom memungkinkan gaya dimodifikasi secara dinamis saat tingkat pembesaran tampilan peta diubah. Ekspresi zoom hanya dapat digunakan dengan interpolate ekspresi dan step .

Contoh

Secara default, radii poin data yang dirender di lapisan peta panas memiliki radius piksel tetap untuk semua tingkat pembesaran tampilan. Saat memperbesar peta, data mengagregasi bersama dan lapisan peta panas terlihat berbeda. Ekspresi zoom dapat digunakan untuk menskalakan radius untuk setiap tingkat pembesaran tampilan, sehingga setiap poin data mencakup area fisik yang sama pada peta. Ini membuat lapisan peta panas terlihat lebih statis dan konsisten. Setiap tingkat pembesaran peta memiliki piksel dua kali lebih banyak secara vertikal dan horizontal dibandingkan tingkat pembesaran sebelumnya. Menskalakan radius, sehingga dua kali lipat dengan setiap tingkat perbesar tampilan, membuat peta panas yang terlihat konsisten pada semua tingkat zoom. Ini dapat dicapai menggunakan zoom ekspresi dengan base 2 exponential interpolation ekspresi, dengan radius piksel diatur untuk tingkat pembesaran minimum dan radius berskala untuk tingkat zoom maksimum yang dihitung seperti 2 * Math.pow(2, minZoom - maxZoom) yang ditunjukkan dalam contoh berikut.

var layer = new atlas.layer.HeatMapLayer(datasource, null, {
    radius: [
        'interpolate',
        ['exponential', 2],
        ['zoom'],
        
        //For zoom level 1 set the radius to 2 pixels.
        1, 2,

        //Between zoom level 1 and 19, exponentially scale the radius from 2 pixels to 2 * Math.pow(2, 19 - 1) pixels (524,288 pixels).
        19, 2 * Math.pow(2, 19 - 1)
    ]
};

Untuk contoh kerja interaktif, lihat Peta panas yang dapat diperbesar secara konsisten.

Ekspresi pengikatan variabel

Ekspresi pengikatan variabel menyimpan hasil penghitungan dalam variabel. Dengan demikian, hasil penghitungan dapat direferensikan di tempat lain dalam ekspresi beberapa kali. Ini adalah pengoptimalan yang berguna untuk ekspresi yang melibatkan banyak perhitungan.

Expression Jenis Pengembalian Deskripsi
[
    'let',
    name1: string,
    value1: apa pun,
    name2: string,
    value2: apa pun,
    ...
    childExpression
]		 Menyimpan satu atau beberapa nilai sebagai variabel untuk digunakan oleh ekspresi var dalam ekspresi anak yang mengembalikan hasil.
['var', name: string] any Mereferensikan variabel yang dibuat menggunakan ekspresi let.

Contoh

Contoh ini menggunakan ekspresi yang menghitung pendapatan relatif terhadap rasio suhu, lalu menggunakan ekspresi case untuk mengevaluasi berbagai operasi boolean yang berbeda pada nilai ini. Ekspresi let digunakan untuk menyimpan pendapatan relatif terhadap rasio suhu, sehingga ini hanya perlu dihitung satu kali. Ekspresi var mereferensikan variabel ini sesering yang diperlukan tanpa harus menghitungnya kembali.

var layer = new atlas.layer.BubbleLayer(datasource, null, {
    color: [
        //Divide the point features `revenue` property by the `temperature` property and store it in a variable called `ratio`.
        'let', 'ratio', ['/', ['get', 'revenue'], ['get', 'temperature']],
        //Evaluate the child expression in which the stored variable is used.
        [
            'case',

            //Check to see if the ratio is less than 100, return 'red'.
            ['<', ['var', 'ratio'], 100],
            'red',

            //Check to see if the ratio is less than 200, return 'green'.
            ['<', ['var', 'ratio'], 200],
            'green',

            //Return `blue` for values greater or equal to 200.
            'blue'
        ]
    ]
});

Langkah berikutnya

Lihat artikel berikut untuk sampel kode lainnya yang mengimplementasikan ekspresi:

Menambah lapisan simbol

Menambahkan lapisan gelembung

Menambah lapisan baris

Menambah lapisan poligon

Menambah lapisan peta panas

Pelajari selengkapnya tentang opsi lapisan yang mendukung ekspresi:

BubbleLayerOptions

HeatMapLayerOptions

LineLayerOptions

OpsiLapisanPoligon

SymbolLayerOptions