echarts 3d地球

一、基础配置

必须额外引入echarts-gl.min.js
附配置项文档链接

    option = {
        tooltip: {
            trigger: 'item',
        },
        globe: {
            globeRadius: 150, // 球面半径
            environment: '#000',
            shading: 'color',
            light: {
                // 光照阴影
                main: {
                    color: '#fff', // 光照颜色
                    intensity: 1, // 光照强度
                    alpha: 40,
                    beta: -30,
                },
                ambient: {
                    color: '#fff',
                    intensity: 1,
                },
            },
            viewControl: {
                alpha: 30,
                beta: 160,
                autoRotate: true, // 开启自动旋转
                autoRotateAfterStill: 10,
                distance: 240,
            },
        },
        series: [],
    };

按照上述配置就可以初始化一个空白地球

1.1 配置项解释

可以通过viewControl.distance来控制观察距离，主要视觉效果是变大和变小的区别
viewControl.targetCoord控制初始化视角，targetCoord: [116.46, 39.92]北京。alpha和bate会失效

二、纹理贴图

这个的纹理贴图根据官网解释，可以使用globe配置项中的baseTexture属性。

支持图片路径的字符串，图片或者 Canvas 的对象。

总的来说就是自己找张图或者找设计要一张图配置好就行。

三、世界地图贴层

可以使用globe配置项中的layer来实现

地球表面层的配置，你可以使用该配置项加入云层，或者对 baseTexture 进行补充绘制出国家的轮廓等等。

layer分为两种 ‘blend’和‘overlay’。前者可以和baseTexture进行混合、后者则可悬浮。我们要做的世界地图绘制国家轮廓主要是用第一种。 layer层的纹理主要由属性texture实现

texture层的纹理，支持图片路径的字符串、图片对象或者 Canvas 的对象。
也支持直接使用 echarts 的实例作为纹理，此时在地球上的鼠标动作会跟纹理上使用的 echarts 实例有联动。

要进行打点或者点击操作的话，观察大多数示例都是贴的echarts实例。下面是具体配置：通过创建canvas来搭载echarts实例。

echarts.registerMap('world', geoJson);
    let canvas = document.createElement('canvas');
    mapWorld = echarts.init(canvas, null, {
        width: 4096,
        height: 2048,
    });
    mapWorld.setOption({
        geo: {
            type: 'map',
            map: 'world',
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
            boundingCoords: [
                [-180, 90],
                [180, -90],
            ],
            roam: false,
            itemStyle: {
                normal: {
                    areaColor: '#2455ad',
                    borderColor: '#000c2d',
                },
                emphasis: {
                    areaColor: '#357cf8',
                },
            },
            label: {
                normal: {
                    fontSize: 20,
                    show: true,
                    textStyle: {
                        color: '#fff',
                    },
                },
                emphasis: {
                    fontSize: 30,
                    show: true,
                    textStyle: {
                        color: 'yellow',
                    },
                },
            },
        },
    });

3.1 世界地图轮廓和纹理贴图错位（注意）

由于内网开发，cv不方便。没写这一部分，导致世界地图轮廓和纹理贴图错位。

3.2 世界地图中国部分划分到省级

没找着带中国省级的世界地图JSON，观察前人经验，根据手里有世界地图和中国地图，把两个拼在了一起，再重新注册为世界地图。

var world = Object.assign({}, worldjson);
// 整合features
world.features = world.features.concat(china.features);
echarts.regusterMap('world', world);

btw 这样子贴到地球上如果给China设置轮廓，或导致轮廓不完整，但在正常的2d上是可以正常显示的。所以后面处理轮廓时，我直接将轮廓加到了省级上。

3.3 地图上打点获取屏幕坐标而非数据坐标（未解决）

使用convertFromPixel可以将像素坐标转换为数据坐标，3d中可转换为经纬度。
现实情况是，自己用div写了个tooltip，需要屏幕坐标进行定位展示，但获取的offsetX和offsetY大的离谱。

echarts 3d地球 纹理贴图＋世界地图细化到中国省级