Vue使用高德地图api实现热力图动态缩放

前言

项目需要&＃xff0c;根据积水数据的多少&＃xff0c;在页面中进行展示&＃xff0c;选用高德热力图api。实现后发现地图的缩放会导致热力图自动更改渲染的颜色&＃xff0c;导致预期的效果发生变化&＃xff0c;研究文档后实现了动态调整热力图的渲染&＃xff0c;保证在不同缩放等级的地图下都能展示预期效果

使用vue ui命令构建项目&＃xff0c;vue版本为2.x&＃xff0c;使用axios读取本地积水数据&＃xff0c;
axios安装命令为npm install axios --save
完整代码先看最后

1.引入高德js

在public目录下的index.html页面中引用脚本和css样式

<script src&＃61;"https://webapi.amap.com/maps?v&＃61;1.4.15&key&＃61;你申请的key值">script>
<link rel&＃61;"stylesheet" href&＃61;"https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />


2.显示基本的热力图

显示底图&＃xff1a;

loadMap() {this.map &＃61; new AMap.Map("container", {resizeEnable: true,center: [108.909759, 34.412745],zoom: 12,});
}


这里有个小地方需要注意&＃xff0c;如果不指定宽高&＃xff0c;那么地图无法显示
我的做法是先指定父级节点的宽高&＃xff0c;再指定本页面的宽高
父级节点在App.vue中

添加热力图&＃xff1a;

