Leaflet加载GeoJSON数据，并添加到FeatureGroup

Leaflet中文网站：
Leaflet - 一个交互式地图 JavaScript 库https://leafletjs.cn/

    本文记录了Vue地图项目，加载 GeoJSON数据，并添加到 FeatureGroup 上；

官方文档是直接：

L.geoJSON(geojsonFeature).addTo(map);

     我并不想直接加到map上，因为一开始 mounted 的时候已经创建了一个 FeatureGroup，写了很多方法都是直接拿这个 FeatureGroup，进行 getLayer ( _leaflet_id )等操作，之后再重新加载 GeoJSON数据，添加到 FeatureGroup上比较好操作。而且直接添加到map上会有一些bug...

      现在看看我是怎么做的，这也花了我一天时间...

1、查看数据内容

    GeoJSON数据内容 是肯德基、麦当劳的位置，每个数据是由我绘制的多边形图层 保存为 GeoJSON数据的：

L.layerGroup(layerArray).toGeoJSON();

GeoJSON数据保存在layerArray里，打印出来看看：

 把肯德基的打开看看具体是什么：

数据就是上面这样， coordinates是点的经纬度，可以看出来这是一个三角形区域。properties是一些自己添加的属性。

 

2、解析数据 L.geoJSON(geojsonFeature)

通过 L.Util.setOptions给每一层的option添加上我自己定义的一些信息，如：店铺名称（name）、店铺编号（num）、店铺介绍（description），亲测不能直接 layer.option.name = "肯德基" 这样赋值，得通过 L.Util.setOptions（官方文档里有提到这个方法）；onEachFeature选项就是遍历每一层；style选项用于为特征设置样式（边框颜色、填充颜色、透明度...）。

let layers = L.geoJson(layerArray,{
  onEachFeature:function (feature, layer) {
    L.Util.setOptions(layer,{
      name: feature.properties.name,
      num: feature.properties.num,
      description: feature.properties.description,})
  },
  style: function(feature){
    return {
      color: feature.properties.color,
      stroke: feature.properties.stroke,
      weight: feature.properties.weight,
      opacity: feature.properties.opacity,
      fillColor: feature.properties.fillColor,
      fillOpacity: feature.properties.fillOpacity,
    }
  },
});

3、观察分析 L.geoJSON(geojsonFeature)

控制台打印一下上面代码的这个layers（打印的时候少打了一个s，所以下面显示的是layer）：

 打开 options 看看 onEachFeature 和 style 有没有生效：

发现这个层里面的options还是两个函数，好像函数没有生效？按理说应该就是出现店铺名称（name）、店铺编号（num）、店铺介绍（description）等信息的呀...

此时如果直接将 layers 添加到 mounted 时已经创建好的 FeatureGroup（以下是伪代码）：

L.featureGroup().addLayer(L.geoJSON(featureData))

或者 直接将 layers 赋值替换 mounted 时已经创建好的 FeatureGroup（以下是伪代码）：

L.featureGroup()= L.geoJSON(featureData)

都是不行的🙅！ 这个时候点击相应图层，并不是我们添加到 FeatureGroup里的图层。即：

      从上面我们可以看到，geoJSON 图层的 _leaflet_id 为 414，但是我在地图上点击 肯德基图层 的时候，打印出来的 _leaflet_id 却是 413 ？？？我晕了。

看了大半天，打开 geoJSON 图层的_layers 竟然发现了 _leaflet_id 为 413的层（也就是肯德基图层），麦当劳图层也在这里。

 大概总结一下：

        geoJSON 图层（layers）的options 是包含构造函数 onEachFeature、 style的层，只是保存了各种选项的配置 ， layers._layers里才是真正生成好的层，点击图层的时候，点击的是 layers._layers里的图层 ，而不是layers ，故只将 layers._layers 中的图层加入到定义好的 FeatureGroup 中，就能实现点击的图层，就是 FeatureGroup 的图层了。

4、添加到FeatureGroup

        从3、可以知道，layers._layers是一个对象，里面的每个键是生成的子图层的_leaflet_id，值为每个层，故遍历添加到 FeatureGroup 就好啦：

let keys = Object.keys(layers._layers)
for (let key of keys) {
  let layer = layers._layers[key]
  this.geojsonLayers.addLayer(layer)
}

        这样就将 GeoJSON数据转换为一个一个图层，并保存到 FeatureGroup 上了。因为mounted时已经L.featureGroup([],).addTo(map)，所以此时map里也同步有了这些图层。此时可以很方便地调用featureGroup的方法。