Cesium结合Echarts的使用

使用Cesium的时候，都会使用echarts来在界面上绘制图表。展示各种信息，但是呢，我想着echarts这么好看的东西，其他项目上那种在3d地球上绘制的是怎么做到的。于是我去github以及各种资源网站上搜罗了一遍，自己测试了一遍。然后找到了真正有效果的代码，本地运行效果图如下：（纯js和jquery，没有使用npm，没有用到import和require这些东西)

这是万佛朝宗类型。

这是常见的飞机航线。

 这是常见的散点图。

我电脑访问echarts官网的时候，打不开3d地球的示例，所以也不知道echarts是怎么使用3d坐标系得，只能从其他地方去理解。

echarts的绘制需要一个div来显示它，而cesium的地球也是在一个div里面绘制的。大致实现逻辑是：

1.改造echarts，因为所有的echarts结合cesium的博客、git里面，都包含了一段很奇怪的字符串。"GLMap"，以及各种基于echarts的注册方法。

看了一些博客博文的解释，是说改造的echarts坐标参考系。

2.像正常echarts一样，传入option参数。

遇到的问题和报错：

在尝试网上的很多方法的时候，都遇到了一个报错。即使我使用了GLMap和echarts的各种注册方法。cesium却给了我一个渲染报错，说“f.silce() not a function”是从echarts.min.js出来的。于是我更换了整个echarts.min.js文件，而后渲染成功了！

我根目录下，cesium文件和echarts文件的位置是这样的：

统一放在了js文件夹里面。echarts.min copy.js是我原先的文件，可以忽略。

而后在index.html文件里面，像常规一样使用

 主要的代码： 