createHeatMap2() {
let _this &＃61; this; //保存vue实例,保证this作用域一致
let api &＃61; "/js/result_half.json";
axios.get(api).then((res) &＃61;> {let data &＃61; res.data;console.log(tempdata);_this.map.plugin(["AMap.Heatmap"], function () {//初始化heatmap对象_this.heatmap &＃61; new AMap.Heatmap(_this.map, {radius: 0.9, //每个热力点的大小opacity: [0.2, 0.8], //最小透明度和最大透明度&＃xff0c;最小透明度越小&＃xff0c;数值小的点就越不明显&＃xff1b;最大透明度越大&＃xff0c;数值大的点就越明显blur: 0.5, //一个点外圈和内圈的大小比例&＃xff0c;值越大&＃xff0c;内圈占的比例就越大&＃xff1b;值越小&＃xff0c;外圈占的比例就越大gradient: {//同 min参数以及 max参数一起生效&＃xff0c;比如积水数值在[0.02,0.4]之间时&＃xff0c;//gradient定义了某一个积水数值在这个区间的不同位置时显示什么颜色&＃xff0c;如果计算出来不相等&＃xff0c;就取两者之间的颜色0.25: _this.level1,0.5: _this.level2,0.75: _this.level3,0.8: _this.level4,1: _this.level5,},});//设置数据集_this.heatmap.setDataSet({data: data,max: 0.5,min: 0.1,});});
});
},


其中&＃xff0c;result_half.json文件存在于本地&＃xff0c;为了符合高德api&＃xff0c;格式需要如下

[{"lng":xxx,"lat":xxx,"count":xxx},{"lng":xxx,"lat":xxx,"count":xxx},
]


效果&＃xff1a;
此处存在问题&＃xff0c;上图的地图缩放等级为12&＃xff0c;当放大后原本应该为红色区域&＃xff08;积水数值较大&＃xff09;的地方效果会淡化&＃xff0c;如下&＃xff1a;

这里是由于heatmap.js本身的计算导致&＃xff0c;因此需要一个方法来解决

3.显示优化

热力图的radius属性可以指定热力点的半径大小&＃xff0c;根据高德api文档&＃xff0c;只需要绑定一个地图缩放事件&＃xff0c;当地图放大缩小时&＃xff0c;调整热力点的大小&＃xff0c;保证显示效果的一致

addHeatMapEvent() {let _this&＃61;this;_this.map.on("zoomchange", function (e) {let newRadius;let zoomLevel &＃61; _this.map.getZoom();if (zoomLevel <&＃61; 12) {newRadius &＃61; 0.9;} else if (zoomLevel &＃61;&＃61; 13) {newRadius &＃61; 1;} else if (zoomLevel &＃61;&＃61; 14) {newRadius &＃61; 2;} else if (zoomLevel &＃61;&＃61; 15) {newRadius &＃61; 3.5;} else if (zoomLevel &＃61;&＃61; 16) {newRadius &＃61; 7;} else {newRadius &＃61; 15;}_this.heatmap.setOptions({radius: newRadius,});});
},


由于高德的地图缩放等级并不多&＃xff0c;这里一般用到的是12-17级&＃xff0c;所以可以直接写死&＃xff0c;热力点具体的半径大小需要根据显示效果慢慢调整&＃xff0c;地图放得越大&＃xff0c;半径就调整得越大。加入该方法后&＃xff0c;显示效果如下&＃xff1a;

问题解决

4.Vue页面完整代码

<template><div id&＃61;"container"></div>
</template><script>
export default {mounted() {this.loadMap();this.createHeatMap2();this.addHeatMapEvent();},data() {return {map: null,heatmap: null,level1: "#BFEFFF",level2: "#00BFFF",level3: "yellow",level4: "#FFA500",level5: "red",};},methods: {//加载地图loadMap() {this.map &＃61; new AMap.Map("container", {resizeEnable: true,center: [108.909759, 34.412745],zoom: 12,});},//添加热力图createHeatMap2() {let _this &＃61; this; //保存vue实例,保证this作用域一致let api &＃61; "/js/result_half.json";axios.get(api).then((res) &＃61;> {let data &＃61; res.data;// console.log(tempdata);_this.map.plugin(["AMap.Heatmap"], function () {//初始化heatmap对象_this.heatmap &＃61; new AMap.Heatmap(_this.map, {radius: 0.9, //每个热力点的大小opacity: [0.2, 0.8], //最小透明度和最大透明度&＃xff0c;最小透明度越小&＃xff0c;数值小的点就越不明显&＃xff1b;最大透明度越大&＃xff0c;数值大的点就越明显blur: 0.5, //一个点外圈和内圈的大小比例&＃xff0c;值越大&＃xff0c;内圈占的比例就越大&＃xff1b;值越小&＃xff0c;外圈占的比例就越大gradient: {//同 min参数以及 max参数一起生效&＃xff0c;比如积水数值在[0.02,0.4]之间时&＃xff0c;//gradient定义了某一个积水数值在这个区间的不同位置时显示什么颜色&＃xff0c;如果计算出来不相等&＃xff0c;就取两者之间的颜色0.25: _this.level1,0.5: _this.level2,0.75: _this.level3,0.8: _this.level4,1: _this.level5,},});//设置数据集_this.heatmap.setDataSet({data: data,max: 0.5,min: 0.1,});});});},//根据缩放等级调整热力点大小addHeatMapEvent() {let _this&＃61;this;_this.map.on("zoomchange", function (e) {// var oldRadius &＃61; heatmap.getOptions()[&＃39;radius&＃39;];let newRadius;let zoomLevel &＃61; _this.map.getZoom();if (zoomLevel <&＃61; 12) {newRadius &＃61; 0.9;} else if (zoomLevel &＃61;&＃61; 13) {newRadius &＃61; 1;} else if (zoomLevel &＃61;&＃61; 14) {newRadius &＃61; 2;} else if (zoomLevel &＃61;&＃61; 15) {newRadius &＃61; 3.5;} else if (zoomLevel &＃61;&＃61; 16) {newRadius &＃61; 7;} else {newRadius &＃61; 15;}_this.heatmap.setOptions({radius: newRadius,});});},},
};
</script><style scoped>
html,
body,
#container {margin: 0;padding: 0;height: 100%;width: 100%;
}
</style>


参考&＃xff1a;

• 高德热力图示例
• 高德热力图插件文档
• vue使用高德热力图
• 高德api map类