react项目结合echarts,百度地图实现热力图

一.最近在一个react项目(antd pro)中需要展示一个热力地图。需求是:

1.热力地图可缩放;

2.鼠标点击可以展示该点地理坐标,及热力值。

3.初始化时候自适应展示所有的热力点。

4.展示热力标尺。

二.在实现的过程中出现了不少的问题.

引入地图出现问题
1.缩放地图的时候中心点会漂移。
   解决方案:
      a.把地图放到页面的顶部。
      b.每次缩放后获取地图中心点,再次设置中心点。关键代码如下:

     let cp;
     bmap.addEventListener("mousemove",function(){ // 加载完成时,触发
       cp = bmap.getCenter();
     });
     bmap.addEventListener("mouseend",function(){ // 加载完成时,触发
       cp = bmap.getCenter();
     });
     bmap.addEventListener("tilesloaded",function(){ // 加载完成时,触发
       bmap.setCenter(cp);
     });

2.热力图标尺不展示。
   解决方案:
       a.将百度地图引入echanrts图表中,通过配置项加热力标尺。(visualMap属性)

       b.手写标尺放入百度地图页面。(可以自己尝试弄,这里我不介绍)

3.热力地图的点不能点击。 

   解决方案:创建标注(这个标注可能有点丑,如果不想要,可以用透明的图片替代)

   这有篇博客写的很详细,https://blog.csdn.net/zjuwwj/article/details/53374947#commentsedit

 // 创建一个标注
     var point = new BMap.Point(data[0][0], data[0][1]);
     var marker = new BMap.Marker(point);  // 创建标注
     bmap.addOverlay(marker);

4.百度地图默认不会展示目标点的地理坐标(本来引入echarts,想着直接用tooltip属性,结果不生效,查找原因发现热力点是个映射关系,不是实实在在的坐标点,获取不到坐标信息)。
    解决方案: 获取目标点地理坐标,手动加入悬浮层。

5.初始化时候需要自适应展示所有的热力点(打开地图的时候有默认的比例尺,或者自己设定的固定的比例尺。)

   解决方案:计算所有热力点中最远的两个的距离,我是设定数据的第一个点为中心点,计算此点与其他所有点的距离,找出最大值,然后对比百度地图等级设定。

百度地图对应的等级可参考:http://api.map.baidu.com/lbsapi/getpoint/index.html

综合实现这些东西,可费了不少劲呢。

三.先来看看热力地图代码:heatMap.js

这是在react项目里使用了echarts和百度地图。

// heatMap.js

