使用高德API制作热力图(Vue)

一、前置条件

需先申请高德地图key，https://lbs.amap.com/

二、引入高德api
<script src="//webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script src="//a.amap.com/jsapi_demos/static/resource/heatmapData.js"></script>

三、了解热力图数据结构

data: [{lng: 116.405285, lat: 39.904989, count: 65},{}, …]

字段含义：
lng 经度，lat 纬度，count 出现次数

在实际应用中，可以GeoHash对经纬度坐标进行编码，减小数据包大小

四、了解热力图参数和方法
1.setDataSet(dataset:Object)
用于设置热力图展现的数据集，dataset数据集格式为：
{
　　max: Number 权重的最大值,
　　data: Array 坐标数据集
}

2.show()
显示热力图

3.hide()
隐藏热力图

4.radius
热力图中单个点的半径，默认：30，单位：pixel；半径范围内所有的点都会算作此点的数目，比如30px范围内有两个点，一个点的count是12，另一个是18，渲染是会将两个点算成一个点，其count值为30

5.max
代表热点图区分热度的界限，当某点count数超过max一定比例，即显示对应gradient配置的颜色,点的count值决定了它在grident中的颜色

6.gradient
热力图的渐变区间，热力图按照设置的颜色及间隔显示热力图；若不设置，就会使用heatmap.js标准配色方案
heatmap.js标准配色方案：
{
　　0.5: "blue",
　　0.65: "rgb(117,211,248)",
　　0.7: "rgb(0, 255, 0)",
　　0.9: "#ffea00",
　　1: "red"
}

五、实现页面：

1.初始化地图时，获取用户位置，展示用户当前城市热力图
2.切换城市时，获取该城市热力图数据
3.控制热力图的显示与隐藏
4.当某个城市无热力图数据时，隐藏按钮；反之，则显示按钮
5.max得合理取值，太小会几乎一片红色，太大几乎看不到热力图颜色，在此项目中max取城市中所有点count平均值

  1 <template>
  2   <div class="map-wrap">
  3     <div id="container-city"></div>
  4     <div class="input-city">
  5       <Select
  6         v-model="modelCity"
  7         allow-create
  8         @on-change="getHeatData($event)"
  9         placeholder="请选择城市"
 10         :label-in-value="true"
 11       >
 12         <!-- 选中的Option变化时触发，默认返回 value，可以设置 :label-in-value="true" 返回 label -->
 13         <Option v-for="item in cityList" :value="item.cityNo" :key="item.cityNo">{{ item.cityName }}</Option>
 14       </Select>
 15     </div>
 16     <div class="input-card">
 17       <button @click="heatmapIfShow" v-if="heatmapShow" :class="isHeatClose">
 18         <span class="check-mark">√</span>
 19         <img src="@/assets/heatmap.png" width="60px" height="50px" />
 20       </button>
 21     </div>
 22   </div>
 23 </template>
 24 
 25 <script>
 26 import heatList from "../../public/heatmap.json";
 27 import citylist from "../../public/cityList.json";
 28 export default {
 29   name: "stationMap",
 30   data() {
 31     return {
 32       amap: {},
 33       heatmap: {},
 34       heatmapShow: false,
 35       isHeatClose: "",
 36       cityList: [],
 37       modelCity: ""
 38     };
 39   },
 40   mounted() {
 41     let _this = this;
 42     this.getCity(); // 获取城市下拉框数据
 43     this.amap = new AMap.Map("container-city", {
 44       zoom: 11,
 45       zooms: [3, 20],
 46       expandZoomRange: true //当expandZoomRange为true时，zooms的最大级别在PC上可以扩大到20级
 47     });
 48     // 获取当前城市
 49     AMap.plugin(\'AMap.CitySearch\', function () {
 50       var citySearch = new AMap.CitySearch()
 51       citySearch.getLocalCity(function (status, result) {
 52         if (status === \'complete\' && result.info === \'OK\') {
 53           _this.amap.setCity(result.city);
 54           _this.modelCity = _this.getCityNo(result.city);
 55           _this.getHeatData({value: _this.modelCity,label: result.city})
 56         }
 57       })
 58     })
 59     // 热力图插件
 60     AMap.plugin(["AMap.Heatmap"], () => {
 61       //初始化heatmap对象
 62       this.heatmap = new AMap.Heatmap(this.amap, {
 63         radius: 25, //给定半径
 64         opacity: [0, 0.8]
 65       });
 66     });
 67   },
 68   methods: {
 69     // 热力图的显示与隐藏
 70     heatmapIfShow() {
 71       if (this.isHeatClose == "") {
 72         this.isHeatClose = "closem";
 73         this.heatmap.hide();
 74       } else {
 75         this.isHeatClose = "";
 76         this.heatmap.show();
 77       }
 78     },
 79     getCity() {
 80       // 实际项目中，需要通过http请求获取数据
 81       this.cityList = citylist.cityList || {};
 82     },
 83     getHeatData(event) {
 84       let cityName = event.label;
 85       let cityNo = event.value;
 86       this.amap.setCity(cityName);
 87       // 获取所查询城市的热力图数据，实际项目中，需要通过http请求获取数据
 88       let cityHeatList = heatList[cityNo] || [];
 89       //当某个城市热力图数据为空时
 90       if (cityHeatList.length === 0) {
 91         this.heatmapShow = false;
 92         this.heatmap.setDataSet({
 93           data: []
 94         });
 95         return;
 96       }
 97       let sum = cityHeatList.reduce((prev, curr) => {
 98         if (typeof prev == "object") {
 99           return prev.count + curr.count;
100         }
101         return prev + curr.count;
102       });
103       let max = sum / cityHeatList.length; //平均值
104       this.heatmap.setDataSet({
105         data: cityHeatList,
106         max: max // 代表热点图区分热度的界限，当某点count数超过max一定比例，即显示对应gradient配置的颜色,点的count值决定了它在grident中的颜色。
107       });
108       this.heatmapShow = true;
109       this.isHeatClose = "";
110       this.heatmap.show();
111     },
112     //通过城市名获取城市编号
113     getCityNo(cityName){
114       return this.cityList.find(vaule => (cityName == vaule.cityName)).cityNo || \'\'; 
115     }
116   }
117 };
118 </script>

秒客网

使用高德API制作热力图(Vue)

相关文章