Veri temelli stil ifadeleri (Web SDK)

İfadeler, bir veri kaynağındaki her şekilde tanımlanan özellikleri gözlemleyen stil seçeneklerine iş mantığı uygulamanızı sağlar. İfadeler bir veri kaynağındaki veya katmandaki verileri filtreleyebilir. İfadeler if-deyimleri gibi koşullu mantıklardan oluşabilir. Ayrıca, dize işleçleri, mantıksal işleçler ve matematiksel işleçler kullanarak verileri işlemek için kullanılabilirler.

Veri temelli stiller, stil oluşturmayla ilgili iş mantığı uygulamak için gereken kod miktarını azaltır. Katmanlarla kullanıldığında, ifadeler ayrı bir iş parçacığında işleme zamanında değerlendirilir. Bu işlevsellik, kullanıcı arabirimi iş parçacığındaki iş mantığını değerlendirmeye kıyasla daha yüksek performans sağlar.

Bu video, Azure Haritalar Web SDK'sında veri odaklı stile genel bir bakış sağlar.


İfadeler JSON dizileri olarak temsil edilir. Dizideki bir ifadenin ilk öğesi, ifade işlecinin adını belirten bir dizedir. Örneğin, "+" veya "case". Sonraki öğeler (varsa), ifadenin bağımsız değişkenleridir. Her bağımsız değişken bir değişmez değer (dize, sayı, boole veya ) ya da nullbaşka bir ifade dizisidir. Aşağıdaki sahte kod bir ifadenin temel yapısını tanımlar.

[ 
    expression_operator, 
    argument0, 
    argument1, 
    …
] 

Azure Haritalar Web SDK'sı birçok ifade türünü destekler. İfadeler kendi başlarına veya diğer ifadelerle birlikte kullanılabilir.

İfade türü Tanım
Toplama ifadesi Bir veri kümesi üzerinde işlenen ve seçeneğiyle clusterProperties kullanılabilen bir hesaplamayı tanımlayan ifade DataSource.
Boole ifadeleri Boole ifadeleri, boole karşılaştırmalarını değerlendirmek için bir dizi boole işleç ifadesi sağlar.
Renk ifadeleri Renk ifadeleri, renk değerlerini oluşturmayı ve işlemeyi kolaylaştırır.
Koşullu ifadeler Koşullu ifadeler if-deyimleri gibi mantıksal işlemler sağlar.
Veri ifadeleri Bir özellikteki özellik verilerine erişim sağlar.
İlişkilendirme ve Adım ifadeleri Ara değer ve adım ifadeleri, ilişkilendirilmiş bir eğri veya adım işlevi boyunca değerleri hesaplamak için kullanılabilir.
Katmana özgü ifadeler Yalnızca tek bir katman için geçerli olan özel ifadeler.
Matematik ifadeleri İfade çerçevesi içinde veri temelli hesaplamalar yapmak için matematiksel işleçler sağlar.
Dize işleç ifadeleri Dize işleci ifadeleri, büyük/küçük harf birleştirme ve dönüştürme gibi dizelerde dönüştürme işlemleri gerçekleştirir.
Tür ifadeleri Tür ifadeleri dizeler, sayılar ve boole değerleri gibi farklı veri türlerini test edip dönüştürmek için araçlar sağlar.
Değişken bağlama ifadeleri Değişken bağlama ifadeleri bir hesaplamanın sonuçlarını bir değişkende depolar ve depolanmış değeri yeniden hesaplamak zorunda kalmadan ifadenin başka bir yerinde birden çok kez başvurulur.
Yakınlaştırma ifadesi İşleme zamanında haritanın geçerli yakınlaştırma düzeyini alır.

Bu belgedeki tüm örnekler, farklı ifade türlerinin kullanılabilmesinin farklı yollarını göstermek için aşağıdaki özelliği kullanır.

{
    "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"
        }
    }
}

Veri ifadeleri

Veri ifadeleri, bir özellikteki özellik verilerine erişim sağlar.

Expression Dönüş türü Tanım
['at', number, array] value Diziden bir öğe alır.
['geometry-type'] Dize Özelliğin geometri türünü alır: Point, MultiPoint, LineString, MultiLineString, Polygon, MultiPolygon.
['get', string] value Geçerli özelliğin özelliklerinden özellik değerini alır. İstenen özellik eksikse null döndürür.
['get', string, object] value Sağlanan nesnenin özelliklerinden özellik değerini alır. İstenen özellik eksikse null döndürür.
['has', string] boolean Bir özelliğin özelliklerinin belirtilen özelliğe sahip olup olmadığını belirler.
['has', string, object] boolean Nesnenin özelliklerinin belirtilen özelliğe sahip olup olmadığını belirler.
['id'] value Varsa özelliğin kimliğini alır.
['in', boolean | string | number, array] boolean Bir öğenin dizide var olup olmadığını belirler
['in', substring, string] boolean Dizede bir alt dize olup olmadığını belirler
['index-of', boolean | string | number, array | string]

['index-of', boolean | string | number, array | string, number]
numara Bir öğenin dizide bulunabileceği veya bir alt dizenin dizede bulunabildiği veya -1 girişin bulunamaz olduğu ilk konumu döndürür. Aramaya nereden başlanacağını belirten isteğe bağlı bir dizin kabul eder.
['length', string | array] numara Bir dizenin veya dizinin uzunluğunu alır.
['slice', array | string, number]

['slice', array | string, number, number]
dize | Dizi Bir diziden veya belirtilen başlangıç dizininden bir dizedeki alt dizeden veya ayarlanırsa başlangıç dizini ile bitiş dizini arasında bir öğe döndürür. Dönüş değeri başlangıç dizinini kapsar ancak bitiş dizinini içermez.

Örnekler

Bir özelliğin özelliklerine bir ifade kullanılarak doğrudan bir get ifadede erişilebilir. Bu örnekte, bir kabarcık katmanının renk özelliğini belirtmek için özelliğin değeri kullanılır zoneColor .

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

Yukarıdaki örnek, tüm nokta özellikleri özelliğine zoneColor sahipse düzgün çalışır. Aksi takdirde renk varsayılan olarak "siyah" olur. Geri dönüş rengini değiştirmek için, özelliğin mevcut olup olmadığını denetlemek için ifadeyle birlikte has bir case ifade kullanın. Özelliği yoksa bir geri dönüş rengi döndürün.

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

Kabarcık ve sembol katmanları, varsayılan olarak bir veri kaynağındaki tüm şekillerin koordinatlarını işler. Bu davranış, çokgen veya çizginin köşelerini vurgulayabilir. Katmanın filter seçeneği, boole ifadesi içindeki bir ['geometry-type'] ifade kullanılarak işlenen özelliklerin geometri türünü sınırlamak için kullanılabilir. Aşağıdaki örnek, kabarcık katmanını yalnızca Point özelliklerin işlenmek için sınırlar.

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

Aşağıdaki örnek hem hem MultiPoint de Point özelliklerin işlenmesine izin verir.

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

Benzer şekilde, Çokgenlerin ana hattı çizgi katmanlarında işlenir. Çizgi katmanında bu davranışı devre dışı bırakmak için yalnızca ve MultiLineString özelliklerine izin veren LineString bir filtre ekleyin.

Veri ifadelerini kullanma hakkında daha fazla örnek aşağıda verilmiştir:

//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]

Matematik ifadeleri

Matematik ifadeleri, ifade çerçevesi içinde veri temelli hesaplamalar yapmak için matematiksel işleçler sağlar.

Expression Dönüş türü Tanım
['+', number, number, …] numara Belirtilen sayıların toplamını hesaplar.
['-', number] numara 0 değerini belirtilen sayıya göre çıkarır.
['-', number, number] numara İlk sayıları ikinci sayıya çıkarır.
['*', number, number, …] numara Belirtilen sayıları birlikte çarpar.
['/', number, number] numara İlk sayıyı ikinci sayıya böler.
['%', number, number] numara İlk sayıyı ikinci sayıya bölerken kalanı hesaplar.
['^', number, number] numara İkinci sayının gücüne yükseltilen ilk değerin değerini hesaplar.
['abs', number] numara Belirtilen sayının mutlak değerini hesaplar.
['acos', number] numara Belirtilen sayının arkkosinüsünü hesaplar.
['asin', number] numara Belirtilen sayının arksinüsünü hesaplar.
['atan', number] numara Belirtilen sayının arktanjantını hesaplar.
['ceil', number] numara Sayıyı bir sonraki tamsayıya yuvarlar.
['cos', number] numara Belirtilen sayının cos değerini hesaplar.
['distance', Point \| MultiPoint \| LineString \| MultiLineString \| Polygon \| MultiPolygon \| Feature \| FeatureCollection] numara Değerlendirilen özellik ile giriş geometrisi arasındaki en kısa mesafeyi metre cinsinden hesaplar. Döndürülen uzaklık değerleri, özellikle yakınlaştırma düzeyi 13'in altında olmak üzere kodlama geometrilerinden duyarlık kaybı nedeniyle duyarlık olarak değişebilir.
['e'] numara matematiksel sabitini edöndürür.
['floor', number] numara Sayıyı önceki tamsayıya aşağı yuvarlar.
['ln', number] numara Belirtilen sayının doğal logaritması hesaplanır.
['ln2'] numara matematiksel sabitini ln(2)döndürür.
['log10', number] numara Belirtilen sayının on tabanındaki logaritması hesaplar.
['log2', number] numara Belirtilen sayının iki tabanındaki logaritması hesaplar.
['max', number, number, …] numara Belirtilen sayı kümesindeki maksimum sayıyı hesaplar.
['min', number, number, …] numara Belirtilen sayı kümesindeki en düşük sayıyı hesaplar.
['pi'] numara matematiksel sabitini PIdöndürür.
['round', number] numara Sayıyı en yakın tamsayıya yuvarlar. Yarı değerler sıfırdan uzağa yuvarlanır. Örneğin, ['round', -1.5] olarak değerlendirilir -2.
['sin', number] numara Belirtilen sayının sinüsünü hesaplar.
['sqrt', number] numara Belirtilen sayının karekökünü hesaplar.
['tan', number] numara Belirtilen sayının tanjantını hesaplar.

