Vue项目使用leaflet+heatmap.js加载热力图
概述
最近做数字工程实践涉及到大量的地图操作，刚开始跳过依赖于 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 标签下增加如下代码
template>
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
</template>
style 中引入 css
<style scoped>
@import "https://unpkg.com/leaflet@1.0.3/dist/leaflet.css";
</style>
script 文件中引入 L
import L from 'leaflet'
新建地图容器
let map = L.map('map', {
center: [39.9788, 116.30226],
zoom: 14
})
打开 openstreetmap
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'Haut-Gis-Org © OpenStreetMap'
}).addTo(this.map)
heatmap 渲染热力图
第一步：npm 方式引入 headmap.js
npm install heatmap.js
第二步：引入 leaflet 中使用的函数
import HeatmapOverlay from 'heatmap.js/plugins/leaflet-heatmap'
第四步：配置
// 配置
var cfg = {
'radius': 2,
'maxOpacity': 0.8,
'scaleRadius': true,
'useLocalExtrema': true,
latField: 'lat',
lngField: 'lng',
valueField: 'count'
}
第五步：模拟数据
// 数据
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 }
]
}
第六步：叠加图层
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)
效果图
参考代码
<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>
常用插件
- leaflet.ChineseTmsProviders-加载各种国内地图
npm安装指令
npm i leaflet.chinatmsproviders
npm安装指令
npm install leaflet.markercluster
npm安装指令
npm install heatmap.js