概述
通過前面的文章初識(shí)mapbox GL我們對(duì)mapbox GL有了一個(gè)相對(duì)比較全面的認(rèn)識(shí)煌集，本節(jié)結(jié)合一些示例垦巴，重點(diǎn)講述一下mapbox GL里面的filter和paint的用法帅刀。
說明
本文中的示例數(shù)據(jù)源是北京的區(qū)邊界數(shù)據(jù)，格式為geojson惋戏，數(shù)據(jù)字段與詳情如下：
filter
filter是layer里面的一個(gè)屬性驰徊，通過一些條件表達(dá)式實(shí)現(xiàn)僅顯示與過濾器匹配的要素，即圖層的過濾顯示惦银，其官方說明如下圖：
1咆课、==和!=
==和!=可實(shí)現(xiàn)根據(jù)某個(gè)字段圖層的過濾展示。如：只在地圖上展示昌平區(qū)或者在地圖上展示除昌平外的所有區(qū)域扯俱。
// 只在地圖上展示昌平區(qū)
var filter = ['==', 'name', '昌平區(qū)'];
//地圖上展示除昌平外的所有區(qū)域
var filter = ['!=', 'name', '昌平區(qū)'];
2书蚪、>、>=迅栅、<殊校、<=
>、>=库继、<箩艺、<=是通過比較大小的方式，實(shí)現(xiàn)圖層的過濾宪萄，所以此處需要的字段得是數(shù)字類型或者通過to-number將字段轉(zhuǎn)換成數(shù)字類型艺谆。如：展示count>=10的區(qū)域。
var filter = ['>=', 'count', 10];
3拜英、in和match
in和match都可實(shí)現(xiàn)對(duì)圖層根據(jù)某個(gè)字段進(jìn)行多值過濾静汤。如：在地圖上展示昌平區(qū)和海淀區(qū)。
// in
var filter = [
'in',
'name',
'昌平區(qū)',
'海淀區(qū)'
];
// match
var filter = [
"match",
[
"get",
"name"
],
[
"昌平區(qū)",
"海淀區(qū)",
],
true,
false
]
接著上面的例子居凶，如果我們要實(shí)現(xiàn)在地圖中展示除海淀和昌平區(qū)外的其他區(qū)域虫给，我們可以直接用!in和將match的條件互換的方式來實(shí)現(xiàn)，如下：
// in
var filter = [
'!in',
'name',
'昌平區(qū)',
'海淀區(qū)'
];
// match
var filter = [
"match",
[
"get",
"name"
],
[
"昌平區(qū)",
"海淀區(qū)",
],
false,
true
]
4侠碧、多條件
有時(shí)候抹估，會(huì)存在多條件的過濾，例如：我們選擇type==1并且count>10的區(qū)域弄兜，我們可以這么寫：
var filter = [
'all',
['>=', 'count', 10],
['==', 'type', 1]
]
當(dāng)然药蜻，有時(shí)我們會(huì)存在根據(jù)幾何類型來進(jìn)行過濾瓷式，此時(shí)，我們可用：
var filter = [
"==",
["geometry-type"],
"LineString"
];
paint
paint是layer的一個(gè)屬性语泽，負(fù)責(zé)圖層的渲染與呈現(xiàn)贸典。
1、match
match通常用于枚舉型的字段渲染踱卵，如唯一值渲染廊驼。
'circle-color': [
'match',
['get', 'type'],
1, '#FFD273',
2, '#E86D68',
'#A880FF'
]
2、case
case通常用于分段數(shù)值型的字段渲染惋砂，值域是前關(guān)后開妒挎，如分級(jí)渲染。
'circle-color': [
'case',
['<', ['get', 'speed'], 10.8], 'rgba(0,0,0,0)', //<10.8
['<', ['get', 'speed'], 17.2], 'rgba(153, 255, 153, .9)', //>=10.8 & <17.2
['<', ['get', 'speed'], 24.5], 'rgba(102, 204, 255, .9)',
['<', ['get', 'speed'], 32.7], 'rgba(255, 255, 102, .9)',
['<=', ['get', 'speed'], 41.5], 'rgba(253, 139, 0, .9)',
['<=', ['get', 'speed'], 50.1], 'rgba(255, 51, 0, .9)', //>=41.5 & <50.1
'rgba(255, 0, 255, .9)' // 默認(rèn)值, >=50.1
]
注意：
- 第一個(gè)的判斷是
<; - 中間的判斷是
>=和<; - 最后一個(gè)判斷是
>=;
case
3班利、step
step和上面的case很類似饥漫，只是值域是前開后關(guān)的榨呆。
// <=100, 100-500, >500
"circle-color": [
"step",
["get", "count"],
"#51bbd6", 100,
"#f1f075", 500,
"#f28cb1" // other
]
'circle-color': [
'step',
['to-number', ['get', 'CID']],
'#0098A3', 10,
'#00CA8D', 20,
'#37C508', 30,
'#98F300', 40,
'#EFFF85'
]
說明：
- 對(duì)于非數(shù)值型的字段罗标，我們可以用
to-number對(duì)字段進(jìn)行轉(zhuǎn)換。
step
4积蜻、interpolate
interpolate闯割，中文的翻譯是“插值”，在mapbox GL中竿拆，我們可通過interpolate實(shí)現(xiàn)按照比例的插值渲染宙拉。
// <=8, 8-10, >10
"background-color": [
"interpolate",
["linear"],
["zoom"],
8, "rgba(0, 0, 255, 0.2)",
10, "rgba(255, 0, 0, 0.2)"
]
// <=20, 20-60, 60-100, >100
'fill-extrusion-color': [
'interpolate',
['linear'],
['get', 'height'],
20, 'rgba(255,255,191, 0.65)',
60, 'rgba(253,174,97, 0.65)',
100, "rgba(215,25,28, 0.65)"
]
// exponential，指數(shù)
"fill-opacity": [
"interpolate",
["exponential", 1.5],
["zoom"],
2, 0.3,
7, 0
]
說明：
-
zoom是一個(gè)特殊字符丙笋，特制地圖的縮放級(jí)別谢澈，同樣的還有geometry-type,特指的是geom類型。
interpolate
完整測試代碼如下：
var rootPath = 'http://127.0.0.1:3000/mapbox/lib/';
// var filter = ['match', ['get', 'name'],
// ['昌平區(qū)', '海淀區(qū)'], false, true
// ];
// var filter = ['!in', 'name', '昌平區(qū)', '海淀區(qū)'];
// var filter = [
// 'all',
// ['>=', 'count', 10],
// ['==', 'type', 1]
// ];
var filter = ['>=', 'count', 0];
// var fillColor = 'rgba(255, 0, 0, 0.5)';
// 唯一值圖
// var fillColor = [
// 'match',
// ['get', 'type'],
// 1, '#FFD273',
// 2, '#E86D68',
// '#A880FF'
// ];
// 分級(jí)色彩圖
// var fillColor = [
// 'case',
// ['<', ['get', 'count'], 10], '#FFD273',
// ['<', ['get', 'count'], 20], '#E86D68',
// ['<', ['get', 'count'], 30], '#A880FF',
// ['<', ['get', 'count'], 40], '#68E0E8',
// ['<=', ['get', 'count'], 50], '#9BFF69',
// '#000' // 默認(rèn)值
// ];
// 比例符號(hào)圖
var fillColor = [
'interpolate',
['linear'],
['get', 'count'],
15, '#FFD273',
30, '#E86D68',
50, '#9BFF69'
];
// 步長圖
// var fillColor = [
// 'step',
// ['get', 'count'],
// '#0098A3',
// 10, '#00CA8D',
// 20, '#37C508',
// 30, '#98F300',
// 40, '#EFFF85'
// ]
var mapStyle = {
"version": 8,
"name": "Dark",
"sources": {
"geojson": {
type: 'geojson',
data: '../data/beijing.geojson'
}
},
"glyphs": rootPath + "fonts/mapbox/{fontstack}/{range}.pbf",
"layers": [{
"id": "background",
"type": "background",
"paint": {
"background-color": "#999"
}
},
{
'id': 'geojson',
'source': 'geojson',
'type': 'fill',
'paint': {
'fill-color': fillColor,
'fill-opacity': .8
},
filter: filter
},
{
'id': 'geojson-border',
'source': 'geojson',
'type': 'line',
'paint': {
'line-color': '#FFF',
'line-width': 1.5
},
filter: filter
},
{
'id': 'points',
'type': 'symbol',
'source': 'geojson',
'layout': {
'text-field': ['get', 'name'],
"text-size": 22
},
paint: {
'text-color': '#000000'
},
filter: filter
}
]
};
map = new mapboxgl.Map({
container: 'map',
maxZoom: 18,
minZoom: 6,
zoom: 8,
center: {
lng: 116.6552,
lat: 40.2482
},
style: mapStyle,
attributionControl: false,
localIdeographFontFamily: "'全新硬筆行書簡'"
});