Toplama ifadesi

Toplama ifadesi, bir veri kümesi üzerinde işlenen ve seçeneğiyle clusterProperties kullanılabilen bir DataSourcehesaplamayı tanımlar. Bu ifadelerin çıkışı bir sayı veya boole olmalıdır.

Toplama ifadesi üç değer alır: bir işleç değeri ve ilk değer ve toplama işleminin uygulanacağı verilerdeki her özellikten özellik almak için bir ifade. Bu ifade aşağıdaki biçime sahiptir:

[operator: string, initialValue: boolean | number, mapExpression: Expression]
  • operator: Daha sonra kümedeki her nokta için tarafından hesaplanan mapExpression tüm değerlere uygulanan bir ifade işlevi. Desteklenen işleçler:
    • Sayılar için: +, *, max, min
    • Boole'lar için: all, any
  • initialValue: İlk hesaplanan değerin toplandığı ilk değerdir.
  • mapExpression: Veri kümesindeki her noktaya uygulanan ifade.

Örnekler

Bir veri kümesindeki tüm özelliklerin bir revenue özelliği varsa, bu bir sayıdır. Ardından, bir kümedeki veri kümesinden oluşturulan tüm noktaların toplam geliri hesaplanabilir. Bu hesaplama aşağıdaki toplama ifadesi kullanılarak yapılır: ['+', 0, ['get', 'revenue']]

Birikmiş ifade

ifadesi, accumulated kümelenmiş DataSource kaynak seçeneğinde clusterProperties kullanılan, şimdiye kadar birikmiş bir küme özelliğinin değerini alır.

Kullanım

["accumulated"]

Mantıksal ifadeler

Boole ifadeleri, boole karşılaştırmalarını değerlendirmek için bir dizi boole işleç ifadesi sağlar.

Değerler karşılaştırıldığında karşılaştırma kesin olarak yazılır. Farklı türlerdeki değerler her zaman eşit değil olarak kabul edilir. Türlerin ayrıştırma zamanında farklı olduğu bilinen durumlar geçersiz kabul edilir ve ayrıştırma hatası oluşturur.

Expression Dönüş türü Tanım
['!', boolean] boolean Mantıksal olumsuzlama. Giriş ise falseve false girişi ise truedöndürürtrue.
['!=', value, value] boolean Giriş değerleri eşit değilse döndürür truefalse .
['<', value, value] boolean İlk giriş kesinlikle ikinci girişten küçükse döndürür true , false aksi takdirde. Bağımsız değişkenlerin hem dize hem de her iki sayı olması gerekir.
['<=', value, value] boolean İlk girişin ikinci girişten küçük veya buna eşit olup olmadığını döndürür true , false aksi takdirde. Bağımsız değişkenlerin hem dize hem de her iki sayı olması gerekir.
['==', value, value] boolean Giriş değerleri eşitse, false aksi takdirde döndürürtrue. Bağımsız değişkenlerin hem dize hem de her iki sayı olması gerekir.
['>', value, value] boolean İlk giriş kesinlikle ikinci girişten büyükse döndürür true , false aksi takdirde. Bağımsız değişkenlerin hem dize hem de her iki sayı olması gerekir.
['>=' value, value] boolean İlk giriş ikinci girişten büyük veya buna eşitse, false aksi takdirde döndürürtrue. Bağımsız değişkenlerin hem dize hem de her iki sayı olması gerekir.
['all', boolean, boolean, …] boolean Tüm girişler truefalse ise döndürürtrue, aksi takdirde.
['any', boolean, boolean, …] boolean Girişlerden truefalse herhangi biri ise döndürürtrue, aksi takdirde.
['within', Polygon | MultiPolygon | Feature<Polygon | MultiPolygon>] boolean Değerlendirilen özellik giriş geometrisinin bir sınırının içinde tam olarak yer alırsa, aksi takdirde false değerini döndürür true . Giriş değeri, , MultiPolygonFeatureveya FeatureCollectiontüründe Polygongeçerli bir GeoJSON olabilir. Değerlendirme için desteklenen özellikler:

- Nokta: Bir nokta sınırdaysa veya sınırın dışındaysa döndürür false .
- LineString: Bir çizginin herhangi bir parçası sınırın dışında kalırsa, çizgi sınırla kesişirse veya bir çizginin uç noktası sınırdaysa döndürür false .

Koşullu ifadeler

Koşullu ifadeler if-deyimleri gibi mantıksal işlemler sağlar.

Aşağıdaki ifadeler, giriş verileri üzerinde koşullu mantık işlemleri gerçekleştirir. Örneğin, case ifade bir "switch-deyimi" gibiyken match ifade "if/then/else" mantığı sağlar.

Büyük/küçük harf ifadesi

İfade case , "if/then/else" mantığı sağlayan bir koşullu ifade türüdür. Bu ifade türü, boole koşulları listesinde adım adım ilerler. True olarak değerlendirilecek ilk boole koşulunun çıkış değerini döndürür.

