devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

echarts 5.0——3d中国地图和飞线_echarts3d地图 map3d 飞线

作者：2023面试高手 | 2024-05-04 13:27:02

赞

踩

echarts3d地图 map3d 飞线

echarts 5.0的版本样式语法与4.0及以下的语法有个别差异，使用旧语法浏览器会警告提示。

3d地图常用的实现方法有两种。一种是使用GL来实现，一种是使用叠层和阴影来实现，本文将使用叠层和阴影来实现。先看效果图：

一、3D中国地图

1. 一定要使用 echarts 5.0及以上的版本;

2. echarts 5.0没有内置中国地图了。点击下载 china.json；

3. 一共使用了四层地图。
（1）第一层是中国地图各省细边框和展示南海诸岛；
（2）第二层是实现中国地图外边框的宽度和阴影，与第一层完全重合，隐藏南海诸岛；
（3）第三层和第四层形成一个底层3d立体，使用top往下偏移，隐藏南海诸岛。

  1. // html
  2. <div class="china-map" ref="chinaMap"></div>
  1. // 引入资源
  2. import * as echarts from 'echarts'
  3. import china from '@/assets/json/china.json'
  4.  
  5. // 方法
  6. chinaEchart(){
  7.     //注册地图，这个特别重要
  8.     echarts.registerMap('china', china)
  9.     let myChart = echarts.init(this.$refs.chinaMap);
  10.     //echart 配制option  
  11.       var options= {
  12.         tooltip: {
  13.           show:true,
  14.           triggerOn: "mousemove",   //mousemove、click
  15.           padding:[4,8],
  16.           borderWidth:1,
  17.           borderColor:'#409eff',
  18.           backgroundColor:'rgba(255,255,255,0.7)',
  19.           textStyle:{
  20.             color:'#000000',
  21.             fontSize:13
  22.           },
  23.           formatter: function(e) {
  24.             return e.name;
  25.           }
  26.         },
  27.         geo: [
  28.           // 第一层
  29.           {
  30.             map: "china",
  31.             z: 3,
  32.             zoom: 1.2,
  33.             aspectScale: 0.85,
  34.             roam: false,
  35.             top: '10%',
  36.             layoutSize: "100%", //保持地图宽高比
  37.             regions: [
  38.               { // 隐藏南海诸岛,因为顶层已经添加过了
  39.                 name: '南海诸岛',
  40.                 itemStyle: {
  41.                   borderWidth: 0.5,
  42.                   shadowBlur: 0,
  43.                   borderColor: '#61aacb',
  44.                   areaColor: '#104584'
  45.                 }
  46.               }
  47.             ],
  48.             itemStyle:{
  49.               borderColor: '#c8feff',
  50.               borderWidth: 0.5,
  51.               shadowBlur: 3,
  52.               shadowColor: '#66edff',
  53.               areaColor: '#0862db'
  54.             },
  55.             emphasis:{
  56.               itemStyle:{
  57.                 shadowBlur: 10,
  58.                 borderWidth: 1,
  59.                 areaColor: '#2da9ff',
  60.               },
  61.               label:{
  62.                 show:false,
  63.                 color: '#ffffff',
  64.               }
  65.             },
  66.             select:{
  67.               itemStyle:{
  68.                 shadowBlur: 10,
  69.                 borderWidth: 1,
  70.                 areaColor: '#2da9ff',
  71.               },
  72.               label:{
  73.                 color: '#ffffff',
  74.               }
  75.             }
  76.           },
  77.           // 第二层
  78.           {
  79.             map: "china",
  80.             z: 2,
  81.             zoom: 1.2,
  82.             aspectScale: 0.85,
  83.             roam: false,
  84.             silent:true,
  85.             top: '10%',
  86.             layoutSize: "100%", //保持地图宽高比
  87.             regions: [
  88.               { // 隐藏南海诸岛,因为顶层已经添加过了
  89.                 name: '南海诸岛',
  90.                 itemStyle: {
  91.                   opacity: 0 // 为 0 时不绘制该图形
  92.                 },
  93.                 label: {
  94.                   show: false
  95.                 }
  96.               }
  97.             ],
  98.             itemStyle:{
  99.               borderColor: '#d8feff',
  100.               borderWidth: 3,
  101.               shadowBlur: 10,
  102.               shadowColor: '#22a1ff',
  103.               areaColor: '#0862db',
  104.               shadowOffsetX: 0,
  105.               shadowOffsetY: 8
  106.             },
  107.           },
  108.           // 第三层
  109.           {
  110.             map: "china",
  111.             z: 1,
  112.             zoom: 1.2,
  113.             aspectScale: 0.85,
  114.             top: '11.5%',
  115.             silent:true,
  116.             layoutSize: "100%", //保持地图宽高比
  117.             itemStyle:{
  118.               borderColor: '#c8feff',
  119.               borderWidth: 1,
  120.               shadowBlur: 0,
  121.               shadowColor: '#99c4ff',
  122.               areaColor: '#4ebaff',
  123.             },
  124.             regions: [
  125.               { // 隐藏南海诸岛,因为顶层已经添加过了
  126.                 name: '南海诸岛',
  127.                 itemStyle: {
  128.                   opacity: 0 // 为 0 时不绘制该图形
  129.                 },
  130.                 label: {
  131.                   show: false
  132.                 }
  133.               }
  134.             ],
  135.           },
  136.           // 第四层
  137.           {
  138.             map: "china",
  139.             z: 0,
  140.             zoom: 1.2,
  141.             aspectScale: 0.85,
  142.             top: '12%',
  143.             silent:true,
  144.             layoutSize: "100%", //保持地图宽高比
  145.             itemStyle:{
  146.               borderColor: '#66edff',
  147.               borderWidth: 2,
  148.               shadowBlur: 20,
  149.               shadowColor: '#4d99ff',
  150.               areaColor: '#1752ad',
  151.               shadowOffsetX: 0,
  152.               shadowOffsetY: 8
  153.             },
  154.             regions: [
  155.               { // 隐藏南海诸岛,因为顶层已经添加过了
  156.                 name: '南海诸岛',
  157.                 itemStyle: {
  158.                   opacity: 0 // 为 0 时不绘制该图形
  159.                 },
  160.                 label: {
  161.                   show: false
  162.                 }
  163.               }
  164.             ],
  165.           },
  166.         ],
  167.         series: [
  168.           // 地图
  169.           {
  170.             type: "map",
  171.             geoIndex: 0,
  172.             data: []
  173.           }
  174.         ]
  175.       }
  176.       myChart.setOption(options);
  177. }

