一、编写EchartsLayer类实现注入到window对象，实现类如下：

import * as Cesium from 'cesium/Cesium'
import * as echarts from 'echarts'
!(function () {function EchartsLayer(viewer) {this._viewer = viewer;registerMap(this);createChart(this);resize(this);}Object.defineProperties(EchartsLayer.prototype, {chart: {get: function () {return this._chart;}}})function registerMap(layer) {if (!Cesium.defined(echarts)) {throw new Cesium.DeveloperError("echarts is undefined.");}echarts.registerCoordinateSystem("GLMap", getCoordinateSystem(layer._viewer)),echarts.registerAction({type: "GLMapRoam",event: "GLMapRoam",update: "updateLayout"}, function (t, e) {}),echarts.extendComponentModel({type: "GLMap",defaultOption: {roam: !1}});echarts.extendComponentView({type: "GLMap",init: function (t, e) {this.api = e;layer._viewer.scene.postRender.addEventListener(this.moveHandler, this)},moveHandler: function (t, e) {this.api.dispatchAction({type: "GLMapRoam"});},render: function (t, e, i) {},dispose: function (t) {layer._viewer.scene.postRender.removeEventListener(this.moveHandler, this)}});}function createChart(layer) {var scene = layer._viewer.scene;scene.canvas.setAttribute("tabIndex", 0);var ele = document.createElement('div');ele.style.position = "absolute";ele.style.top = "0px";ele.style.left = "0px";ele.style.width = scene.canvas.width + "px";ele.style.height = scene.canvas.height + "px";ele.style.pointerEvents = "none";ele.setAttribute("id", "echarts");ele.setAttribute("class", "echartMap");layer._viewer.container.appendChild(ele);layer._echartsContainer = ele;layer._chart = echarts.init(ele);}function resize(layer) {window.onresize = function () {var scene = layer._viewer.scene;layer._echartsContainer.style.width = scene.canvas.style.width + "px";layer._echartsContainer.style.height = scene.canvas.style.height + "px";layer._chart.resize();}}EchartsLayer.prototype.isDestroyed = function () {return false;};EchartsLayer.prototype.destroy = function () {if (this._echartsContainer) {this._viewer.container.removeChild(this._echartsContainer);this._echartsContainer = undefined;}if (this._chart) {this._chart.dispose();this._chart = undefined;}Cesium.destroyObject(this);}function getCoordinateSystem(viewer) {function GLMapCoordSys(api) {this.dimensions = ['lng', 'lat'];this._mapOffset = [0, 0];this._api = api;this._viewer = viewer;this._occluder = new Cesium.EllipsoidalOccluder(this._viewer.scene.globe.ellipsoid, this._viewer.scene.camera.position);}GLMapCoordSys.prototype.dimensions = ['lng', 'lat']GLMapCoordSys.prototype.setMapOffset = function (mapOffset) {this._mapOffset = mapOffset;};GLMapCoordSys.prototype.dataToPoint = function (data) {var e = [0, 0],i = Cesium.Cartesian3.fromDegrees(data[0], data[1]);if (!i) return e;this._occluder.cameraPosition = this._viewer.scene.camera.position;if(!this._occluder.isPointVisible(i)) {return [];};var n = viewer.scene.cartesianToCanvasCoordinates(i);if (!n) return e;return (Cesium.Cartesian3.angleBetween(viewer.scene.camera.position, i) < Cesium.Math.toRadians(75))? [n.x - this._mapOffset[0], n.y - this._mapOffset[1]] : e;}GLMapCoordSys.prototype.pointToData = function (pt) {var mapOffset = this._mapOffset;var cart = viewer.scene.pickPosition(new Cartesian2(pt[0] + mapOffset[0], pt[1] + mapOffset[1]), new Cesium.Cartesian3());var carto = Cesium.Cartographic.fromCartesian(cart);return [Cesium.Math.toDegrees(carto.longitude), Cesium.Math.toDegrees(carto.latitude)];}GLMapCoordSys.prototype.getViewRect = function () {var api = this._apireturn new echarts.graphic.BoundingRect(0, 0, api.getWidth(), api.getHeight())}GLMapCoordSys.prototype.getRoamTransform = function () {return echarts.matrix.create();}GLMapCoordSys.dimensions = GLMapCoordSys.prototype.dimensionsGLMapCoordSys.create = function (ecModel, api) {var coordSys;ecModel.eachComponent('GLMap', function (GLMapModel) {coordSys = new GLMapCoordSys(api);coordSys.setMapOffset(GLMapModel.__mapOffset || [0, 0]);GLMapModel.coordinateSystem = coordSys;})ecModel.eachSeries(function (seriesModel) {if (seriesModel.get('coordinateSystem') === 'GLMap') {seriesModel.coordinateSystem = coordSys;}})}return GLMapCoordSys;}window.EchartsLayer = EchartsLayer;
})();

二、编写调用工具类

