一、前景提示
如（一）里所说，用图片贴了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社区图表可视化案例](https://link.juejin.cn?target=https%3A%2F%2Fwww.makeapie.cn%2Fecharts_content%2Fxn4xGv0UAd.html "https://www.makeapie.cn/echarts_content/xn4xGv0UAd.html")) **注意：示例里没配tooltip，要自己配置看一下（BTW是不会生效的）** 观察了示例上的点，发现也是如此。折磨我许久后发现：canvas搭载的echarts实例不能显示tooltip。 \[来源\]([3d地图tooltip问题 · Issue #9574 · apache/echarts · GitHub](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fapache%2Fecharts%2Fissues%2F9574 "https://github.com/apache/echarts/issues/9574")) ### 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)](https://link.juejin.cn?target=https%3A%2F%2Fwww.cnblogs.com%2Fheisongshatu%2Fp%2F17076299.html "https://www.cnblogs.com/heisongshatu/p/17076299.html")) 一顿操作后发现无法触发tooltip，并且mouseover事件也没触发，遂卒。最后还是找了path替代。 ### 3.3 缺点三：tooltip显示的前提是data数据要大于2 我看示例的时候还不理解，为啥前面写个空对象。 \[示例\]([3D地球 - category-work,globe,series-scatter3D,tooltip提示框 - makeapie echarts社区图表可视化案例](https://link.juejin.cn?target=https%3A%2F%2Fwww.makeapie.cn%2Fecharts_content%2FxhjTsVBioC.html "https://www.makeapie.cn/echarts_content/xhjTsVBioC.html")) ```js var data = [ {}, { name: '中国', lng: 111.11, lat: 33.33, }, ]; ``` 配置啥都正确，tooltip仍然没显示。然后我就看到了这个帖子。 总的来说就是数据需要大于2，可以像上面一样写个空对象，在concat自己的数据 \[帖子\]([echarts5.0 - Echarts中tooltip不显示 - SegmentFault 思否](https://link.juejin.cn?target=https%3A%2F%2Fsegmentfault.com%2Fq%2F1010000041606243 "https://segmentfault.com/q/1010000041606243")) ### 3.4 mousemove只能触发scatter3D，其余地方无效 不知道是否与我设置了世界地图silent为true的原因 其实跳过前面的坑以后就可以开始配置tooltip了，因为原来用div写了一个，懒得再去调样式，故决定用mousemove触发，mouseout隐藏。 但是发现mousemove只能触发scatter3D，而mouseout又是针对整个实例，移出整个实例后才触发。 后面的解决办法就是用getZr()以后再绑定一个mousemove事件。 ```js chart.getZr().on('mousemove', func) chart.on('mousemove', func) ``` 前者隐藏，后者触发。问了gpt说getZr更偏底层，所以直接绑定的优先级更高，两个mousemove并没有覆盖。 ## 四、总结 多总结、学会搜索，别死磕。