import React, { Component } from 'react'; import echarts from 'echarts/lib/echarts'; // 引入热力图 import 'echarts/lib/chart/heatmap'; // 引入提示框和标题组件 import 'echarts/lib/component/tooltip'; import 'echarts/lib/component/title'; import 'echarts/extension/bmap/bmap'; import 'echarts/lib/component/visualMap'; class EchartsTest extends Component { constructor(props) { super(props); this.state = { data: props.data, }; } componentDidMount() { this.getCharts(); } // 保证再次请求数据时候,地图重新加载 // eslint-disable-next-line no-unused-vars componentWillReceiveProps(nextProps, nextContext) { this.setState({ data: nextProps.data, }); setTimeout(() => { if(!nextProps.data.length===0){ this.getCharts(); } }, 500); } getCharts = () => { const { data } = this.state;
// 这里data格式:[[120.122,35.666,67],[120.12323,23.45555,23]] ,里面是经度,维度,热力值 const maxdata
= data .map(item => item[2]) .sort() .reverse()[0]; const myChart = echarts.init(document.getElementById('main')); const option = { animation: false, // tooltip: { // 悬浮层提示框在热力图上无效 // trigger: 'item', // triggerOn: 'click', // }, bmap: { center: [data[0][0], data[0][1]], zoom: this.getMapGrade(data), roam: true, }, visualMap: { show: true, // top: 'top', bottom: 50, left: 0, min: 0, max: maxdata, seriesIndex: 0, calculable: true, inRange: { color: ['blue', 'green', 'yellow', 'red'], }, }, series: [ { name: 'gid热力值', type: 'heatmap', coordinateSystem: 'bmap', data, pointSize: 8, blurSize: 8, }, ], }; myChart.setOption(option); // 添加百度地图插件 const bmap = myChart .getModel() .getComponent('bmap') .getBMap(); // 解决地图放大地图中心点漂移的问题。当地图不在页面顶部使用 // let cp; // bmap.addEventListener("mousemove",function(){ // 加载完成时,触发 // cp = bmap.getCenter(); // }); // bmap.addEventListener("mouseend",function(){ // 加载完成时,触发 // cp = bmap.getCenter(); // }); // bmap.addEventListener("tilesloaded",function(){ // 加载完成时,触发 // bmap.setCenter(cp); // }); // eslint-disable-next-line no-undef bmap.addControl(new BMap.NavigationControl()); // 地图平移缩放控件 // eslint-disable-next-line no-undef bmap.addControl(new BMap.ScaleControl()); // 地图比例尺控件 // 创建一个标注 // var point = new BMap.Point(data[0][0], data[0][1]); // var marker = new BMap.Marker(point); // 创建标注 // bmap.addOverlay(marker); // eslint-disable-next-line no-plusplus for (let i = 0; i < data.length; i++) { // eslint-disable-next-line no-undef const hotPoint = new BMap.Point(data[i][0], data[i][1]); // eslint-disable-next-line no-undef const marker = new BMap.Marker(hotPoint); // 创建标注 bmap.addOverlay(marker); // 将标注添加到地图中 // eslint-disable-next-line no-use-before-define // marker.addEventListener("click",getAttr); // function getAttr(){ // var p = marker.getPosition(); // 获取marker的位置 // p.id = "123"; // console.log("点的位置是" + hotPoint.lng + "," + hotPoint.lat); // console.log("marker的位置是" + p.lng + "," + p.lat); // } // eslint-disable-next-line no-undef const infoWindow = new BMap.InfoWindow(` <div style="margin:0;line-height:20px;padding:2px;"> 标题:热点详细信息 <br/>地理位置:${data[i][0]}, ${data[i][1]} <br/>最近三个月热力值:${data[i][2]} </div>`); marker.infoWindow = infoWindow; // 给当前标注新增一个属性以便保存窗口信息infoWindow marker.addEventListener('click', function(e) { this.openInfoWindow(e.target.infoWindow); // 点击标注时,打开改标注对打开改标注对应的回调信息 // 如果使用下面的方式,那样就会导致每次标注点击后,弹出的窗口信息都是最后一次循环的infoWindow。因为在click的时候只会去找infoWindow这个变量值,而你的click肯定是在所有循环的,标注都产生完之后,此时infoWindow变量已经被赋值成了最后一次循环的值。 // this.openInfoWindow(infoWindow); }); } // eslint-disable-next-line no-undef bmap.addControl( // eslint-disable-next-line no-undef new BMap.MapTypeControl({ mapTypes: [ // eslint-disable-next-line no-undef BMAP_NORMAL_MAP, // BMAP_HYBRID_MAP ], }) ); // 去掉上面的{mapTypes:[...]} 就会显示地图,卫星,三维三个图层 }; // 计算经纬度距离(千米),四个参数分别是点A的纬度,经度,点B的纬度,经度(位置不要搞错了,我就弄错了,搞了好久) getDistance =(lat1, lng1, lat2, lng2)=>{ const radLat1 = lat1*Math.PI / 180.0; const radLat2 = lat2*Math.PI / 180.0; const a = radLat1 - radLat2; const b = lng1*Math.PI / 180.0 - lng2*Math.PI / 180.0; // eslint-disable-next-line no-restricted-properties let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) + // eslint-disable-next-line no-restricted-properties Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2))); s *=6378.137 ; s = Math.round(s * 10000) / 10000; return s; }; // 计算地图初始化所有地理坐标中距离最大值 getZoom = (val)=>{ const arr = []; if(val.length===1){ arr.push(1) }else{ for(let i=1;i<val.length;i+=1){ arr.push(this.getDistance(val[0][1],val[0][0],val[i][1],val[i][0])) } } // console.log("所有距离",arr); return Math.max(...arr) }; // 计算比例尺对应的百度地图等级 getMapGrade=(val)=>{ // console.log("数据 ",val); const num=this.getZoom(val); // console.log("最大距离",num); let zoom=0; if(num<=1){ zoom=15 }else if(num>1&&num<=50){ zoom=10 }else if(num>50&&num<=100){ zoom=9 }else if(num>100&&num<=500){ zoom=7 }else if(num>500&&num<=1000){ zoom=6 }else{ zoom=4 } return zoom }; render() { return ( <div id="main" style={{ width: '100%', height: 600 }}></div> ); } } export default EchartsTest;

四.引用

1.在项目的入口html文件中引入:

需要自己申请百度地图的密钥,直接用下面的密钥也可以:

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=Imejyag6D5IPg4lOfu0LiDUWBGh2SNmc"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>

2.在自己页面中引入heatMap.js

import HeatMap from './heatMap';  //引入自己写好的热力地图
const arry=[
[120.1234555,35.234234,56],
[120.3287898,34.876575,10],
];
<HeatMap data={arry} /> //直接在页面引入标签使用 arry的数据格式你可以有自己的格式,不过你的格式改了的话,heatMap.js参数使用也得自己改下。

 

posted @ 2020-09-18 16:13  荷风伊夏  阅读(361)  评论(0编辑  收藏