记录一次可视化大屏开发

版本：echarts5.3.0 - echarts-gl2.0.8
echarts大部分问题都是版本原因，4.x和5.x区别很大，推荐^5.3.0，因为有些api需要这个版本以上才支持。另外5.1支持svg地图数据格式，与之前的一些用法截然不同，同时拓展性也更加高了，svg地图值得研究下，像svg内插入图片、定义事件等。

这里推荐一下echarts社区的案例，便于开发。

https://www.makeapie.cn/echarts_component/geo_27.html

1. 起初，lz做了个2d的中国地图，效果图被淹没了。后因需求改造，改成湖北省的了。看图，
   
   说实话，我自己都看不下去了，好丑。说下遇到的问题吧。

const mapJson = require('@/pages/centerPage/charts/china.json')
echarts.registerMap('HBmapJson', HBmapJson)

首先需要去

https://datav.aliyun.com/portal/school/atlas/area_selector

这个地址下载个地图数据，全国的就下载全国数据，指定省的就下载指定省的数据。然后在文件夹导入，在echarts.init的时候注入地图数据。map: “需要是导入的数据名称”，名称是自定义的。

geo: {
            show: true,
            map: "china",   // 地图数据名称
}

这里介绍下geo和series.type: ‘map’，geo是地图系列的配置总和，就是series下不管有多少个map都是采用的geo的配置，可以理解为map中公用的配置写到geo里边。
另外，介绍下指定数据的地图配置，像在china.json里边找到"name":"北京市"这种，可以看作是这个区域的id值，可以在geo.regions下对这个区域单独配置。
标记一个坑，目前下载的china.json数据里边基本都会包含南海诸岛以及南海的九段线，这部分是代码没办法去除的，需要我们在china.json数据文件中找到这部分的坐标数据，将这部分数据删除掉。

2d地图使用纹理图：

geo.itemStyle.areaColor是支持纹理图展示的。这里展示关键代码：

let mapBG = new Image()
mapBG.src = require('@/assets/images/chineBG5.png')
areaColor: {
      image: mapBG,
      repeat: 'repeat'
}
......
mapBG.onload = () => {
    chart.setOption(option);
}

后续：lz这里推荐将图片转为base64格式进行导入使用，可以避免很多问题。

地图打点(type: ‘scatter’)、热力点(type: ‘heatmap’)、涟漪点(type: ‘effectScatter’)这些就直接看文档吧。这几个稍微困难点的就是事件监听，有问题可以私信。

3D地图

geo3D/type: ‘map3D’
3d地图的纹理贴图可以较为完美的解决2d地图带来的纹理图模糊问题！！！

shading: 'color',
colorMaterial: {
      detailTexture: bgBase64Str,
},

3d地图使用纹理图的时候请一定要使用base64格式，使用图片会出现setOptions时图片失效！
在没有特殊材质的要求下，推荐使用shading: 'color’进行渲染，其它两种性能消耗较大，掌控不好会出现页面卡帧的情况。

效果：

目前3d地图的打点都是打在2d地图上的，然后将3d地图与2d地图对齐，目前没找到更好的方法。
没使用3d的打点是因为客户一定要这个涟漪点，然而设计师没法给我涟漪效果的gif图。

遗留问题：

1. 2d地图使用图片平铺纹理图时，纹理图会很模糊。
2. 3d地图只能通过symbol的方式去给打点设置好看的效果图，比如2d地图的涟漪点(type: ‘effectScatter’)该怎么在3d地图上实现?