Aşağıdaki sahte kod, ifadenin case yapısını tanımlar.

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

Örnek

Aşağıdaki örnek, değerini değerlendiren bir değer bulana kadar farklı boole koşullarında adım adım ilerler trueve ardından ilişkili değeri döndürür. Boole koşulu olarak değerlendirilmezse true, bir geri dönüş değeri döndürülür.

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

İfadeyi eşleştir

İfade match , mantıksal gibi switch-deyimi sağlayan bir koşullu ifade türüdür. Giriş, dize veya sayı döndüren herhangi ['get', 'entityType'] bir ifade olabilir. Her etiket tek bir değişmez değer veya değerleri tüm dizeler veya tüm sayılar olması gereken bir değişmez değer dizisi olmalıdır. Dizideki değerlerden herhangi biri eşleşiyorsa giriş eşleşir. Her etiket benzersiz olmalıdır. Giriş türü etiketlerin türüyle eşleşmiyorsa sonuç geri dönüş değeridir.

Aşağıdaki sahte kod, ifadenin match yapısını tanımlar.

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

Örnekler

Aşağıdaki örnekte, bir kabarcık katmanındaki entityType Bir Nokta özelliğinin özelliği eşleşme arar. Bir eşleşme bulursa, belirtilen değer döndürülür veya geri dönüş değerini döndürür.

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

Aşağıdaki örnek, tümü aynı değeri döndürmesi gereken bir etiket kümesini listelemek için bir dizi kullanır. Bu yaklaşım, her etiketi ayrı ayrı listelemekten çok daha verimlidir. Bu durumda, özellik "restoran" veya "grocery_store" ise entityType , "kırmızı" rengi döndürülür.

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

Birleşim ifadesi

İfade, coalesce ilk null olmayan değer elde edilene ve bu değeri döndürene kadar bir ifade kümesinde adım adım ilerler.

Aşağıdaki sahte kod, ifadenin coalesce yapısını tanımlar.

[
    'coalesce', 
    value1, 
    value2, 
    …
]

Örnek

Aşağıdaki örnek, simge coalesce katmanı seçeneğini ayarlamak textField için bir ifade kullanır. Özelliğin title özelliği eksikse veya olarak ayarlandıysanull, ifadesi eksikse veya nullözelliği aramayı subTitle dener, boş bir dizeye geri döner.

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.
            ''
        ]
    }
});

Aşağıdaki örnek, belirtilen görüntü adları listesinden harita sprite'sinde kullanılabilen ilk kullanılabilir görüntü simgesini almak için bir ifade kullanır coalesce .

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

Tür ifadeleri

Tür ifadeleri dizeler, sayılar ve boole değerleri gibi farklı veri türlerini test edip dönüştürmek için araçlar sağlar.

Expression Dönüş türü Tanım
['array', value] | ['array', type: "string" | "number" | "boolean", value] Nesne[] Girişin bir dizi olduğunu onaylar.
['boolean', value] | ["boolean", value, fallback: value, fallback: value, ...] boolean Giriş değerinin boole değeri olduğunu onaylar. Birden çok değer sağlanırsa, bir boole elde edilene kadar her biri sırayla değerlendirilir. Girişlerden hiçbiri boole değilse, ifade bir hatadır.
['collator', { 'case-sensitive': boolean, 'diacritic-sensitive': boolean, 'locale': string }] Harmanlama Yerel ayara bağımlı karşılaştırma işlemlerinde kullanılmak üzere bir harmanlama döndürür. Büyük/küçük harfe duyarlı ve aksan duyarlı seçenekleri varsayılan olarak false olarak ayarlanır. Yerel ayar bağımsız değişkeni, kullanılacak yerel ayarın IETF dil etiketini belirtir. Hiçbiri sağlanmadıysa, varsayılan yerel ayar kullanılır. İstenen yerel ayar kullanılamıyorsa, harmanlayıcısı sistem tanımlı bir geri dönüş yerel ayarı kullanır. Yerel ayar geri dönüş davranışının sonuçlarını test etmek için çözümlenmiş-yerel ayarı kullanın.
['literal', array]

['literal', object]
dizi | Nesne Sabit bir dizi veya nesne değeri döndürür. Bir dizi veya nesne bir ifade tarafından döndürülürken gerekli olan bir dizi veya nesnenin ifade olarak değerlendirilmesini önlemek için bu ifadeyi kullanın.
['image', string] Dize Belirtilen görüntü kimliğinin harita görüntüsü spritesine yüklenip yüklenmediğini denetler. Bu durumda, kimlik döndürülür, aksi takdirde null döndürülür.
['number', value] | ["number", value, fallback: value, fallback: value, ...] numara Giriş değerinin bir sayı olduğunu onaylar. Birden çok değer sağlanırsa, bir sayı elde edilene kadar her biri sırayla değerlendirilir. Girişlerden hiçbiri sayı değilse, ifade bir hatadır.
['object', value] | ["object", value, fallback: value, fallback: value, ...] Nesne Giriş değerinin bir nesne olduğunu onaylar. Birden çok değer sağlanırsa, bir nesne elde edilene kadar her biri sırayla değerlendirilir. Girişlerden hiçbiri nesne değilse, ifade bir hatadır.
['string', value] | ["string", value, fallback: value, fallback: value, ...] Dize Giriş değerinin bir dize olduğunu onaylar. Birden çok değer sağlanırsa, bir dize elde edilene kadar her biri sırayla değerlendirilir. Girişlerden hiçbiri dize değilse, ifade bir hatadır.
['to-boolean', value] boolean Giriş değerini boole değerine dönüştürür. Sonuç, false girişin boş bir dize 0, , false, nullveya NaN; değilse onun olmasıdır true.
['to-color', value]

