Leaflet【三】图层组 geoJson 热力图

图层组 LayerGroup

用于将几个图层分组并作为一个整体处理。如果你把它添加到地图上，任何从该组中添加或删除的图层也会在地图上添加/删除。

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

使用图层组有什么好处呢？这个在后面有说到，这里的样例代码，我们原本是创建好的marker1、2直接通过addTo就加到了地图上，使用图层组将相当于把这两个图层放到一个集合当中，然后将整个集合一起渲染到地图上。关于图层组的方法可以查看–>

补充

图层组的优势是什么，第一点还是想到了性能问题。在上一篇文章当中渲染图片的地方可以看一下（对比一下图层组的性能）因为图层组还是多了一步统一管理时间上会稍微慢一点。

  console.time('执行时间');
  for (let i = 0; i < 100; i++) {
    for (let j = 0; j < 50; j++) {
      const bounds = [[(j - 1) * 5, (i - 1) * 5], [5 * j, 5 * i]];
      L.imageOverlay(`https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg`, bounds).addTo(map);
    }
  }
  console.timeEnd('执行时间');// 控制台输出 ---> 执行时间: 271.128173828125 ms


  console.time('执行时间');
  const arr = [];
  for (let i = 0; i < 100; i++) {
    for (let j = 0; j < 50; j++) {
      const bounds = [[(j - 1) * 5, (i - 1) * 5], [5 * j, 5 * i]];
      arr.push(L.imageOverlay(`https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg`, bounds));
    }
  }
  const layer = L.featureGroup(arr)
      .addTo(map);
  console.timeEnd('执行时间'); // 控制台输出 ---> 执行时间: 309.530029296875 ms

而图层组主要的思想还是化零为整，统一管理，例如我们的地图上有三种类型不同的点，我们需要去控制按类型做显示隐藏，利用图层组，将不同类型的点加到不同图层当中统一控制，案例如下：

const pointA = [] // 三种类型的数据
const pointB = []
const pointC = []

const layerListA = []
// 注意 纬度在前 经度在后
pointA.forEach(item => {layerListA.push(L.marker([item.lat, item.lon]))})
// ...... BC同理取layerListB layerListC
const layerA = L.featureGroup(layerListA).addTo(map);
const layerB = L.featureGroup(layerListB).addTo(map);
const layerC = L.featureGroup(layerListC).addTo(map);
// 控制隐藏 先将图层从地图当中移出
map.removeLayer(layerA);
// 不要使用 layer.clearLayers();  这个会将图层当中的数据清除掉，
// 重新渲染
map.add(layerA);

要素组 FeatureGroup

是对LayerGroup的扩展，使它更容易对其所有成员图层做同样的事情。

L.featureGroup([marker1, marker2, polyline])
    .bindPopup('Hello world!')
    .on('click', function() { alert('Clicked on a member of the group!'); })
    .addTo(map);

GeoJSON 图层

允许你解析 GeoJSON 数据并将其显示在地图上。扩展自FeatureGroup。其中geoJson数据可以在阿里云地图选择器下载

import GUANGDONG from '@/assets/mapJson/guangdong.json';
import GUANGXI from '@/assets/mapJson/guangxi.json';
const gdLayer = L.geoJSON(GUANGDONG, {
  // 这个style是继承自Path的，也就是marker点、线面等等都是同一套样式控制
  style: {
    'color': '#f40',
    'weight': 1,
    'opacity': 0.8
  }
}).addTo(map);

// 可以直接通过addData方法加载geoJson数据到该图层当中
gdLayer.addData(GUANGXI)

在这里插入图片描述

热力图 HeatMap

在leaflet官网当中提供了很多的插件->go，也包含了热力图的插件，这块使用的是Leaflet.heat插件，里面还有一些其他的热力图的插件 leaflet 热力图插件

安装依赖

npm i leaflet.heat

demo实现

import 'leaflet.heat';

const addHeat = () => {
  for (let i = 0; i < 1000; i++) {
    res.push([
      Math.random() * 80 - 40, // 纬度
      Math.random() * 160 - 80, // 经度
      Math.random() * 3000 + '' // 值
    ]);
  }
  const layerHeat = L.heatLayer(heatPoint, {radius: 10});
  map.addLayer(layerHeat);
}