vue版本Binning on Map

今天给大家分享一个比较冷门的echarts图表：Binning on Map，它是echarts结合百度地图开发的一个地理坐标图，平时用的不多，所以坑比较多。

 

在echarts官方示例中有源码，这里废话不多说，直接上步骤。

第一步：注册百度地图开发者，创建应用获取AK，百度地图官网地址：https://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5

第二步：应用类型选择浏览器端

 

提交成功后，应用创建完成，复制浏览器端AK到项目中。

第三步：在vue项目目录的public里面的html中，引入百度地图，把拿到的AK粘贴到下图圈红位置

第四步：在vue文件中引入echarts和百度地图

import echarts from "echarts";

import "echarts/extension/bmap/bmap";

关键步骤：通过标签引入百度地图js，这里不引入会报错。

<script src="https://api.map.baidu.com/api?v=3.0&ak=自己的AK"></script>

中间省略一万字...，此时地图完美呈现。

 

拿到后端数据展示在地图上，下面讲细节。

配置项的stroke是单元格的边框，如果不想要边框就注释这一行，显示如上图。

pieces是配置图例的，图例配置项地址：Documentation - Apache ECharts

 

 在renderItem函数中可以改变网格区域大小，如下图所示。

opacity：透明度，值为1时与上面配置的图例颜色一致，越小色差越大，根据项目所需合理配置。

 

bmap:地图配置项，配置maOptionns可以关闭鼠标在地图上的单击事件，如下图。

 

关于数据格式：此图表的数据格式是一个阵列式二维数组，是将后台返回的三维数据，以平铺(二维)的方式展示在地图上，

三维数据：[119.53,40.1,66]， 表示经纬度和对应的值

阵列数组：如下所示，

[[0, 0, 5], [1, 0, 5], [2, 0, 5],[0, 1, 5], [1, 1, 5], [2, 1, 5],[0, 2, 5], [1, 2, 5], [2, 2, 5]]，

此时展示为一个3X3的图形，

可通过以下方法处理成阵列数组

ok,午饭时间到，关于vue版本Binning on Map分享到此结束，如有不清楚的地方可提问，欢迎各位大佬指教。