版本: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
- 起初,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图。
遗留问题:
- 2d地图使用图片平铺纹理图时,纹理图会很模糊。
- 3d地图只能通过symbol的方式去给打点设置好看的效果图,比如2d地图的涟漪点(type: ‘effectScatter’)该怎么在3d地图上实现?