/**** echarts图层通用工具* date:2022-04-15* author：zdh* @type {EchartsLayerUtil}*/
import './EchartsLayer'
import * as Cesium from 'cesium/Cesium'
let EchartsLayerUtil = (function () {function EchartsLayerUtil (ZJNCesium) {this.ZJNCesium = ZJNCesiumthis.transferLayer = null}EchartsLayerUtil.prototype.createTransferLayer = function (data,idField,labelField){let geoCoordMap = data.geoCoordMap;let convertData = function (data) {let res = [];for (let i = 0; i < data.length; i++) {let dataItem = data[i];let fromCoord = [parseFloat(geoCoordMap[dataItem[0][idField]][0]),parseFloat(geoCoordMap[dataItem[0][idField]][1])];let toCoord = [parseFloat(geoCoordMap[dataItem[1][idField]][0]),parseFloat(geoCoordMap[dataItem[1][idField]][1])];if (fromCoord && toCoord) {res.push({fromName: dataItem[0][idField],toName: dataItem[1][idField],coords: [fromCoord, toCoord],value: 3,});}}return res;}let series = [];data.resultData.forEach(function (item, i) {series.push({coordinateSystem: 'GLMap',type: "effectScatter",symbolSize: 20,hoverAnimation: true,itemStyle: {color: "rgba(60,53,212,1)",borderColor: "rgba(60,53,212,0.4)",borderWidth: 10},data: [{value: [parseFloat(geoCoordMap[item[0][0][idField]][0]),parseFloat(geoCoordMap[item[0][0][idField]][1])],itemStyle: {normal: {color: '#df27ba'}}}],label: {normal: {show: true,position: 'right', //显示位置offset: [5, 0], //偏移设置formatter: function (params) {//圆环显示文字return item[0][0][labelField];},fontWeight: 8,fontSize: 20,},}},{name: 'Top10',type: 'lines',coordinateSystem: 'GLMap',zlevel: 2,symbol: ['none','circle'],emphasis: {lineStyle: {color: 'rgb(255,255,108)',width: 6,},},tooltip: {formatter: '{b}',},animation: false,symbolSize: 10,effect: {show: true,period: 4, //箭头指向速度，值越小速度越快trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重symbol: 'arrow', //箭头图标symbolSize: 8, //图标大小},lineStyle: {normal: {color:'#eee',width: 1, //尾迹线条宽度opacity: 1, //尾迹线条透明度curveness: 0.3, //尾迹线条曲直度},},data: convertData(item)})})this.transferLayer = new EchartsLayer(this.ZJNCesium.viewer)let option = {// title: {//     text: 'ArcGIS API for Javascript4.10扩展Echarts4之模拟迁徙',//     subtext: 'Data from Echart社区,Develop By YANG',//     left: 'center',//     textStyle: {//         color: '#fff'//     }// },animation: false,GLMap: {},tooltip: {trigger: 'item'},series: series};this.transferLayer.chart.setOption(option)let handler = new Cesium.ScreenSpaceEventHandler(this.ZJNCesium.viewer.scene.canvas);handler.setInputAction(function (e) {let pos = this.ZJNCesium.viewer.scene.pickPosition(e.position);console.log(pos);}, Cesium.ScreenSpaceEventType.LEFT_CLICK);}return EchartsLayerUtil
}())
export {EchartsLayerUtil}

三、测试数据整理

{"geoCoordMap": {"cbbb669db45c4fe19ce9074bfb4cd1e8": [114.696074,35.898948],"e3fb0b7892f74cff96f008567194d947": [110.768251,33.990967],"f9dafa255b774af08003811e33c9de10": [115.367576,33.399821],"53f3da71ab124333aff0ad35b915e6ac": [116.342632,37.501695],"7e821d134dd64bc587f31ea73156bfc0": [116.360495,34.836477],"b8d343de07304c4fb378db198febd45f": [117.440802,34.944583],"81a5cd1eb9d04b92b0d955fc269b35fc": [115.767717,35.702342],"8425a827de3e48548387ff0f92c62791": [115.783878,34.308761]},"resultData": [[[{"entName": "王氏中医医院有限责任公司","code": "cbbb669db45c4fe19ce9074bfb4cd1e8"},{"entName": "汇楚危险废物处置有限公司","code": "8425a827de3e48548387ff0f92c62791"}]],[[{"entName": "社区卫生服务中心","code": "e3fb0b7892f74cff96f008567194d947"},{"entName": "汇楚危险废物处置有限公司","code": "8425a827de3e48548387ff0f92c62791"}]],[[{"entName": "济堂风湿病专科医院","code": "f9dafa255b774af08003811e33c9de10"},{"entName": "汇楚危险废物处置有限公司","code": "8425a827de3e48548387ff0f92c62791"}]],[[{"entName": "红济中医医院","code": "53f3da71ab124333aff0ad35b915e6ac"},{"entName": "汇楚危险废物处置有限公司","code": "8425a827de3e48548387ff0f92c62791"}]],[[{"entName": "温泉社区卫生服务中心","code": "7e821d134dd64bc587f31ea73156bfc0"},{"entName": "汇楚危险废物处置有限公司","code": "8425a827de3e48548387ff0f92c62791"}]],[[{"entName": "温泉社区卫生服务中心","code": "b8d343de07304c4fb378db198febd45f"},{"entName": "汇楚危险废物处置有限公司","code": "8425a827de3e48548387ff0f92c62791"}]],[[{"entName": "社区卫生服务中心","code": "81a5cd1eb9d04b92b0d955fc269b35fc"},{"entName": "汇楚危险废物处置有限公司","code": "8425a827de3e48548387ff0f92c62791"}]]]
}

四、框架内配置加载信息

qxt:{entities:[],isRLayerPanel: true,dataIdField: 'code',dataLabelField: 'entName',dataPath: '',options:{id:'qxt',url: '/static/EchartsData/transferData.json',name:'迁徙图',isShow:true},location: {"destination":{"x":-4739343.203207548,"y":10948294.24246299,"z":8769980.74531059},"orientation":{"heading":6.230093908112224,"pitch":-1.567082607022392,"roll":0},duration: 2},entityType:'EchartsQXT'
}

五、框架内调用解析代码编写

if (layersInfo[layerId].entityType === "EchartsQXT") {if (ZJNCesium.echartsLayerUtil === null) {ZJNCesium.echartsLayerUtil = new EchartsLayerUtil(ZJNCesium)}let _this = ZJNCesiumgetMapData(layersInfo[layerId].options.url).then((res) => {if (layersInfo[layerId].dataPath != undefined && layersInfo[layerId].dataPath != "") {let dp = layersInfo[layerId].dataPath.split('/')for (let i = 0; i < dp.length; i++) {res = res[dp[i]]}}_this.echartsLayerUtil.createTransferLayer(res, layersInfo[layerId].dataIdField, layersInfo[layerId].dataLabelField)layersInfo[layerId].echartsLayer = _this.echartsLayerUtil.transferLayerif( layersInfo[layerId].options.isShow){layersInfo[layerId].echartsLayer.chart.getDom().style.display = ''}else {layersInfo[layerId].echartsLayer.chart.getDom().style.display = 'none'}});
}

六、成果展示

感谢支持技术分享，请扫码点赞支持：

技术合作交流qq:2401315930

VUE+Cesium绘制迁徙图结合echarts实现相关推荐

html5画折线图,canvas绘制折线图(仿echarts)
遇到的问题:Retina屏上字体线条模糊问题解决方案:放大canvas的大小,然后用css压缩回原大小,例如:想要900*400的画布,先将画布设置为 width="1800px" ...
vue+gojs 绘制鱼骨图(因果图)
最近查找js相关的鱼骨图组件,找了半天都没有合适的,自己参考gojs官网demo简单的实现了下,效果如下. 废话少说,直接上代码. 引入gojs npm install gojs --save 整合到 ...
echats 3d地图并打点和绘制迁徙图，绘制3d柱状图 3d迁徙线3d点 lines3D bar3D scatter3D
效果图片代码如下 var option = {}let geoCoordMap = {"海门": [121.15, 31.89],"鄂尔多斯": [109.7 ...
Vue + gojs 绘制鱼骨图
效果图: 引入gojs npm install gojs --save 在git地址拉下代码 ,地图组件地址是 src\components\fishboneDiagram git地址开源不易多多 ...
vue + canvas绘制背景图、矩形
最近有需求做图片人脸识别,在系统上传图片后,后台返回坐标将识别到的人脸画上矩形. 效果图如下: 实现过程: 1.利用绘制canvas实例 //html <canvas id='imgCanvas ...
vue中使用echarts和百度地图实现飞机迁徙图
在vue-cli生成的项目中使用echarts和百度地图api实现飞机迁徙图,当然也可以实现其他效果. 1. 准备项目安装echarts 在已经生成的vue项目根目录npm install echa ...
02 【ArcGIS JS API + eCharts系列】实现二、三维迁徙图的绘制
概述上一篇文章通过纯前端的方式实现了ArcGIS JS API和eCharts的普通二维图表绘制,因为这些图表绘制其实是跟地理坐标无关的,只需要设置图表的位置即可,所以仅仅用了纯前端的方式去实现.这 ...
Mapbox + ECharts 实现简单迁徙图
文章目录概述预览效果实现代码说明相关链接概述 ECharts是开源的可视化图表库,其中有丰富的图表.本文使用Mapbox结合ECharts插件实现了简单的迁徙地图. 预览效果实现代码 & ...
Vue项目中Echarts流向图迁徙图实现
在数据可视化中,地图可视化是高频应用的一种.我们在一些新闻报道和商业杂志上,会经常看到运用地图来分析展示商业现象,这样的利用地图来反映和分析数据的形式叫数据地图.数据地图可以最直观的表达出数据之间的空 ...

VUE+Cesium绘制迁徙图结合echarts实现

感谢支持技术分享，请扫码点赞支持：

VUE+Cesium绘制迁徙图结合echarts实现相关推荐

最新文章

热门文章