//echarts设置部分
var geoCoordMap=[]//从官网复制即可
var XAData = [ [{name:'西安'}, {name:'北京',value:100}], [{name:'西安'}, {name:'上海',value:100}], [{name:'西安'}, {name:'广州',value:100}], [{name:'西安'}, {name:'西宁',value:100}], [{name:'西安'}, {name:'银川',value:100}] ]; //小飞机样式 var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'; //planePath = 'arrow'; //将数据起止点成对组织 function convertData(data) { let res=[] var fromCoord var toCoord data.map(v => { fromCoord = geoCoordMap[v[0].name]; toCoord = geoCoordMap[v[1].name]; if (fromCoord && toCoord) { res.push({ fromName: v[0].name, toName: v[1].name, coords: [fromCoord, toCoord], value: v[1].value }); } }) return res } //航线的颜色数组 var color = ['#a6c84c', '#ffa022', '#46bee9']; var series = []; //item内容,i为索引 [['西安', XAData]].forEach(function (item, i) { series.push( //线和小飞机 { //tooltip的名称 name: item[0] + ' Top3', //无该类type type: 'lines', //无该坐标系 coordinateSystem: 'GLMap', //组件所在的层 zlevel: 2, symbol: ['none', 'arrow'], symbolSize: 10, //飞线的尾迹特效 effect: { show: true, period: 6, trailLength: 0, symbol: planePath, symbolSize: 15 }, //飞线的线条样式 lineStyle: { normal: { color: color[i], width: 1, opacity: 0.6, curveness: 0.2 } }, //配置数据或者单独的样式 //https://www.echartsjs.com/zh/option-gl.html#series-lines3D.data data: convertData(item[1]) }, //终点的散点扩散 { name: item[0] + ' Top3', type: 'effectScatter', coordinateSystem: 'GLMap', zlevel: 2, rippleEffect: { brushType: 'stroke' }, symbolSize: function (val) { return val[2] / 8; }, itemStyle: { normal: { color: color[i], }, emphasis: { areaColor: '#2B91B7' } }, data: item[1].map(function (dataItem) { return { name: dataItem[1].name, value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]) }; }) } ); }); var option = { animation: !1, GLMap: {}, series: series }; //cesium的viewer对象和echarts參數 echartsCombineCesium(viewer,option); viewer.camera.setView({ destination : Cesium.Cartesian3.fromDegrees(117.16, 32.71, 15000000.0) });
//扩展函数
function echartsCombineCesium(viewer,option){ //坐标转换及事件监听 (function(e) { var t = {}; function n(r) { if (t[r]) return t[r].exports; var 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; var r = Object.create(null); if (n.r(r), Object.defineProperty(r, "default", { enumerable: !0, value: e }), 2 & t && "string" != typeof e) for (var i in e) n.d(r, i, function(t) { return e[t] }.bind(null, i)); return r }, n.n = function(e) { var 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) { console.log(e) console.log(t) for (var n = 0; n < t.length; n++) { var 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); var 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 } var t, n, i; return t = e, i = [{ key: "create", value: function(t, n) { var 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) { var 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; var i = t.cartesianToCanvasCoordinates(r); return i ? [i.x - this._mapOffset[0], i.y - this._mapOffset[1]] : n } }, { key: "pointToData", value: function(e) { var 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() { var 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 = viewer; function CE(t, e) { this._mapContainer = t; this._overlay = this._createChartOverlay(); this._overlay.setOption(e) } CE.prototype._createChartOverlay = function() { var t = this._mapContainer.scene; t.canvas.setAttribute('tabIndex', 0); var 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 = t.canvas.height + 'px'; e.style.pointerEvents = 'none'; e.setAttribute('id','cesium-echarts'); e.setAttribute('class', 'echartMap'); this._mapContainer.container.appendChild(e); this._echartsContainer = e; return echarts.init(e) }; CE.prototype.dispose = function() { this._echartsContainer && (this._mapContainer.container.removeChild(this._echartsContainer), (this._echartsContainer = null)), this._overlay && (this._overlay.dispose(), (this._overlay = null)) }; CE.prototype.updateOverlay = function(t) { this._overlay && this._overlay.setOption(t) }; CE.prototype.getMap = function() { return this._mapContainer }; CE.prototype.getOverlay = function() { return this._overlay }; CE.prototype.show = function() { document.getElementById(this._id).style.visibility = 'visible' }; CE.prototype.hide = function() { document.getElementById(this._id).style.visibility = 'hidden' }; new CE(viewer,option); }