['to-color', value1, value2…]
color Giriş değerini bir renge dönüştürür. Birden çok değer sağlanırsa, ilk başarılı dönüştürme elde edilene kadar her biri sırayla değerlendirilir. Girişlerin hiçbiri dönüştürülemiyorsa, ifade bir hatadır.
['to-number', value]

['to-number', value1, value2, …]
numara Mümkünse giriş değerini sayıya dönüştürür. Giriş veya falseise null sonuç 0 olur. Giriş ise true, sonuç 1 olur. Giriş bir dizeyse, ECMAScript Dil Belirtimi'nin ToNumber dize işlevi kullanılarak sayıya dönüştürülür. Birden çok değer sağlanırsa, ilk başarılı dönüştürme elde edilene kadar her biri sırayla değerlendirilir. Girişlerin hiçbiri dönüştürülemiyorsa, ifade bir hatadır.
['to-string', value] Dize Giriş değerini bir dizeye dönüştürür. Giriş ise null, sonuç olur "". Giriş bir boole ise, sonuç veya "false"olur"true". Giriş bir sayıysa, ECMAScript Dil Belirtimi'nin ToString sayı işlevi kullanılarak bir dizeye dönüştürülür. Giriş bir renkse CSS RGBA renk dizesine "rgba(r,g,b,a)"dönüştürülür. Aksi takdirde, giriş ECMAScript Dil Belirtimi'nin JSON.stringify işlevi kullanılarak bir dizeye dönüştürülür.
['typeof', value] Dize Verilen değerin türünü açıklayan bir dize döndürür.

Bahşiş

Tarayıcı konsolunda benzeri Expression name must be a string, but found number instead. If you wanted a literal array, use ["literal", [...]]. bir hata iletisi görünüyorsa, kodunuzun herhangi bir yerinde ilk değeri için dizesi olmayan bir dizi içeren bir ifade olduğu anlamına gelir. İfadenin bir dizi döndürmesini istiyorsanız, diziyi ifadeyle sarmalarsınız literal . Aşağıdaki örnek, nokta özelliğinin özelliğine göre entityType iki uzaklık değeri arasında seçim yapmak üzere bir ifade kullanarak iki sayı içeren bir dizi olması gereken simge match katmanının simge offset seçeneğini ayarlar.

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

Renk ifadeleri

Renk ifadeleri, renk değerlerini oluşturmayı ve işlemeyi kolaylaştırır.

