本文详解如何在Vue3项目中集成Leaflet库及leaflet.heat插件，实现高效的热力图展示。通过配置半径、透明度及自定义渐变色等参数优化视觉效果，并提供完整源码与API方法说明，帮助开发者快速落地地图数据可视化功能。
本文介绍了在Web端利用Leaflet开发库展示热力图的方法（底图来源为天地图）。通过结合leaflet.heat插件，可以便捷地生成热力图，并可通过调整配置参数来优化显示效果，从而获得最佳的可视化体验，具体显示效果如下图所示。
开发环境
- Vue开发库版本为3.2.37，Leaflet开发库版本为1.9.3。
- Leaflet主要使用的插件为leaflet.heat。
代码简介
插件简介与安装
Leaflet.heat是一个轻量级、简单且高效的Leaflet热图插件。
官方文档地址：https://github.com/Leaflet/Leaflet.heat
# 插件安装
npm i leaflet.heat
# 引入热力图插件
import 'leaflet.heat'使用简介
let heatDataList = []
// 构造热力图数据
HeatData.features.forEach((v) => {
// 纬度、经度、阈值
let group = [v.properties.lat, v.properties.lon, v.properties.valve]
heatDataList.push(group)
})
// 生成热力图图层，并添加到地图中
let heat = L.heatLayer(heatDataList, {
radius: 12,
minOpacity: 0.2,
gradient: { // 自定义渐变颜色，区间为 0~1 之间(也可以不指定颜色，使用默认颜色)
'0.2': "#00f",
'0.3': "#0ff",
'0.5': "#0f0",
'0.7': "#ff0",
'1': "#f00"
}
}).addTo(map);此外，Leaflet.heat插件还提供了其他几个常用方法：
| 方法 | 说明 |
|---|---|
| setOptions(options) | 设置新的热力图heatmap属性并重新绘制 |
| addLatLng(latlng) | 向热力图heatmap动态添加数据并重新绘制 |
| setLatLngs(latlngs) | 重置热力图heatmap数据并重新绘制 |
| redraw() | 重绘热力图 |
详细源码(Vue3)
<template>
<div class="app-contain">
<!-- leaflet 地图容器 -->
<div id="myMap"></div>
</div>
</template>
<script setup>
// 引入热力图数据点状geojson
import HeatData from '/@/assets/mapData/heatData.json'
// 引入样式
import { onMounted } from 'vue'
import L from 'leaflet';
import 'leaflet/dist/leaflet.css'
// 热力图
import 'leaflet.heat'
// 天地图TK
let tdtKey = 'YOURS_TK'
const initMap = () => {
// 影像地图
const sourceMap = L.tileLayer(`https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}`)
// 天地图注记
const tiandituText = L.tileLayer(`http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tdtKey}`)
const layers = L.layerGroup([sourceMap, tiandituText])
let map = L.map('myMap', { //需绑定地图容器div的id
center: [25.67052, 121.99804], //初始地图中心
zoom: 12, //初始缩放等级
maxZoom: 20,
minZoom: 2,
zoomControl: true, //缩放组件
attributionControl: false, //去掉右下角logol
scrollWheelZoom: true, //默认开启鼠标滚轮缩放
// 限制显示地理范围
maxBounds: L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180)),
layers: [layers] // 图层
})
// 添加比例尺要素显示
L.control.scale({ maxWidth: 200, metric: true, imperial: false }).addTo(map)
/** 热力图 */
let heatDataList = []
HeatData.features.forEach((v) => {
let group = [v.properties.lat, v.properties.lon, v.properties.valve]
heatDataList.push(group)
})
// 生成热力图图层，并添加到地图中
let heat = L.heatLayer(heatDataList, {
radius: 12, minOpacity: 0.2,
/*
gradient: { // 自定义渐变颜色，区间为 0~1 之间
'0.2': "#00f",
'0.3': "#0ff",
'0.5': "#0f0",
'0.7': "#ff0",
'1': "#f00"
}
*/
}).addTo(map);
}
onMounted(() => {
initMap()
})
</script>
<style scoped>
#myMap {
width: 92vw;
height: 92vh;
}
</style>到此这篇关于vue结合leaflet实现热力图的文章就介绍到这了,更多相关vue leaflet热力图内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！