---
title: GeoJSON
source: https://vjmap.com/guide/geojson.html
---

# GeoJSON

***注：*** 是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：`点`、`线`、`面`、`多点`、`多线`、`多面`和`几何集合`。GeoJSON里的特征包含一个`几何对象`和`属性对象`，特征集合表示一系列特征。

## FeatureCollection

---
#### Geojson特征集合数据格式：
> 这里重点说明的是当一份geojson数据中含有`多种数据格式，点线面`时，如何通过`filter`字段实现过滤功能。

**类型筛选器**
> + `"Point"`  注意传入的是`字符串`
> + `"LineString"` 注意传入的是`字符串`
> + `"Polygon"` 注意传入的是`字符串`

```js
  map.addLayer({
    "id": "lineid",
    "type": "line",
    "source": "geojsonCollections", //必须和上面的geojsonCollections一致
    "filter": ["==", "$type", "LineString"], //关键点：$type是固定语法，类型是Point、LineString、Polygon
    "layout": {
      ...
    },
    "paint": {
      ...
    }
  });
```

---

**标准数据格式如下：**

```js
var FeaCollection = {
      "type": "FeatureCollection",
      "features": [{
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": []
        },
      }, {
        "type": "Feature",
        "geometry": {
          "type": "LineString",
          "coordinates": [[]]
        }
      }, {
        "type": "Feature",
        "geometry": {
          "type": "Polygon",
          "coordinates": [[[]]]
        }
      }]
    }

```

## Point

***注：*** 对类型"Point"来说，“coordinates"成员必须是一个一维数组。

**标准数据格式：**

```javascript
var Point = {
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [102.0, 0.5]},
    "properties": {
        "prop0": "value0"
    }
}
```

**样式说明：**
~~~ json
"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] //表示显示位置基于原始位置上,再按照屏幕坐标进行偏移,这个应该绝大部分都用不上
}
~~~

## Line

***注：*** 对类型`LineString`来说，`coordinates`成员必须是`二维数组`，数组内部又是一个数组，表示组成这条线的点集。

**标准数据格式：**

```javascript
var GeoLine = {
      "type": "LineString",
      "properties":{
          "prop0": "value0"
      },
      "coordinates": [
          [
              114.34776306152344,
              30.623436511269382
          ],
          [
              114.32510375976562,
              30.63909360759635
          ],
          [
              114.30673599243164,
              30.634958017061198
          ],
          [
              114.29180145263672,
              30.629640569460406
          ]]
  };
```

***注：*** 线性环具有4个或者更多位置的封闭的线。第一个和最后一个位置是相等的（它们表示相同的的点）。`这个不是指的封闭的区`而是指的`环状线`。

**样式说明：**
~~~ json
{
  "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] //表示显示位置基于原始位置上,再按照屏幕坐标进行偏移,这个应该绝大部分都用不上
  }
}
~~~

## Polygon

***注：*** 对类型"Polygon"来说，"coordinates"成员必须是一个线性环坐标数组的数组(`三维数组`)。对拥有多个环的的面来说，第一个环必须是外部环，其他的必须是内部环或者孔。外部环是`顺时针方向`，内部环是`逆时针方向`.

> 请注意， 如果只是一个简单的区的话`顺时针、逆时针`都可以显示。但是针对带洞区，最好采取外圈`顺时针`，内圈`逆时针`的方式保证显示效果的一致性。不然`一份数据`可能在前端的显示效果会`不尽相同`。

> `外顺内逆`是带洞区， `外顺内顺`是类似同心圆的`叠加区`。

**标准数据格式：**

```javascript
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
                    ]
                ]
            ]
        }
    };
```

---
**样式说明：**
~~~ json
{
  "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] //表示显示位置基于原始位置上,再按照屏幕坐标进行偏移,这个应该绝大部分都用不上
  }
}
~~~


## MultiPoint

***注：*** 对类型`MultiPoint`来说，`coordinates`成员必须是`二维数组`。


标准数据格式：
```javascript
var MultiPoint = {
        "type": "Feature",
        "properties": {},
        "geometry": {
            "type": "MultiPoint",
            "coordinates": [
                [
                    114.29351806640625,
                    30.602457940999596
                ],[
                    114.21146392822264,
                    30.56580841410847
                ],[
                    114.30896759033203,
                    30.529145036680408
                ]
            ]
        }
    };
```


## MultiLineString

***注：*** 对类型`MultiLineString`来说，`coordinates`成员必须是一个线坐标数组的数组(`三维数组`)。


**标准数据格式：**

```javascript
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
                    ]
                ]  //第二条线结束
            ]
        }
    };
```

## MultiPolygon

***注：*** 对类型`MultiPlygon`来说，`coordinates`成员必须是面坐标数组的数组(`四维数组`)。

***注：*** 对类型`Polygon`来说，`coordinates`成员必须是一个线性环坐标数组的数组(`三维数组`)。对拥有多个环的的面来说，第一个环必须是外部环，其他的必须是内部环或者孔。外部环是`顺时针方向`，内部环是`逆时针方向`.

> 请注意， 如果只是一个简单的区的话`顺时针、逆时针`都可以显示。但是针对带洞区，最好采取外圈`顺时针`，内圈`逆时针`的方式，保证显示效果的一致性。不然`一份数据`可能在前端的显示效果会`不尽相同`。

> `外顺内逆`是带洞区， `外顺内顺`是类似同心圆的`叠加区`。

**标准数据格式：**
```javascript
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
              ]
            ]
          ] //多区 第二个部分 普通区结束
        ]
      }
    }
```