Expression Dönüş türü Tanım
['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 Giriş ve çıkış değerleri çiftleri arasında ilişkilendirme yaparak sürekli ve sorunsuz sonuçlar üretir ("duraklar"). gibi interpolateçalışır, ancak çıkış türü bir renk olmalıdır ve ilişkilendirme Hue-Chroma-Luminance renk alanında gerçekleştirilir.
['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 Giriş ve çıkış değerleri çiftleri arasında ilişkilendirme yaparak sürekli ve sorunsuz sonuçlar üretir ("duraklar"). gibi interpolateçalışır, ancak çıkış türü bir renk olmalıdır ve ilişkilendirme CIELAB renk alanında gerçekleştirilir.
['rgb', number, number, number] color ile arasında 2550 değişen kırmızı, yeşil ve mavi bileşenlerden ve alfa bileşeninden 1bir renk değeri oluşturur. Herhangi bir bileşen aralık dışındaysa, ifade bir hatadır.
['rgba', number, number, number, number] color ile arasında 0 değişen kırmızı, yeşil, mavi bileşenlerden ve 255ile aralığındaki bir alfa bileşeninden 01renk değeri oluşturur. Herhangi bir bileşen aralık dışındaysa, ifade bir hatadır.
['to-rgba'] [sayı, sayı, sayı, sayı] Giriş renginin kırmızı, yeşil, mavi ve alfa bileşenlerini bu sırada içeren dört öğeli bir dizi döndürür.

Örnek

Aşağıdaki örnek, kırmızı değerine sahip bir RGB renk değeri ve özelliğin 255değeriyle çarpılarak 2.5 hesaplanan yeşil ve mavi değerler temperature oluşturur. Sıcaklık değiştikçe renk farklı kırmızı tonlarına dönüşür.

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

Dize işleç ifadeleri

Dize işleci ifadeleri, büyük/küçük harf birleştirme ve dönüştürme gibi dizelerde dönüştürme işlemleri gerçekleştirir.

Expression Dönüş türü Tanım
['concat', string, string, …] Dize Birden çok dizeyi birleştirir. Her değer bir dize olmalıdır. to-string Gerekirse diğer değer türlerini dizeye dönüştürmek için tür ifadesini kullanın.
['downcase', string] Dize Belirtilen dizeyi küçük harfe dönüştürür.
['is-supported-script', string] | ['is-supported-script', Expression] boolean Giriş dizesinin geçerli yazı tipi yığını tarafından desteklenen bir karakter kümesi kullanıp kullanmadığını belirler. Örnek: ['is-supported-script', 'ಗೌರವಾರ್ಥವಾಗಿ']
['resolved-locale', string] Dize Sağlanan harmanlayıcısı tarafından kullanılan ve varsayılan sistem yerel ayarını belirlemek veya istenen yerel ayarın başarıyla yüklenip yüklenmediğini belirlemek için kullanılabilen IETF dil etiketini döndürür.
['upcase', string] Dize Belirtilen dizeyi büyük harfe dönüştürür.

Örnek

Aşağıdaki örnek, nokta özelliğinin özelliğini bir dizeye dönüştürür temperature ve ardından "°F" öğesini sonuna birleştirir.

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

Yukarıdaki ifade, aşağıdaki görüntüde gösterildiği gibi harita üzerinde "64°F" üzerine yer paylaşımlı bir raptiye oluşturur.

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

İlişkilendirme ve Adım ifadeleri

Ara değer ve adım ifadeleri, ilişkilendirilmiş bir eğri veya adım işlevi boyunca değerleri hesaplamak için kullanılabilir. Bu ifadeler, giriş olarak sayısal bir değer döndüren bir ifade alır, örneğin ['get', 'temperature']. Giriş değeri, enterpolasyon eğrisine veya adım işlevine en uygun değeri belirlemek için giriş ve çıkış değerleri çiftlerine göre değerlendirilir. Çıkış değerleri "stop" olarak adlandırılır. Her durağın giriş değerleri bir sayı olmalı ve artan sırada olmalıdır. Çıkış değerleri bir sayı, sayı dizisi veya renk olmalıdır.

İfadeyi ilişkilendirme

Bir interpolate ifade, durdurma değerleri arasında ilişkilendirme yaparak sürekli, düzgün bir değer kümesi hesaplamak için kullanılabilir. interpolate Renk değerleri döndüren ifade, sonuç değerlerinin seçildiği bir renk gradyanı oluşturur.

bir interpolate ifadede kullanılabilecek üç tür ilişkilendirme yöntemi vardır:

  • ['linear'] - Durak çifti arasında doğrusal olarak ara değer oluşturur.
  • ['exponential', base] - Duraklar arasında üstel olarak ara değer oluşturur. Değer, base çıkışın artma hızını denetler. Daha yüksek değerler, çıkışın aralığın üst ucuna doğru daha fazla artmasına neden olur. base 1'e yakın bir değer daha doğrusal olarak artan bir çıkış üretir.
  • ['cubic-bezier', x1, y1, x2, y2]- Verilen denetim noktaları tarafından tanımlanan kübik Bezier eğrisini kullanarak ilişkilendirmeler.

Aşağıda, bu farklı ilişkilendirme türlerinin nasıl göründüğüne bir örnek verilmiştir.

Doğrusal Üstel Bezier Küp
Linear interpolation graph Exponential interpolation graph Cubic Bezier interpolation graph

Aşağıdaki sahte kod, ifadenin interpolate yapısını tanımlar.

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

Örnek

Aşağıdaki örnek, nokta özelliğinin color özelliğine göre bir kabarcık katmanının temperature özelliğini ayarlamak için bir ifade kullanırlinear interpolate. temperature Değer 60'tan küçükse "mavi" döndürülür. 60 ile 70'in altındaysa sarı döndürülür. 70 ile 80'den küçükse "turuncu" döndürülür. 80 veya daha büyükse "kırmızı" döndürülür.

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

Aşağıdaki görüntüde, yukarıdaki ifade için renklerin nasıl seçildiğini gösterilmektedir.

Interpolate expression example

Adım ifadesi

İfadestep, duraklar tarafından tanımlanan parçalı sabit bir işlev değerlendirilerek ayrık, basamaklı sonuç değerlerini hesaplamak için kullanılabilir.

Aşağıdaki sahte kod, ifadenin step yapısını tanımlar.

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

Adım ifadeleri, giriş değerinden hemen önce durdurmanın çıkış değerini veya giriş ilk duraktan küçükse ilk giriş değerini döndürür.

Örnek

Aşağıdaki örnek, nokta özelliğinin color özelliğine göre bir kabarcık katmanının temperature özelliğini ayarlamak için bir ifade kullanırstep. temperature Değer 60'tan küçükse "mavi" döndürülür. 60 ile 70'ten küçükse "sarı" döndürülür. 70 ile 80'den küçükse "turuncu" döndürülür. 80 veya daha büyükse "kırmızı" döndürülür.

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

Aşağıdaki görüntüde, yukarıdaki ifade için renklerin nasıl seçildiğini gösterilmektedir.

Step expression example

Katmana özgü ifadeler

Yalnızca belirli katmanlara uygulanan özel ifadeler.

Isı haritası yoğunluk ifadesi

Isı haritası yoğunluk ifadesi, bir ısı haritası katmanındaki her piksel için ısı haritası yoğunluk değerini alır ve olarak ['heatmap-density']tanımlanır. Bu değer ile 1arasında 0 bir sayıdır. Isı haritasını renklendirmek için kullanılan renk gradyanını tanımlamak için bir interpolation veya step ifadesiyle birlikte kullanılır. Bu ifade yalnızca ısı haritası katmanının renk seçeneğinde kullanılabilir.

Bahşiş

Dizin 0'daki bir ilişkilendirme ifadesindeki renk veya adım renginin varsayılan rengi, veri bulunmayan alanın rengini tanımlar. Dizin 0'daki renk, arka plan rengi tanımlamak için kullanılabilir. Çoğu kişi bu değeri saydam veya yarı saydam siyah olarak ayarlamayı tercih eder.

Örnek

Bu örnekte, ısı haritasının işlenmesi için düzgün bir renk gradyanı oluşturmak için bir liner ilişkilendirme ifadesi kullanılır.

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

Isı haritasını renklendirmek için düz gradyan kullanmanın yanı sıra, renkler bir ifade kullanılarak step bir dizi aralık içinde belirtilebilir. Isı haritasını renklendirmeye yönelik bir step ifade kullanmak, yoğunluğu bir kontur veya radar stili haritaya benzeyen aralıklara böler.

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

Daha fazla bilgi için Isı haritası katmanı ekleme belgelerine bakın.

Satır ilerleme durumu ifadesi

Çizgi ilerleme ifadesi, bir çizgi katmanındaki gradyan çizgi boyunca ilerleme durumunu alır ve olarak ['line-progress']tanımlanır. Bu değer 0 ile 1 arasında bir sayıdır. Bir veya step ifadesiyle birlikte interpolation kullanılır. Bu ifade yalnızca çizgi katmanının strokeGradient seçeneğiyle kullanılabilir.

Dekont

strokeGradient Çizgi katmanı seçeneği, veri kaynağı seçeneğinin olarak ayarlanmasını truegerektirirlineMetrics.

Örnek

Bu örnek, bir çizginin ['line-progress'] vuruşu için renk gradyanı uygulamak için ifadeyi kullanır.

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

Etkileşimli bir çalışma örneği için bkz . Çizgiye vuruş gradyanı ekleme.

Metin alanı biçim ifadesi

Metin alanı biçim ifadesi, karma metin biçimlendirmesi sağlamak için sembol katmanları textOptions özelliğinin seçeneğiyle textField kullanılabilir. Bu ifade, bir dizi giriş dizesinin ve biçimlendirme seçeneğinin belirtilmesine olanak tanır. Bu ifadedeki her giriş dizesi için aşağıdaki seçenekler belirtilebilir.

  • 'font-scale' - Yazı tipi boyutu için ölçeklendirme faktörünü belirtir. Belirtilirse, bu değer tek tek dize için özelliğini textOptions geçersiz kılarsize.
  • 'text-font' - Bu dize için kullanılması gereken bir veya daha fazla yazı tipi ailesi belirtir. Belirtilirse, bu değer tek tek dize için özelliğini textOptions geçersiz kılarfont.

Aşağıdaki sahte kod, metin alanı biçim ifadesinin yapısını tanımlar.

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

Örnek

Aşağıdaki örnek, kalın yazı tipi ekleyerek ve özelliğin özelliğinin yazı tipi boyutunu title artırarak metin alanını biçimlendirmektedir. Bu örnek ayrıca özelliğin subTitle özelliğini ölçeği azaltılmış yazı tipi boyutuyla yeni bir satıra ekler.

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

Bu katman, nokta özelliğini aşağıdaki görüntüde gösterildiği gibi işler:

Image of Point feature with formatted text field

Sayı biçimi ifadesi

İfade number-format yalnızca simge katmanı seçeneğiyle textField kullanılabilir. Bu ifade, sağlanan sayıyı biçimlendirilmiş bir dizeye dönüştürür. Bu ifade JavaScript'in Number.toLocalString işlevini sarmalar ve aşağıdaki seçenek kümesini destekler.

  • locale - Sayıları belirtilen dille uyumlu bir şekilde dizelere dönüştürmek için bu seçeneği belirtin. Bu seçeneğe bir BCP 47 dil etiketi geçirin.
  • currency - Sayıyı para birimini temsil eden bir dizeye dönüştürmek için. Olası değerler ABD doları için "USD", euro için "EUR" veya Çin RMB'si için "CNY" gibi ISO 4217 para birimi kodlarıdır.
  • 'min-fraction-digits' - Sayının dize sürümüne eklenecek en az ondalık basamak sayısını belirtir.
  • 'max-fraction-digits' - Sayının dize sürümüne eklenecek en fazla ondalık basamak sayısını belirtir.

Aşağıdaki sahte kod, metin alanı biçim ifadesinin yapısını tanımlar.

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

Örnek

Aşağıdaki örnekte, nokta özelliğinin revenue özelliğinin abd doları değeri gibi görünecek şekilde bir sembol katmanı seçeneğinde textField nasıl işlendiğini değiştirmek için bir ifade kullanılırnumber-format.

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

        offset: [0, 0.75]
    }
});

