Vue项目使用leaflet+heatmap.js加载热力图

概述 最近做数字工程实践涉及到大量的地图操作，刚开始跳过依赖于 supermap iclient for JavaScript，但是越做深入越发现局限性太大，于是开始考虑使用开源地

概述

最近做数字工程实践涉及到大量的地图操作，刚开始跳过依赖于 supermap iclient for JavaScript，但是越做深入越发现局限性太大，于是开始考虑使用开源地图库做各项操作，本文记录在 vue 项目中引入原生 leaflet 及 heatmap 打开地图及显示热力图的各项操作。

各项操作

leaflet 打开地图

第一步：下载 leaflet

Leaflet官网下载即可

第二步：vue 引入 leaflet

新建 vue 项目不在叙述，将 leaflet 库解压后拷入项目目录

使用 vendor 方式引入 leaflet 库，不会编译 js 文件

找到 webpack.base.conf.js 文件，在其中的 module.exports 中，找到 entry，在其中找到或新建 vendor，引入即可

第三步：打开第一幅地图

在 vue 文件中操作

template 标签下增加如下代码

1
2
3
template>
  <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
</template>

style 中引入 css

1
2
3
<style scoped>
  @import "https://unpkg.com/leaflet@1.0.3/dist/leaflet.css";
</style>

script 文件中引入 L

1
import L from 'leaflet'

新建地图容器

1
2
3
4
let map = L.map('map', {
          center: [39.9788, 116.30226],
          zoom: 14
        })

打开 openstreetmap

1
2
3
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
          attribution: 'Haut-Gis-Org © OpenStreetMap'
        }).addTo(this.map)

heatmap 渲染热力图

第一步：npm 方式引入 headmap.js

1
npm install heatmap.js

第二步：引入 leaflet 中使用的函数

1
import HeatmapOverlay from 'heatmap.js/plugins/leaflet-heatmap'

第四步：配置

1
2
3
4
5
6
7
8
9
10
// 配置
        var cfg = {
          'radius': 2,
          'maxOpacity': 0.8,
          'scaleRadius': true,
          'useLocalExtrema': true,
          latField: 'lat',
          lngField: 'lng',
          valueField: 'count'
        }

第五步：模拟数据

1
2
3
4
5
6
7
8
9
10
11
12
// 数据
        var testData = {
          max: 8,
          data: [{ lat: 24.6408, lng: 46.7728, count: 3 },
            { lat: 50.75, lng: -1.55, count: 1 },
            { lat: 51.55, lng: -1.55, count: 9 },
            { lat: 52.65, lng: -1.45, count: 8 },
            { lat: 53.45, lng: -1.35, count: 7 },
            { lat: 54.35, lng: -1.25, count: 6 },
            { lat: 5.25, lng: -1.15, count: 5 }
          ]
        }

第六步：叠加图层

1
2
3
4
5
6
7
8
9
10
this.heatmapLayer = new HeatmapOverlay(cfg)
        // 图层
        let baseLayer = L.tileLayer(
          'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: 'Haut-Gis-Org © OpenStreetMap'
          }
        )
        
        this.heatmapLayer.addTo(map)
        this.heatmapLayer.setData(testData)

效果图

参考代码

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<template>

  <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
</template>

<script>
  import HeatmapOverlay from 'heatmap.js/plugins/leaflet-heatmap'
  import L from 'leaflet'

  export default {
    name: 'gis-population-density',
    data () {
      return {
        heatmapLayer: null,
        map: null
      }
    },
    mounted () {
      // 引用heatmap.js
      // let script = document.createElement('script')
      // script.type = 'text/javascript'
      // script.src =
      // 'http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js'
      // document.body.appendChild(script)
      this.initmap()
    },
    methods: {
      initmap: function () {
        // this.map = L.map('map', {
        //   center: [39.9788, 116.30226],
        //   zoom: 14
        // })
        //
        // L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        //   attribution: 'Haut-Gis-Org © OpenStreetMap'
        // }).addTo(this.map)

        // 数据
        var testData = {
          max: 8,
          data: [{ lat: 24.6408, lng: 46.7728, count: 3 },
            { lat: 50.75, lng: -1.55, count: 1 },
            { lat: 51.55, lng: -1.55, count: 9 },
            { lat: 52.65, lng: -1.45, count: 8 },
            { lat: 53.45, lng: -1.35, count: 7 },
            { lat: 54.35, lng: -1.25, count: 6 },
            { lat: 5.25, lng: -1.15, count: 5 }
          ]
        }
        // 配置
        var cfg = {
          'radius': 2,
          'maxOpacity': 0.8,
          'scaleRadius': true,
          'useLocalExtrema': true,
          latField: 'lat',
          lngField: 'lng',
          valueField: 'count'
        }
        this.heatmapLayer = new HeatmapOverlay(cfg)
        // 图层
        let baseLayer = L.tileLayer(
          'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: 'Haut-Gis-Org © OpenStreetMap'
          }
        )
        this.map = L.map('map', {
          center: [25.6586, -80.3568],
          zoom: 4
        })
        baseLayer.addTo(this.map)
        this.heatmapLayer.addTo(this.map)
        this.heatmapLayer.setData(testData)

        L.control.scale({ maxWidth: 200, metric: true, imperial: false }).addTo(this.map)

        let baseLayers = {
          'heatmapLayer': this.heatmapLayer,
          'OpenStreetMap': baseLayer
        }
        // let overlays = {
        //   'Marker': null,
        //   'Roads': null
        // }
        L.control.layers(baseLayers).addTo(this.map)
      }
    }
  }
</script>

<style scoped>
  @import "https://unpkg.com/leaflet@1.0.3/dist/leaflet.css";
</style>

常用插件

1
2
npm安装指令
npm i leaflet.chinatmsproviders
1
2
npm安装指令
npm install leaflet.markercluster
1
2
npm安装指令
npm install heatmap.js

参考文档

技术笔记 > 通用技术
Vue项目使用leaflet+heatmap.js加载热力图
https://www.frytea.com/post/20190309082900.html
作者
Tianlun Song
发布于
2019年3月9日
更新于
2024年6月10日
许可协议