为echarts注册些东西:

    //结合echarts
    (function(e) {
        const t = {};
        function n(r) {
            if (t[r]) return t[r].exports;
            const i = t[r] = {
                i: r,
                l: !1,
                exports: {}
            };
            return e[r].call(i.exports, i, i.exports, n),
                i.l = !0,
                i.exports
        }
        n.m = e,
            n.c = t,
            n.d = function(e, t, r) {
                n.o(e, t) || Object.defineProperty(e, t, {
                    enumerable: !0,
                    get: r
                })
            },
            n.r = function(e) {
                "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
                    value: "Module"
                }),
                    Object.defineProperty(e, "__esModule", {
                        value: !0
                    })
            },
            n.t = function(e, t) {
                if (1 & t && (e = n(e)), 8 & t) return e;
                if (4 & t && "object" == typeof e && e && e.__esModule) return e;
                const r = Object.create(null);
                if (n.r(r), Object.defineProperty(r, "default", {
                    enumerable: !0,
                    value: e
                }), 2 & t && "string" != typeof e) for (let i in e) n.d(r, i,
                    function(t) {
                        return e[t]
                    }.bind(null, i));
                return r
            },
            n.n = function(e) {
                let t = e && e.__esModule ?
                    function() {
                        return e.
                            default
                    }:
                    function() {
                        return e
                    };
                return n.d(t, "a", t),
                    t
            },
            n.o = function(e, t) {
                return Object.prototype.hasOwnProperty.call(e, t)
            },
            n.p = "",
            n(n.s = 0)
    })([function(e, t, n){e.exports = n(1)},function(e, t, n) {
        echarts ? n(2).load() : console.error("missing echarts lib")
    },function(e, t, n) {
        "use strict";
        function r(e, t) {
            for (let n = 0; n < t.length; n++) {
                let r = t[n];
                r.enumerable = r.enumerable || !1,
                    r.configurable = !0,
                "value" in r && (r.writable = !0),
                    Object.defineProperty(e, r.key, r)
            }
        }
        n.r(t);
        let i = function() {
            function e(t, n) { !
                function(e, t) {
                    if (! (e instanceof t)) throw new TypeError("Cannot call a class as a function")
                } (this, e),
                this._viewer = t,
                this.dimensions = ["lng", "lat"],
                this._mapOffset = [0, 0],
                this._api = n
            }
            let t, n, i;
            return t = e,
                i = [{
                    key: "create",
                    value: function(t, n) {
                        let r;
                        t.eachComponent("GLMap",
                            function(t) { (r = new e(echarts.cesiumViewer, n)).setMapOffset(t.__mapOffset || [0, 0]),
                                t.coordinateSystem = r
                            }),
                            t.eachSeries(function(e) {
                                "GLMap" === e.get("coordinateSystem") && (e.coordinateSystem = r)
                            })
                    }
                },
                    {
                        key: "dimensions",
                        get: function() {
                            return ["lng", "lat"]
                        }
                    }],
            (n = [{
                key: "setMapOffset",
                value: function(e) {
                    return this._mapOffset = e,
                        this
                }
            },
                {
                    key: "getViewer",
                    value: function() {
                        return this._viewer
                    }
                },
                {
                    key: "dataToPoint",
                    value: function(e) {
                        let t = this._viewer.scene,
                            n = [0, 0],
                            r = Cesium.Cartesian3.fromDegrees(e[0], e[1]);
                        if (!r) return n;
                        if (t.mode === Cesium.SceneMode.SCENE3D && Cesium.Cartesian3.angleBetween(t.camera.position, r) > Cesium.Math.toRadians(80)) return ! 1;
                        let i = t.cartesianToCanvasCoordinates(r);
                        return i ? [i.x - this._mapOffset[0], i.y - this._mapOffset[1]] : n
                    }
                },
                {
                    key: "pointToData",
                    value: function(e) {
                        let t = this._mapOffset,
                            n = viewer.scene.globe.ellipsoid,
                            r = new Cesium.cartesian3(e[1] + t, e[2] + t[2], 0),
                            i = n.cartesianToCartographic(r);
                        return [i.lng, i.lat]
                    }
                },
                {
                    key: "getViewRect",
                    value: function() {
                        let e = this._api;
                        return new echarts.graphic.BoundingRect(0, 0, e.getWidth(), e.getHeight())
                    }
                },
                {
                    key: "getRoamTransform",
                    value: function() {
                        return echarts.matrix.create()
                    }
                }]) && r(t.prototype, n),
            i && r(t, i),
                e
        } ();
        echarts.extendComponentModel({
            type: "GLMap",
            getViewer: function() {
                return echarts.cesiumViewer
            },
            defaultOption: {
                roam: !1
            }
        }),
            echarts.extendComponentView({
                type: "GLMap",
                init: function(e, t) {
                    this.api = t,
                        echarts.cesiumViewer.scene.postRender.addEventListener(this.moveHandler, this)
                },
                moveHandler: function(e, t) {
                    this.api.dispatchAction({
                        type: "GLMapRoam"
                    })
                },
                render: function(e, t, n) {},
                dispose: function(e) {
                    echarts.cesiumViewer.scene.postRender.removeEventListener(this.moveHandler, this)
                }
            });
        function a() {
            echarts.registerCoordinateSystem("GLMap", i),
                echarts.registerAction({
                        type: "GLMapRoam",
                        event: "GLMapRoam",
                        update: "updateLayout"
                    },
                    function(e, t) {})
        }
        n.d(t, "load",
            function() {
                return a
            })
    }])

然后就是调用的方法了：

    //开始
    echarts.cesiumViewer = this.viewer
    function hrcEcharts(t, e) {
        this._mapContainer = t;
        this._overlay = this._createChartOverlay()
        this._overlay.setOption(e)
    }
    hrcEcharts.prototype._createChartOverlay = function() {
        const t = this._mapContainer.scene;
        t.canvas.setAttribute('tabIndex', 0);
        const e = document.createElement('div');
        e.style.position = 'absolute';
        e.style.top = '0px';
        e.style.left = '0px';
        e.style.width = t.canvas.width + 'px';
        e.style.height