Vue项目使用leaflet+heatmap.js加载热力图
Vue项目使用leaflet+heatmap.js加载热力图
宋天伦
发布于 2020-07-16 10:13:36
发布于 2020-07-16 10:13:36
概述
最近做数字工程实践涉及到大量的地图操作，刚开始跳过依赖于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.chinatmsprovidersnpm安装指令
npm install leaflet.markerclusternpm安装指令
npm install heatmap.js参考文档
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读