概述
最近做数字工程实践涉及到大量的地图操作，刚开始跳过依赖于 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/[email protected]/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/[email protected]/dist/leaflet.css";
</style>常用插件
- leaflet.ChineseTmsProviders-加载各种国内地图
npm安装指令
npm i leaflet.chinatmsprovidersnpm安装指令
npm install leaflet.markerclusternpm安装指令
npm install heatmap.js
1 条评论
请问有办法将vue2leaflet组件和vue中的heatmap.js结合起来吗？
项目中用vue2leaf操作地图很方便，有热力图的点数据，但是不知道怎么结合，因为没办法使用L.addTo(map)
谢谢博主啦