# GeoJSON
注： 是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和属性对象，特征集合表示一系列特征。
# FeatureCollection
# Geojson特征集合数据格式：
这里重点说明的是当一份geojson数据中含有
多种数据格式，点线面时，如何通过filter字段实现过滤功能。
类型筛选器
"Point"注意传入的是字符串"LineString"注意传入的是字符串"Polygon"注意传入的是字符串
map.addLayer({
"id": "lineid",
"type": "line",
"source": "geojsonCollections", //必须和上面的geojsonCollections一致
"filter": ["==", "$type", "LineString"], //关键点：$type是固定语法，类型是Point、LineString、Polygon
"layout": {
...
},
"paint": {
...
}
});
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
标准数据格式如下：
var FeaCollection = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": []
},
}, {
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [[]]
}
}, {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[[]]]
}
}]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# Point
注： 对类型"Point"来说，“coordinates"成员必须是一个一维数组。
标准数据格式：
var Point = {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [102.0, 0.5]},
"properties": {
"prop0": "value0"
}
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
样式说明：
"paint": {
"circle-radius": 15,//半径
"circle-color": "#FF0000",//颜色
"circle-opacity": 0.8, //透明度
"circle-stroke-width": 5, //轮廓线宽度
"circle-stroke-color": "#0000FF",//轮廓线颜色
"circle-stroke-opacity": 0.7//轮廓线透明度
"circle-translate": [0,0] //表示显示位置基于原始位置上,再按照屏幕坐标进行偏移,这个应该绝大部分都用不上
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# Line
注： 对类型LineString来说，coordinates成员必须是二维数组，数组内部又是一个数组，表示组成这条线的点集。
标准数据格式：
var GeoLine = {
"type": "LineString",
"properties":{
"prop0": "value0"
},
"coordinates": [
[
114.34776306152344,
30.623436511269382
],
[
114.32510375976562,
30.63909360759635
],
[
114.30673599243164,
30.634958017061198
],
[
114.29180145263672,
30.629640569460406
]]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
注： 线性环具有4个或者更多位置的封闭的线。第一个和最后一个位置是相等的（它们表示相同的的点）。这个不是指的封闭的区而是指的环状线。
样式说明：
{
"layout": {
"line-cap": "square", //butt 尖头，round 圆头，square平头
"line-join": "round", //bevel平拐，round 圆拐，miter棱拐
"line-miter-limit": 2, //棱拐的限制，一般用不上
"line-round-limit": 1.05,//圆拐的限制，一般用不上
"visibility": "visible", //是否可见 visible / none
},
"paint": {
"line-width": 20, //宽度
"line-color": "#000000", //颜色
"line-opacity": 0.8, //透明度
"line-gap-width" : 0, //线的沟宽，如果有一条线会变成2条线，中间有条沟
"line-offset" : 0, //尽量少用，如果这个值相对大的话在拐角处很容易变形变胖
"line-dasharray": [5,2],//实线、虚线的组合，可以表示铁路线等
"line-blur" : 5,//模糊度，和宽度配合使用，当宽度20，模糊度10时，出现边线模糊的效果，该值要小于线宽度
"line-pattern": "picture_name", //线的拉伸图片类型，一定要与对应的样式库的图片名字一一对应
"line-translate": [0,0] //表示显示位置基于原始位置上,再按照屏幕坐标进行偏移,这个应该绝大部分都用不上
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Polygon
注： 对类型"Polygon"来说，"coordinates"成员必须是一个线性环坐标数组的数组(三维数组)。对拥有多个环的的面来说，第一个环必须是外部环，其他的必须是内部环或者孔。外部环是顺时针方向，内部环是逆时针方向.
请注意， 如果只是一个简单的区的话
顺时针、逆时针都可以显示。但是针对带洞区，最好采取外圈顺时针，内圈逆时针的方式保证显示效果的一致性。不然一份数据可能在前端的显示效果会不尽相同。
外顺内逆是带洞区，外顺内顺是类似同心圆的叠加区。
标准数据格式：
var GeoPolygon = {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
114.32510375976562,
30.63968439181164
],
[
114.22931671142578,
30.608958829007946
],
[
114.22348022460937,
30.601275914486066
],
[
114.22931671142578,
30.580588116155223
],
[
114.32510375976562,
30.63968439181164
]
]
]
}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
样式说明：
{
"layout": {
"visibility": "visible" //是否可见 visible / none
},
"paint": {
"fill-antialias": true, //抗锯齿，true表示针对边界缝隙进行填充
"fill-color": "#000000", //颜色
"fill-opacity": 0.8, //透明度
"fill-outline-color": "#FFFF00",//边线颜色，没错,确实没有边线宽度这个选项
"fill-pattern":"picture_name", //线的拉伸图片类型，一定要与对应的样式库的图片名字一一对应
"fill-translate": [0,0] //表示显示位置基于原始位置上,再按照屏幕坐标进行偏移,这个应该绝大部分都用不上
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# MultiPoint
注： 对类型MultiPoint来说，coordinates成员必须是二维数组。
标准数据格式：
var MultiPoint = {
"type": "Feature",
"properties": {},
"geometry": {
"type": "MultiPoint",
"coordinates": [
[
114.29351806640625,
30.602457940999596
],[
114.21146392822264,
30.56580841410847
],[
114.30896759033203,
30.529145036680408
]
]
}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# MultiLineString
注： 对类型MultiLineString来说，coordinates成员必须是一个线坐标数组的数组(三维数组)。
标准数据格式：
var MultiLine = {
"type": "Feature",
"properties": {},
"geometry": {
"type": "MultiLineString",
"coordinates": [
[ //第一条线开始
[
114.30862426757812,
30.65533885862785
],
[
114.23755645751953,
30.55191344082329
]
], //第一条线结束
[ //第二条线开始
[
114.3134307861328,
30.677191798461496
],
[
114.38827514648437,
30.528849308009075
]
] //第二条线结束
]
}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# MultiPolygon
注： 对类型MultiPlygon来说，coordinates成员必须是面坐标数组的数组(四维数组)。
注： 对类型Polygon来说，coordinates成员必须是一个线性环坐标数组的数组(三维数组)。对拥有多个环的的面来说，第一个环必须是外部环，其他的必须是内部环或者孔。外部环是顺时针方向，内部环是逆时针方向.
请注意， 如果只是一个简单的区的话
顺时针、逆时针都可以显示。但是针对带洞区，最好采取外圈顺时针，内圈逆时针的方式，保证显示效果的一致性。不然一份数据可能在前端的显示效果会不尽相同。
外顺内逆是带洞区，外顺内顺是类似同心圆的叠加区。
标准数据格式：
var MultiPolygon = {
"type": "Feature",
"properties": {
name: "多面"
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[ //多区 第一个部分
[ //这和数据是逆时针，但是照样可以绘制出来，因为这个第一部分只是一个简单区
[
114.3233871459961,
30.57438091562706
],
[
114.33368682861328,
30.57851909346139
],
[
114.34587478637695,
30.586647142912706
],
[
114.33162689208984,
30.596695425524466
],
[
114.31617736816406,
30.57955361032709
],
[
114.3233871459961,
30.57438091562706
]
]
], //多区 第一个部分 带动区结束
[ //多区 第二个部分 普通区开始
[
[
114.33454513549805,
30.479893814659587
],
[
114.38587188720703,
30.479893814659587
],
[
114.38587188720703,
30.504596494227247
],
[
114.33454513549805,
30.504596494227247
],
[
114.33454513549805,
30.479893814659587
]
]
] //多区 第二个部分 普通区结束
]
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63