echarts 3d地球：纹理贴图＋世界地图细化到中国省级(二) tooltip处理

一、前景提示

如（一）里所说，用图片贴了3d地球的纹理，用canvas搭载世界地图，并通过layers层贴到地球上。

需求在地图上按经纬度打点，并显示对应tooltip。
版本：5.0.2

二、在canvas搭载的2d世界地图上添加scatter（不能满足需求）

2.1 2d地图配置tooltip无效

这种方法scatter能正常显示，但是tooltip配置了以后，死活没出来。

示例(3D地球 - category-work,globe,series-bar3D,series-lines3D,tooltip提示框,visualMap视觉映射 - makeapie echarts社区图表可视化案例)
注意：示例里没配tooltip，要自己配置看一下（BTW是不会生效的）

观察了示例上的点，发现也是如此。折磨我许久后发现：canvas搭载的echarts实例不能显示tooltip。

来源(3d地图tooltip问题 · Issue #9574 · apache/echarts · GitHub)

2.2 自己写tooltip，但scatter获取的坐标无法转换为屏幕坐标

如（一）中的最后一节，用echarts绑定mouseover去观察，会获取到zrX和zrY。这两个值对于一个点来说是固定的，即不管你转动地球至什么角度，他俩不变，导致我的tooltip位置也固定了。

另外我观察到数据很大，估计是在canvas里的坐标。

BTW：可以用这俩去获取经纬度，但是他的值更为精确，或者说scatter的大小影响，无法达到我去匹配我原数据去筛选的要求。

三、在3d地球实例中用scatter3D

这个tooltip确实可以出来，并且通过配置项或自定义都可以。但有几个缺点如下：

3.1 缺点一：symobl无法配置图片

我找了一大圈，发现scatter3D里的symbol不支持图片来源。但可以配置path。

3.2 缺点二：常显label后tooltip失效

发现symbol无法配置图片后，搜到一个老哥常显label，把文字透明，用背景作为图标。效果还可以

来源(echarts 3D地图中的scatter3D使用自定义图片 - 黑松沙土 - 博客园 (cnblogs.com))

一顿操作后发现无法触发tooltip，并且mouseover事件也没触发，遂卒。最后还是找了path替代。

3.3 缺点三：tooltip显示的前提是data数据要大于2

我看示例的时候还不理解，为啥前面写个空对象。 示例(3D地球 - category-work,globe,series-scatter3D,tooltip提示框 - makeapie echarts社区图表可视化案例)

    var data = [
       {},
       {
        name: '中国',
        lng: 111.11,
        lat: 33.33,
       },
    ];

配置啥都正确，tooltip仍然没显示。然后我就看到了这个帖子。

总的来说就是数据需要大于2，可以像上面一样写个空对象，在concat自己的数据

帖子(echarts5.0 - Echarts中tooltip不显示 - SegmentFault 思否)

3.4 mousemove只能触发scatter3D，其余地方无效

不知道是否与我设置了世界地图silent为true的原因

其实跳过前面的坑以后就可以开始配置tooltip了，因为原来用div写了一个，懒得再去调样式，故决定用mousemove触发，mouseout隐藏。 但是发现mousemove只能触发scatter3D，而mouseout又是针对整个实例，移出整个实例后才触发。

后面的解决办法就是用getZr()以后再绑定一个mousemove事件。

chart.getZr().on('mousemove', func)
chart.on('mousemove', func)

前者隐藏，后者触发。问了gpt说getZr更偏底层，所以直接绑定的优先级更高，两个mousemove并没有覆盖。

四、总结

多总结、学会搜索，别死磕。