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

一、前景提示

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

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

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

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

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

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

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

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

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

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

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

js 复制代码

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

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

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

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

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

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

js 复制代码

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

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

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