二、地图飞线

1. 飞线有一对多，多对多；

2. 起点和终点使用effectScatter标点。

  1. // 起点名称和经纬度
  2. const fromName = '重庆市'
  3. const fromLatlng = [106.33,29.35]
  4.  
  5. // 终点名称和经纬度
  6. const geoCoordMap = [
  7.     { name: '盘锦市', latlng: [120.93141287481329, 40.93448132827849]},
  8.     { name: '沧州市', latlng: [116.71809759843096, 37.96769678343516]},
  9.     { name: '东营市', latlng: [118.29234782217573, 37.44294670885357]},
  10.     { name: '大连市', latlng: [121.26593157813807, 38.886009413952934]},
  11.     { name: '沈阳市', latlng: [122.220947193165, 41.64094730550629]},
  12.     { name: '北京市', latlng: [116.07673639616456, 40.110426254643315]},
  13.     { name: '白银市', latlng: [101.09220648866805, 36.568363251217576]},
  14.     { name: '石家庄市', latlng: [115.20215293852858, 38.886009413952934]}
  15. ]
  16.  
  17. //飞线数据
  18. const linesData = geoCoordMap.map(row=>{
  19.     return {
  20.         coords: [
  21.             fromLatlng,
  22.             row.latlng
  23.         ],
  24.         fromName: fromName,
  25.         toName: row.name,
  26.         lineStyle: {
  27.             color: '#FFE747',
  28.             curveness: 0.2
  29.         }
  30.     }
  31. })
  32.  
  33. // 终点标点数据
  34. let effectData = geoCoordMap.map(row=>{
  35.     return {
  36.         value: row.latlng,
  37.         name: row.name,
  38.         lineStyle: {
  39.             color: '#FFE747'
  40.         }
  41.     }
  42. })
  43.  
  44. // series新增飞线
  45. series: [
  46.      // 飞线
  47.      {
  48.             type: 'lines',
  49.             zlevel: 5,
  50.             effect: {
  51.               show: true,
  52.               period: 5, //箭头指向速度，值越小速度越快
  53.               trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
  54.               symbol: 'arrow', //ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  55.               symbolSize: 8, //图标大小
  56.             },
  57.             lineStyle: {
  58.               color: '#FFE747',
  59.               type: 'dashed',
  60.               width: 2, //尾迹线条宽度
  61.               opacity: 1, //尾迹线条透明度
  62.               curveness: 0.3 //尾迹线条曲直度
  63.             },
  64.             data: linesData,
  65.             markPoint:{
  66.               symbol: 'circle', //ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  67.               symbolSize: 8, //图标大小
  68.             }
  69.     },
  70.     //起点
  71.     {
  72.             type: 'effectScatter',
  73.             coordinateSystem: 'geo',
  74.             zlevel: 6,
  75.             rippleEffect: {
  76.                 //涟漪特效
  77.                 period: 4, //动画时间，值越小速度越快
  78.                 brushType: 'stroke', //波纹绘制方式 stroke, fill
  79.                 scale: 4 //波纹圆环最大限制，值越大波纹越大
  80.             },
  81.             label: {
  82.               show: false,
  83.               position: 'right', //显示位置
  84.               offset: [5, 0], //偏移设置
  85.               formatter: '{b}', //圆环显示文字
  86.               color: 'red'
  87.             },
  88.             symbol: 'circle',
  89.             symbolSize: function(val) {
  90.               return 10; //圆环大小
  91.             },
  92.             itemStyle: {
  93.               show: false,
  94.               color: '#ff8400',
  95.             },
  96.             data: [{value: fromLatlng,name: fromName}]
  97.           },
  98.           // 终点
  99.           {
  100.             type: 'effectScatter',
  101.             coordinateSystem: 'geo',
  102.             zlevel: 6,
  103.             rippleEffect: {
  104.                 //涟漪特效
  105.                 period: 4, //动画时间，值越小速度越快
  106.                 brushType: 'stroke', //波纹绘制方式 stroke, fill
  107.                 scale: 4 //波纹圆环最大限制，值越大波纹越大
  108.             },
  109.             label: {
  110.               show: false,
  111.               position: 'right', //显示位置
  112.               offset: [5, 0], //偏移设置
  113.               formatter: '{b}', //圆环显示文字
  114.               color: 'red'
  115.             },
  116.             symbol: 'circle',
  117.             symbolSize: function(val) {
  118.               return 6; //圆环大小
  119.             },
  120.             itemStyle: {
  121.               show: false,
  122.               color: '#befaff',
  123.             },
  124.             data: effectData
  125. }]

三、扩展

1. 使用 echarts-gl也可以实现3D地图，做出来的3D效果各有千秋，等后面再补一个用gl实现的方法；

2. 本文飞线是做一对多的，可以做成多对多飞线，即起点有多个，终点也有多个。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/534630
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号