Bu katman, nokta özelliğini aşağıdaki görüntüde gösterildiği gibi işler:

Number format expression example

Görüntü ifadesi

Görüntü ifadesi, bir sembol katmanının image ve textField seçenekleriyle ve fillPattern çokgen katmanı seçeneğiyle kullanılabilir. Bu ifade, istenen görüntünün stilde olup olmadığını denetler ve görüntünün şu anda stilde olup olmadığına bağlı olarak çözümlenen görüntü adını veya nulldöndürür. Bu doğrulama işlemi zaman uyumludur ve görüntü bağımsız değişkeninde istenmeden önce resmin stile eklenmesini gerektirir.

Örnek

Aşağıdaki örnek, simge image katmanında metin içeren satır içi simge eklemek için bir ifade kullanır.

 //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']
        }
    }));
});

Bu katman, aşağıdaki görüntüde gösterildiği gibi simge katmanındaki metin alanını işler:

Image expression example

Yakınlaştırma ifadesi

bir zoom ifade, işleme zamanında haritanın geçerli yakınlaştırma düzeyini almak için kullanılır ve olarak ['zoom']tanımlanır. Bu ifade, haritanın en düşük ve en yüksek yakınlaştırma düzeyi aralığı arasında bir sayı döndürür. Web ve Android için Azure Haritalar etkileşimli harita denetimleri, 0 ile 24 arasında numaralandırılmış 25 yakınlaştırma düzeyini destekler. İfadenin kullanılması, haritanın zoom yakınlaştırma düzeyi değiştikçe stillerin dinamik olarak değiştirilmesini sağlar. İfade zoom yalnızca ve step ifadeleriyle interpolate kullanılabilir.

