leaflet 添加 layerGroup，featureGroup，geoJSON图层

本章主要是介绍一下layer的一些扩展：layerGroup，featureGroup，geoJson。从名称就能看出来，layerGroup和featureGroup是存放一系列图层的组合，geoJson是解析geoJson数据并展示在地图上。

前面我们已经讲过layer了，layerGroup继承layer，featureGroup继承layerGroup，geoJson继承featureGroup，基本上使用方法都差不多，这里主要讲一下他们之间的不同，其他共用的属性和方法可以查看：layerGroup文档。

目录

一、layerGroup

二、featureGroup

三、geoJSON

---

leaflet 详情总目录：传送

一、layerGroup

L.layerGroup([marker1, marker2])
    .addLayer(polyline)
    .addTo(map);

或者

L.layerGroup().addTo(map);

layerGroup创建时可以直接添加图层，也可以不添加，根据情况来确定。

关于layerGroup的常用方法：

方法	说明
addLayer	添加图层到图层组中，参数：layer
removeLayer	移除图层，参数：layer或者id（图层唯一id）
hasLayer	判断图层是否存在，参数：layer或者id（图层唯一id），返回：Boolean
clearLayers	移除所有图层
eachLayer	遍历图层
setZIndex	为所有图层设置z-index

这里主要讲一下setZIndex：这个方法是对当前图层组中的所有图层设置z-index，也可以对单个图层进行设置z-index，z-index的数值越大，图层级别越高，但是不同图层组之间这个值是没有关联的。

二、featureGroup

featureGroup继承layerGroup，所以创建方法一致，featureGroup相对layerGroup更容易对全部图层进行相同操作。

以下是featureGroup新增的事件和方法：

事件：

事件	说明
layeradd	添加图层时触发
layerremove	移除图层时触发

 方法：

方法	说明
setStyle	为图层组中支持setStyle方法的图层设置style
bringToFront	把图层组移到所有图层上面
bringToBack	把图层组移到所有图层下面
getBounds	获取图层组的LatLngBounds（所有图层所在的矩形区域边界）

三、geoJSON

geoJson继承featureGroup

let data = {
        features: [
          {
            geometry: {
              coordinates: [
                [
                  [
                    [119.57847441,29.4985541],
                    [119.53847441,29.4985541],
                    [119.53847441,29.4585541],
                    [119.57847441,29.4585541]
                  ],
                ],
              ],
              type: 'MultiPolygon',
            },
            geometry_name: 'geom',
            properties: {
              latitude: 29.4785541,
              longitude: 119.55847441,
            },
            type: 'Feature',
          },
        ],
        totalFeatures: 1,
        type: 'FeatureCollection',
      }
      L.geoJson(data, {
        onEachFeature: function (feature, layer) {
          layer.bindPopup('A popup!')
        },
        style: {
          color: '#0084FF',
          weight: 3,
          opacity: 1,
          fillOpacity: 0,
        },
      }).addTo(this.map)

onEachFeature：图层被创建时，每个图层都会触发该方法，可以在这里对图层做处理。

coordsToLatLng：把图层coordinates数据转为LatLng

方法：

方法	说明
addData(data)	添加新的图层到geoJson中
resetStyle(layer?)	重置图层样式，传layer则针对该图层，不传则针对所有图层
setStyle(style)	设置样式

其他的对用方法，事件，参数，大家可以参考文档：layerGroup文档。