echarts 飞线、轨迹图与地方地图联动

首先展示一下需要实现的效果，利用两个坐标点数据，实现飞线，与地图的坐标进行联动。

在实现这块功能时，两个坐标体系的联动是难点。

其中地图的series type是：map，
另一个飞线的 series 是：lines。

核心就是建立一个 geo，讲两套体系的坐标绑定在一个geo上面。下面是具体echarts options配置代码和解释。

// 处理出来多处使用的配置
const commonOps = {zoom: 1,roam: true,center: [114.0520278, 22.7415555],silent: true,label: {normal: {show: true,textStyle: {color: '#fff',},},emphasis: {textStyle: {color: '#fff',},},},itemStyle: {normal: {borderColor: 'rgb(147, 235, 248)',borderWidth: 1,areaColor: {type: 'radial',x: 0.5,y: 0.5,r: 0.8,colorStops: [{offset: 0,color: '#09132c',},{offset: 1,color: '#274d68',},],globalCoord: true,},},emphasis: {disabled: true,areaColor: '#3982CB',borderWidth: 1,borderColor: '#FAD800',},},emphasis: {disabled: true,areaColor: '#3982CB',borderWidth: 1,borderColor: '#FAD800',},
};
const option = {title: {top: '5%',text: '深圳市',subtext: '',x: 'center',textStyle: {color: '#ccc',},},// 建立 lines需要的虚拟地图visualMap: {left: 'right',min: 10000,max: 1000000,show: true,inRange: {color: ['#1F5387', '#3982CB', '#44A2FF'],},text: ['High', 'Low'],calculable: true,},// 建立连接的核心，通过geoIndex 将两套 坐标系统一起来geo: {map: 'shenzhen',geoIndex: 0,region: [{name: 'shenzhen',},],roam: true,...commonOps,},series: [{type: 'map',geoIndex: 0,  // 指定geo 坐标系建立连接map: 'shenzhen', // 使用...commonOps,},{type: 'lines',zlevel: 2,polyline: false,effect: {color: '#FFF',show: true,period: 6, // 箭头指向速度，值越小速度越快trailLength: 0.01, // 特效尾迹长度[0,1]值越大，尾迹越长重symbol: 'arrow', // 箭头图标symbolSize: 2, // 图标大小},lineStyle: {color: '#FBD46B',normal: {color: '#FBD46B',width: 2, // 线条宽度opacity: 0.1, // 尾迹线条透明度curveness: 0.4, // 尾迹线条曲直度},},data: [],},],
};export default option;

以上完成了 echarts配置以后参考官方demo 将数据路径传入 data属性就搞定了。
https://echarts.apache.org/examples/zh/editor.html?c=lines-bmap-effect

以上需要依赖的npm有,请参考使用。

    "echarts": "^5.3.2","echarts-gl": "^2.0.9",

echarts 飞线、轨迹图与地方地图联动相关推荐

echarts飞线图
简介在可视化大屏中碰到要绘制飞线图的需求,采用Echarts来实现,但是Echarts的世界地图数据会缺失部分数据,引入其他来源的话在网速不好的情况下地图瓦片加载又会很慢,体验感极差:最终通过改造E ...
Echarts 飞线图
地图数据 https://datav.aliyun.com/portal/school/atlas/area_selector 不会下载的同学用这个吧「chinaMap.js」https://www. ...
echarts 地图，3D echarts地图，echarts飞线，echarts福建地图
闲来无事帮大家研究了一下echart的地图,写了几个福建的demo,有打点.飞线.飞线发射点的切换.下钻.3D.2D的实现请各位大神指正,demo入下图所示 demo在这里,https://downl ...
matlab经纬度画轨迹图_MATLAB绘制地图(完整资料).doc
[最新整理,下载后即可编辑] [最新整理,下载后即可编辑] 1 使用向量绘制地图 1.1 绘制全球海岸线向量数据可以表示一个地图. 这种向量存在的形式是一系列的经纬度或投影坐标对,它们代表一个点集 ...
python调用百度地图画轨迹图_百度地图 API 绘制路线
后台拿到数据返回给了jsp页面,并且显示到了地图上 . 现在要根据两个位点.绘制出他们之间的路线. 有实现过这个功能的大神,给指点一下,如果有实例,那当热是最好了. 下面是 : 我显示坐标的代码: v ...
百度地图结合echarts实现飞线
百度地图结合echarts实现飞线目前很流行的地图轨迹飞线图,咱也来实现一个,使用百度地图和echarts图表实现,示例如下,(其实百度地图api有一个位置数据可视化MapV GL也可实现,需要的小 ...
d3.js-V3制作简单的飞线图
d3.js制作简单的飞线图简介期末的一个小作业,放上来分享一下.若有不懂的地方欢迎在评论区提问~ 最终效果图: 使用工具 d3.js (V3版本) 步骤简介准备好数据. 绘制一个中国地图. 绘制 ...
echart实现3d地图_3D飞线效果——让线“飞”起来的秘密
在城市规划.统计.交通等行业,地图可视化已成为最直接也最吸引眼球的一种表达方式.例如人群迁徙.人口流动.OD出行.职住分析.客流来源等众多场景都需要用到飞线效果呈现. 2D飞线效果图随着可视化技术的 ...
一根飞线的故事-SVG篇
(给IT平头哥联盟加星标,提升前端技能) 前言作者:胖子. @胖子,目前就职于杭州数澜科技有限公司,数据可视化爱好者,对D3和其他数据可视化图表组件有一定研究.常年混迹于GitHub,热爱阅读开源代 ...

echarts 飞线、轨迹图与地方地图联动

echarts 飞线、轨迹图与地方地图联动相关推荐

最新文章

热门文章