Örnek

Varsayılan olarak, ısı haritası katmanında işlenen veri noktalarının yarıçapı tüm yakınlaştırma düzeyleri için sabit bir piksel yarıçapı vardır. Harita yakınlaştırıldıkça, veriler bir araya toplanır ve ısı haritası katmanı farklı görünür. Her zoom bir veri noktasının haritanın aynı fiziksel alanını kaplaması için her yakınlaştırma düzeyi için yarıçapı ölçeklendirmek için bir ifade kullanılabilir. Isı haritası katmanının daha statik ve tutarlı görünmesini sağlar. Haritanın her yakınlaştırma düzeyi, önceki yakınlaştırma düzeyinin iki katı kadar dikey ve yatay piksele sahiptir. Yarıçapı her yakınlaştırma düzeyiyle ikiye katlayarak ölçeklendirmek, tüm yakınlaştırma düzeylerinde tutarlı görünen bir ısı haritası oluşturur. Aşağıdaki örnekte gösterildiği gibi2 * Math.pow(2, minZoom - maxZoom), en base 2 exponential interpolation düşük yakınlaştırma düzeyi için piksel yarıçapı ayarlanmış ve maksimum yakınlaştırma düzeyi için ölçeklendirilmiş yarıçap hesaplanmış bir ifade ile ifade kullanılarak zoom gerçekleştirilebilir.

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

Etkileşimli bir çalışma örneği için bkz . Tutarlı yakınlaştırılabilir ısı haritası.

Değişken bağlama ifadeleri

Değişken bağlama ifadeleri bir hesaplamanın sonuçlarını bir değişkende depolar. Bu nedenle, hesaplama sonuçlarına ifadenin başka bir yerinde birden çok kez başvurulabilmesini sağlar. Birçok hesaplama içeren ifadeler için kullanışlı bir iyileştirmedir.

Expression Dönüş türü Tanım
[
    'hadi',
    name1: dize,
    value1: any,
    name2: dize,
    value2: any,
    ...
    childExpression
]
Bir veya daha fazla değeri, sonucu döndüren alt ifadede ifadesi tarafından var kullanılmak üzere değişken olarak depolar.
['var', name: string] herhangi bir ifadesi kullanılarak oluşturulan bir değişkene başvurur let .

Örnek

Bu örnekte, sıcaklık oranına göre geliri hesaplayan ve ardından bu değer üzerinde farklı boole işlemlerini değerlendirmek için bir ifade kullanan bir case ifade kullanılır. İfade let , geliri sıcaklık oranına göre depolamak için kullanılır, böylece yalnızca bir kez hesaplanması gerekir. İfade, var bu değişkeni yeniden hesaplamaya gerek kalmadan gerektiği kadar sık başvurur.

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

Sonraki adımlar

İfadeleri uygulayan diğer kod örnekleri için aşağıdaki makalelere bakın:

İfadeleri destekleyen katman seçenekleri hakkında daha fazla bilgi edinin: