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 null
baş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 e dö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 PI dö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 DataSource
hesaplamayı 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
- Sayılar için:
- 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 false ve false girişi ise true döndürürtrue . |
['!=', value, value] |
boolean | Giriş değerleri eşit değilse döndürür true false . |
['<', 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 true false ise döndürürtrue , aksi takdirde. |
['any', boolean, boolean, …] |
boolean | Girişlerden true false 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, , MultiPolygon Feature veya FeatureCollection türünde Polygon geç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 true
ve 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 , null veya 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 false ise 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 255 0 değişen kırmızı, yeşil ve mavi bileşenlerden ve alfa bileşeninden 1 bir 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 255 ile aralığındaki bir alfa bileşeninden 0 1 renk 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 255
değ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.
İ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 |
---|---|---|
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.
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.
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 1
arası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ı true
gerektirirlineMetrics
.
Ö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ğinitextOptions
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ğinitextOptions
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:
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:
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 null
dö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:
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: