echarts：实现3D地图版块叠加动效散点+轮播高亮效果

需求描述

如下图所示，展示3D效果的地图版块，并叠加显示动效散点：

实现思路

首先是3D地图版块效果的实现，可以参考；而动效散点的实现，可以参考。 这里再提一个经过尝试并不行的思路：叠加用动图作为图标的散点图层，经过尝试，2D/3D地图的散点图层都无法加载动图图标 看起来只要在第一个示例的图层上叠加第二个示例的图层就可以啦！一般来讲，添加图层只要在图表配置项的series列表中增加一项即可，然鹅…

动效散点使用的是2D地理坐标系，只要引入echarts库即可使用，官网配置项文档：；而3D地图版块使用的是3D地理坐标系，在引入echarts库的基础上，还需要额外引用echarts-gl库，官网配置项文档：，而geo3D的series并不支持动效散点图层（effectScatter）。

Emm…其实也没有那么复杂，在配置项中既创建3D地理坐标系（用于显示3D地图版块），又创建2D地理坐标系（用于显示动效散点），并通过调整让它们尽量重叠就可以啦！（虽然说这种实现方式只能符合“静态美”，不能拖拽缩放地图…）

参考代码

在线运行调试

3D地图版块叠加动效散点plus

想要在原先图表的基础上增加这样几个需求：1、轮播高亮展示3D地图区域；2、高亮区域的散点颜色、动效、标签样式需要与非高亮区域不同。

分析

① 3D地图区域高亮：参考，发现API目前并不支持触发geo3D组件的高亮，但根据，可以通过在geo3D.regions中设置特定区域样式来实现“高亮”的效果。 ② 散点颜色、动效高亮：一个动效散点图层（series中的一个对象）只能支持一种动效，所以需要两个使用不同动效的散点图层，一个图层只显示非高亮的散点，另一个图层只显示高亮的散点；此外动效散点只能是一种颜色，在emphasis中设置高亮颜色，高亮效果只是在动效散点上叠加一个高亮颜色的圆点。 ③ 散点标签样式高亮：终于可以使用名副其实的“高亮”啦！通过设置label.normal和label.emphasis控制非高亮和高亮的标签样式，并触发相应点的高亮事件即可~

参考代码

3D地图版块叠加动效散点plus

由于这个示例相比没有动效的版本改动不少，所以另外新增了一个图表示例： （原本还想增加轮播同时支持鼠标交互的功能，改完再说吧~）

地图json数据下载

可以参考这篇博客：

比官网更丰富的echarts示例！

参考网址

[1] [2] [3]