feature-filter
feature-filter 顾名思义就是要素过滤的意思,
其本质表示从一个数据集里进行数据过滤和筛选,类似js里的Array.prototype.filter函数
WARNING
数据集里的每条数据可以被多个filter获取,比如一共10条数据,所有的filter结果集合的 数据量总和完全可以大于原始数据集的10
WARNING
feature-filter是个纯的数据过滤工具,和地图状态无关，所有不存在利用地图状态来过滤数据，不要和funtion-type 搞混了
feature-filter 支持的操作符有
| 操作符 | 说明 | 备注 |
|---|---|---|
| has | 拥有某个属性的意思 | {a:1}里有属性a |
| !has | 和has正好相反 | |
| in | 表示在的意思 | 比如0在 [0,1,2] 里 |
| !in | 不在的意思 | |
| == | 等于 | |
| != | 不等于 | |
| > | 大于 | |
| >= | 大于等于 | |
| < | 小于 | |
| <= | 小于等于 | |
| contains | 包含的意思即js里string的indexOf | 比如'abc'包含'a' |
feature-filter 支持的条件符号有
| 条件符合 | 说明 | 备注 |
|---|---|---|
| all | 所有条件必须全为真 | |
| any | 所有条件有真的即为真 | |
| none | 所有条件为全非 | |
feature-filter里的私有属性有
| 私有属 | 说明 | 备注 |
|---|---|---|
| $type | 要素的类型 | Point,LineString,Polygon等 |
| $layer | 图层的名字 | 矢量切片的瓦片里会包含多个图层的数据的 |
WARNING
注意单独的GeoJSON文件里是没有 $layer的,因为其时单一的数据集，矢量瓦片里有 $layer,因为其是多个GeoJSON 数据集
矢量瓦片里的数据结构如下：
js
{
building:GeoJSON,
road:GeoJSON
}building,road表示图层($layer)的名字，后面的值就是个GeoJSON了
WARNING
因为这两个字段为内部私有的字段,所以在你的数据最好不要包含这两个特殊的字段,否则可能导致一些未知的错误
举例
比如我们有这样一个GeoJSON的数据,一共4条数据3个点一个线,下面我们来列几个需求看看filter怎样写?
json
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [120.61662016250978, 31.17243827732122]
},
"properties": {
"price": 10,
"name": "中国移动1",
"color": "#ff0",
"center": [0, 0]
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [120.63876448013673, 31.156427465798203]
},
"properties": {
"price": 15,
"name": "中国移动2",
"color": "##fff"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [120.63876448013673, 31.156427465798203]
},
"properties": {
"price": 14,
"name": "中国电信1",
"color": "##fff"
}
},
{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[120.63876448013673, 31.156427465798203],
[120.63876448013673, 31.156427465798203]
]
},
"properties": {
"price": 12,
"name": "中国电信2",
"color": "##fff"
}
}
]
}查询数据里面的所有的点的数据
数据里有点和其他类型的数据,我们只要点的数据,那么只要判断要素的类型为Point即可
js
{
filter: ["all", ["==", "$type", "Point"]];
}
//可以拿到3条数据
//如果条件反转我们就可以拿到一条线的数据
{
filter: ["all", ["!=", "$type", "Point"]];
}查询数据里面的所有的点的数据且价格小于等于12的数据
在上个问题的基础上我们只要加个其价格小于等于12的条件即可
js
{
filter: ["all", ["==", "$type", "Point"], ["<=", "price", 12]];
}
//可以拿到1条数据查询数据有含有center属性的数据
从数据里看只有第一条数据满足条件,需要有has操作符
js
{
filter: ["all", ["has", "center"]];
}
//可以拿到1条数据
//如果条件反转我们就可以拿到3条线的数据
{
filter: ["all", ["!has", "center"]];
}查询数据价格在给定数组的的要素,比如价格给定的数组为[0,10,15]
显然我们要用in操作符了
js
{
filter: ["all", ["in", "price", 0, 10, 15]];
}
//可以拿到2条数据WARNING
注意：
给定的数组不是传入数组,而是从属性名后的所有要素自动收集为一个给定的数组,比如上面的
js
["in", "price", 0, 10, 15];- in 是操作符
- price 是数据里的属性
- 后面的数据自动被收集为给定的价格数组了
查询数据名字里面包含移动的数据
显然是模糊匹配，我们需要contains操作符了
js
{
filter: ["all", ["contains", "name", "移动"]];
}
//可以拿到2条数据查询数据名字里面包含移动的或者价格小于14的数据
从条件里我们看到了或，这时我们就需要用条件符号any
js
{
filter: ["any", ["contains", "name", "移动"], ["<", "price", 14]];
}