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

使用echarts+echarts-gl绘制3d地图，实现地图轮播效果_echarts 3d地图

作者：花生_TL007 | 2024-02-15 08:54:44

赞

踩

echarts 3d地图

记录一下大屏开发中使用到的echarts-gl
大屏的页面根据需求前前后后改了几个版本了，地图的样式也改了又改
这里记录一下，因为echarts属性用到的比较多也比较杂，防止以后需要用到忘记了

目录

初始效果

效果图：

适应大屏风格的发光地图效果，用了两个图层实现叠加背景图片实现：​编辑

安装命令

创建一个div用来挂载地图

完整代码：

总结

初始效果

效果图：
 
适应大屏风格的发光地图效果，用了两个图层实现叠加背景图片实现：

 

安装命令

首先在项目中安装echarts与echarts gl（echers gl用于3d）
安装命令

npm install echarts --save //echarts安装命令
npm install echarts-gl //echarts-gl安装命令

安装完成后在package.json中查看有没有安装成功
安装成功后在main.js中引入

  1. import echartsGL from 'echarts-gl' // 引入echarts
  2. Vue.prototype.$echartsGL = echartsGL // 引入组件（将echarts注册为全局）

使用 http://datav.aliyun.com/portal/school/atlas/area_selector这个工具获取要显示的地图数据
存放在放静态资源的地方，创建一个json文件
这些没问题后，就可以在组件中进行操作了

  1. <template>
  2.   <div id="hello">
  3.   </div>
  4. </template>

创建一个div用来挂载地图

在script中引入存放地图数据的json文件

  1. import * as echarts from 'echarts';
  2. import geoJson from "../assets/mapJSon/rkz.json"
  3. import coordtransform from 'coordtransform'
  4. export default {
  5.   name: 'MapDemo',
  6.   data() {
  7.     return {
  8.       dataIndex: 0,
  9.       mTime:null
  10.     }
  11.   },
  12.   props: {
  13.     msg: String
  14.   },
  15.   methods: {
  16.     convertCoord(coord) {
  17.       const gcj02 = coordtransform.wgs84togcj02(coord[0], coord[1])
  18.       const bd09 = coordtransform.gcj02tobd09(gcj02[0], gcj02[1])
  19.       return bd09
  20.     },
  21.  
  22.  
  23.   },
  24.   mounted() {
  25.     // 基于准备好的dom，初始化echarts实例  
  26.  
  27.  
  28.  
  29.  
  30.     var myChart = echarts.init(document.getElementById('hello'));
  31.  
  32.     var scatterData = [
  33.       { name: "亚东县", value: "2945米" },
  34.       { name: "仁布县", value: "3950米" },
  35.       { name: "谢通门县", value: "4008米" },
  36.       { name: "萨迦县", value: "4330米" },
  37.       { name: "拉孜县", value: "4012米" },
  38.       { name: "昂仁县", value: "4320米" },
  39.       { name: "江孜县", value: "约4000米" },
  40.       { name: "白朗县", value: "平均4200米" },
  41.       { name: "聂拉木县", value: "4300米" },
  42.       { name: "昂仁县", value: "4320米" },
  43.       { name: "岗巴县", value: "4700米以上" },
  44.       { name: "定结县", value: "2500-4700米" },
  45.       { name: "定日县", value: "平均5000米。" },
  46.       { name: "吉隆县", value: "4200米" },
  47.       { name: "萨嘎县", value: "4487米" },
  48.       { name: "仲巴县", value: "4772米" },
  49.       { name: "南木林县", value: "3790米到4952米" },
  50.       { name: "桑珠孜区", value: "3840米" },
  51.       { name: "康马县", value: "4200-4600米" }
  52.  
  53.     ];
  54.  
  55.     // 绘制图表
  56.     let option = {
  57.       // backgroundColor: "#fff",
  58.       tooltip: {
  59.         // 鼠标是否可以进入悬浮框
  60.         show: true,
  61.         confine: true,
  62.         enterable: true,
  63.         // 触发方式 mousemove, click, none, mousemove|click
  64.         triggerOn: 'mousemove',
  65.         // item 图形触发， axis 坐标轴触发， none 不触发
  66.         trigger: 'item',
  67.         // 浮层隐藏的延迟
  68.         hideDelay: 100,
  69.         // 背景色
  70.         backgroundColor: 'rgba(110, 110, 110,.5)',
  71.         formatter: function (params) {
  72.           const altitudeMap = {
  73.             '亚东县': '2945米',
  74.             '仁布县': '3950米',
  75.             '谢通门县': '4008米',
  76.             '萨迦县': '4330米',
  77.             '拉孜县': '4012米',
  78.             '昂仁县': '4320米',
  79.             '江孜县': '约4000米',
  80.             '白朗县': '平均4200米',
  81.             '聂拉木县': '4300米',
  82.             '岗巴县': '4700米以上',
  83.             '定结县': '2500-4700米',
  84.             '定日县': '平均5000米',
  85.             '吉隆县': '4200米',
  86.             '萨嘎县': '4487米',
  87.             '仲巴县': '4772米',
  88.             '南木林县': '3790米到4952米',
  89.             '桑珠孜区': '3840米',
  90.             '康马县': '4200-4600米',
  91.           };
  92.  
  93.           return `
  94.             <div style="background-color: #ffffff;box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);padding: 20px;border-radius: 5px;font-size: 36px;color: #333;z-index: 1000;border-color:#333">
  95.               <div style="font-weight: bold;margin-bottom: 30px;">${params.name}</div>
  96.               <div>海拔：${altitudeMap[params.name] ? altitudeMap[params.name] : '未知'}</div>
  97.             </div>
  98.           `
  99.         }
  100.       },
  101.       geo3D: {
  102.         show: true,
  103.         map: "centerMap",
  104.         left: "4%",   //偏移量调整
  105.         top: "5%",  //偏移量调整
  106.         roam: true,
  107.         zoom: 10,
  108.         regionHeight: 5,
  109.         label: {
  110.           show: true,
  111.           distance: 200,
  112.           borderRadius: 0,
  113.           distanca: 0,
  114.           fontSize: 30,
  115.           color: "#ffffff", // 地图初始化区域字体颜色
  116.           borderWidth: 0,
  117.           borderColor: '#ffffff'
  118.         },
  119.         itemStyle: {
  120.           // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
  121.           color: "#271f71", // 地图板块的颜色
  122.           fontSize: 30,
  123.           opacity: 1, // 图形的不透明度 [ default: 1 ]
  124.           borderWidth: 10, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
  125.           borderColor: "#6a63f4", // 图形描边的颜色。[ default: #333 ]
  126.         },
  127.         emphasis: {
  128.           label: {
  129.             show: true,
  130.             color: "#000000", //悬浮字体颜色
  131.             fontSize: 38,
  132.           },
  133.           itemStyle: {
  134.             color: "#e2e1e1",
  135.             opacity: 1,
  136.           },
  137.         },
  138.         // shading: "color",
  139.         light: {
  140.           // 光照阴影
  141.           main: {
  142.             color: "#FFFFFF", // 光照颜色
  143.             intensity: 2, // 光照强度
  144.             shadowQuality: "light", // 阴影亮度
  145.             shadow: true, // 是否显示阴影
  146.             alpha: 50,
  147.             beta: 10,
  148.           },
  149.         },
  150.         regions: [],
  151.         viewControl: {
  152.           "projection": "perspective",
  153.           "autoRotate": false,
  154.           "autoRotateAfterStill": 3,
  155.           "distance": 100.1931248935421,  //默认比例
  156.           "alpha": 83.592048936336816,
  157.           "beta": 0.48683006219769,
  158.           "minAlpha": 5,
  159.           "maxAlpha": 40,
  160.           "minBeta": -1036800,
  161.           "maxBeta": 1036800,
  162.           "animation": true,
  163.           "animationDurationUpdate": 1000,
  164.           "animationEasingUpdate": "cubicInOut",
  165.           "orthographicSize": 60,
  166.           "autoRotateDirection": "cw",
  167.           "autoRotateSpeed": 10,
  168.           "damping": 0.8,
  169.           "rotateSensitivity": 1,
  170.           "zoomSensitivity": 1,
  171.           "panSensitivity": 1,
  172.           "panMouseButton": "middle",
  173.           "rotateMouseButton": "left",
  174.           "minDistance": 40,
  175.           "maxDistance": 400,
  176.           "maxOrthographicSize": 400,
  177.           "minOrthographicSize": 20,
  178.           "center": [
  179.             0,
  180.             0,
  181.             0, 0
  182.           ]
  183.         },
  184.       },
  185.       series: [
  186.         {
  187.           type: "map3D", // 加载series数据
  188.           seriesIndex: 0, // 第一个系列
  189.  
  190.           map: "centerMap",
  191.           regionHeight: 0,
  192.           boxHeight: 500,
  193.           // left: 0,
  194.           left: "4%",   //偏移量调整
  195.           top: "5%",  //偏移量调整
  196.           itemStyle: {
  197.             // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
  198.             color: "rgba(37, 37, 38,1)", // 地图板块的颜色
  199.             opacity: 0, // 图形的不透明度 [ default: 1 ]
  200.             borderWidth: 0, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
  201.             borderColor: "#69E8F5", // 图形描边的颜色。[ default: #333 ]
  202.           },
  203.  
  204.           label: {
  205.             show: true,
  206.             color: "#FFFFFF",
  207.           },
  208.           regions: [],
  209.           zlevel: 5,
  210.           viewControl: {
  211.             "projection": "perspective",
  212.             "autoRotate": false,
  213.             "autoRotateAfterStill": 3,
  214.             "distance": 100.1931248935421,  //默认比例
  215.             "alpha": 83.592048936336816,
  216.             "beta": 0.48683006219769,
  217.             "minAlpha": 5,
  218.             "maxAlpha": 40,
  219.             "minBeta": -1036800,
  220.             "maxBeta": 1036800,
  221.             "animation": true,
  222.             "animationDurationUpdate": 1000,
  223.             "animationEasingUpdate": "cubicInOut",
  224.             "orthographicSize": 60,
  225.             "autoRotateDirection": "cw",
  226.             "autoRotateSpeed": 10,
  227.             "damping": 0.8,
  228.             "rotateSensitivity": 1,
  229.             "zoomSensitivity": 1,
  230.             "panSensitivity": 1,
  231.             "panMouseButton": "middle",
  232.             "rotateMouseButton": "left",
  233.             "minDistance": 40,
  234.             "maxDistance": 400,
  235.             "maxOrthographicSize": 400,
  236.             "minOrthographicSize": 20,
  237.             "center": [
  238.               0,
  239.               -5,
  240.               0,
  241.             ]
  242.           },
  243.         },
  244.         {
  245.           type: "scatter3D",
  246.  
  247.           coordinateSystem: "geo3D",
  248.           data: [],
  249.           symbol: "pin",
  250.           symbolSize: 20,
  251.           animation: true,
  252.           animationDurationUpdate: 500,
  253.           geo3DIndex: 0,
  254.           silent: false,
  255.           itemStyle: {
  256.             opacity: 1,
  257.             width: 1,
  258.           },
  259.           shading: "lambert",
  260.           label: {
  261.             show: false,
  262.             position: "right",
  263.             distance: 200, // 距离图形元素的距离
  264.             color: "#ff0000",
  265.             backgroundColor: "rgba(255, 255, 255, 0)",
  266.             rich: {
  267.               get: {
  268.                 color: "#00E3FF",
  269.                 lineHeight: 12,
  270.               },
  271.               set: {
  272.                 color: "#FFF100",
  273.                 lineHeight: 12,
  274.               },
  275.               date11: {
  276.                 color: "#FFFFFF",
  277.                 lineHeight: 12,
  278.               },
  279.             },
  280.             zlevel: 6,
  281.           },
  282.           emphasis: {
  283.             itemStyle: {
  284.               color: "#FFF200",
  285.             },
  286.             label: {
  287.               show: false,
  288.             },
  289.           },
  290.           zlevel: 6,
  291.         },
  292.       ],
  293.     };
  294.     // myChart.showLoading();
  295.  
  296.     echarts.registerMap('centerMap', geoJson);
  297.     // myChart.hideLoading();
  298.  
  299.     var mapFeatures = echarts.getMap("centerMap").geoJson.features;
  300.     var geoCoordMap = {};
  301.     mapFeatures.forEach(function (v) {
  302.       // v.properties.center = _this.convertCoord(v.properties.center)
  303.       // 地区名称
  304.       var name = v.properties.name;
  305.       // 地区经纬度
  306.       geoCoordMap[name] = v.properties.center;
  307.  
  308.  
  309.     });
  310.     let currentIdx = -1;
  311.     function highlightNext() {
  312.       if (currentIdx++ >= 0) {
  313.         // 防止下标增加到超过区域数组长度
  314.         currentIdx %= mapFeatures.length;
  315.       }
  316.       highlightRegion(currentIdx) // 此处的currentIdx经过if判断，已经+1了
  317.       setTimeout(highlightNext, 5000);
  318.     }
  319.  
  320.     function highlightRegion(index) { // 高亮地图区域，改变对应的散点样式
  321.       let regionName = mapFeatures[index].properties.name; // 高亮的区名
  322.  
  323.       option.geo3D.regions = [ // 高亮3D地图对应的区块
  324.         {
  325.           name: regionName,
  326.           label: {
  327.             show: true,
  328.             color: "##000000",
  329.           },
  330.           itemStyle: {
  331.             color: "#ffffff",
  332.             opacity: 1,
  333.           }
  334.         }
  335.       ];
  336.  
  337.       // 当前高亮区域有散点，需删除stroke动效中的该条数据并在fill动效中增加该条数据
  338.       option.series[0].data = scatterData.filter(item => item.name !== regionName); // stroke散点数据
  339.       option.series[1].data = scatterData.filter(item => item.name === regionName); // fill散点数据
  340.  
  341.       myChart.setOption(option);
  342.       myChart.dispatchAction({ // 触发散点高亮事件，改变标签样式
  343.         type: 'showTip',
  344.         seriesIndex: 1, // series中的第二个图层（fill散点图层）
  345.         dataIndex: 0 // 高亮第一条数据，由于fill散点图层只有一条数据，这里可以不指定
  346.       });
  347.       myChart.dispatchAction({
  348.         type: 'highlight',
  349.         seriesIndex: 0,
  350.         dataIndex: 0
  351.       });
  352.       // 显示弹框
  353.       myChart.dispatchAction({
  354.         type: 'showTip',
  355.         seriesIndex: 0,
  356.         dataIndex: 0
  357.       });
  358.       // myChart.on('mouseover', () => {
  359.       //   console.log('mouseover')
  360.       //   // 停止定时器，清除之前的高亮
  361.       //   clearInterval(this.mTime)
  362.       //   this.mTime = ''
  363.       //   myChart.dispatchAction({
  364.       //     type: 'downplay',
  365.       //     seriesIndex: 0,
  366.       //     dataIndex: this.dataIndex
  367.       //   })
  368.       // })
  369.     }
  370.  
  371.  
  372.     myChart.setOption(option);
  373.     highlightNext()
  374.  
  375.  
  376.     // this.mapActive(myChart)
  377.  
  378.  
  379.   }
  380. }

这样就生成了一个3d地图,地图轮播效果

 

完整代码：

  1. <template>
  2.   <div id="hello">
  3.   </div>
  4. </template>
  5.  
  6.  
  7. <script>
  8. import * as echarts from 'echarts';
  9. import geoJson from "../assets/mapJSon/rkz.json"
  10. import coordtransform from 'coordtransform'
  11. export default {
  12.   name: 'MapDemo',
  13.   data() {
  14.     return {
  15.       dataIndex: 0,
  16.       mTime:null
  17.     }
  18.   },
  19.   props: {
  20.     msg: String
  21.   },
  22.   methods: {
  23.     convertCoord(coord) {
  24.       const gcj02 = coordtransform.wgs84togcj02(coord[0], coord[1])
  25.       const bd09 = coordtransform.gcj02tobd09(gcj02[0], gcj02[1])
  26.       return bd09
  27.     },
  28.  
  29.  
  30.   },
  31.   mounted() {
  32.     // 基于准备好的dom，初始化echarts实例  
  33.  
  34.  
  35.  
  36.  
  37.     var myChart = echarts.init(document.getElementById('hello'));
  38.  
  39.     var scatterData = [
  40.       { name: "亚东县", value: "2945米" },
  41.       { name: "仁布县", value: "3950米" },
  42.       { name: "谢通门县", value: "4008米" },
  43.       { name: "萨迦县", value: "4330米" },
  44.       { name: "拉孜县", value: "4012米" },
  45.       { name: "昂仁县", value: "4320米" },
  46.       { name: "江孜县", value: "约4000米" },
  47.       { name: "白朗县", value: "平均4200米" },
  48.       { name: "聂拉木县", value: "4300米" },
  49.       { name: "昂仁县", value: "4320米" },
  50.       { name: "岗巴县", value: "4700米以上" },
  51.       { name: "定结县", value: "2500-4700米" },
  52.       { name: "定日县", value: "平均5000米。" },
  53.       { name: "吉隆县", value: "4200米" },
  54.       { name: "萨嘎县", value: "4487米" },
  55.       { name: "仲巴县", value: "4772米" },
  56.       { name: "南木林县", value: "3790米到4952米" },
  57.       { name: "桑珠孜区", value: "3840米" },
  58.       { name: "康马县", value: "4200-4600米" }
  59.  
  60.     ];
  61.  
  62.     // 绘制图表
  63.     let option = {
  64.       // backgroundColor: "#fff",
  65.       tooltip: {
  66.         // 鼠标是否可以进入悬浮框
  67.         show: true,
  68.         confine: true,
  69.         enterable: true,
  70.         // 触发方式 mousemove, click, none, mousemove|click
  71.         triggerOn: 'mousemove',
  72.         // item 图形触发， axis 坐标轴触发， none 不触发
  73.         trigger: 'item',
  74.         // 浮层隐藏的延迟
  75.         hideDelay: 100,
  76.         // 背景色
  77.         backgroundColor: 'rgba(110, 110, 110,.5)',
  78.         formatter: function (params) {
  79.           const altitudeMap = {
  80.             '亚东县': '2945米',
  81.             '仁布县': '3950米',
  82.             '谢通门县': '4008米',
  83.             '萨迦县': '4330米',
  84.             '拉孜县': '4012米',
  85.             '昂仁县': '4320米',
  86.             '江孜县': '约4000米',
  87.             '白朗县': '平均4200米',
  88.             '聂拉木县': '4300米',
  89.             '岗巴县': '4700米以上',
  90.             '定结县': '2500-4700米',
  91.             '定日县': '平均5000米',
  92.             '吉隆县': '4200米',
  93.             '萨嘎县': '4487米',
  94.             '仲巴县': '4772米',
  95.             '南木林县': '3790米到4952米',
  96.             '桑珠孜区': '3840米',
  97.             '康马县': '4200-4600米',
  98.           };
  99.  
  100.           return `
  101.             <div style="background-color: #ffffff;box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);padding: 20px;border-radius: 5px;font-size: 36px;color: #333;z-index: 1000;border-color:#333">
  102.               <div style="font-weight: bold;margin-bottom: 30px;">${params.name}</div>
  103.               <div>海拔：${altitudeMap[params.name] ? altitudeMap[params.name] : '未知'}</div>
  104.             </div>
  105.           `
  106.         }
  107.       },
  108.       geo3D: {
  109.         show: true,
  110.         map: "centerMap",
  111.         left: "4%",   //偏移量调整
  112.         top: "5%",  //偏移量调整
  113.         roam: true,
  114.         zoom: 10,
  115.         regionHeight: 5,
  116.         label: {
  117.           show: true,
  118.           distance: 200,
  119.           borderRadius: 0,
  120.           distanca: 0,
  121.           fontSize: 30,
  122.           color: "#ffffff", // 地图初始化区域字体颜色
  123.           borderWidth: 0,
  124.           borderColor: '#ffffff'
  125.         },
  126.         itemStyle: {
  127.           // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
  128.           color: "#271f71", // 地图板块的颜色
  129.           fontSize: 30,
  130.           opacity: 1, // 图形的不透明度 [ default: 1 ]
  131.           borderWidth: 10, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
  132.           borderColor: "#6a63f4", // 图形描边的颜色。[ default: #333 ]
  133.         },
  134.         emphasis: {
  135.           label: {
  136.             show: true,
  137.             color: "#000000", //悬浮字体颜色
  138.             fontSize: 38,
  139.           },
  140.           itemStyle: {
  141.             color: "#e2e1e1",
  142.             opacity: 1,
  143.           },
  144.         },
  145.         // shading: "color",
  146.         light: {
  147.           // 光照阴影
  148.           main: {
  149.             color: "#FFFFFF", // 光照颜色
  150.             intensity: 2, // 光照强度
  151.             shadowQuality: "light", // 阴影亮度
  152.             shadow: true, // 是否显示阴影
  153.             alpha: 50,
  154.             beta: 10,
  155.           },
  156.         },
  157.         regions: [],
  158.         viewControl: {
  159.           "projection": "perspective",
  160.           "autoRotate": false,
  161.           "autoRotateAfterStill": 3,
  162.           "distance": 100.1931248935421,  //默认比例
  163.           "alpha": 83.592048936336816,
  164.           "beta": 0.48683006219769,
  165.           "minAlpha": 5,
  166.           "maxAlpha": 40,
  167.           "minBeta": -1036800,
  168.           "maxBeta": 1036800,
  169.           "animation": true,
  170.           "animationDurationUpdate": 1000,
  171.           "animationEasingUpdate": "cubicInOut",
  172.           "orthographicSize": 60,
  173.           "autoRotateDirection": "cw",
  174.           "autoRotateSpeed": 10,
  175.           "damping": 0.8,
  176.           "rotateSensitivity": 1,
  177.           "zoomSensitivity": 1,
  178.           "panSensitivity": 1,
  179.           "panMouseButton": "middle",
  180.           "rotateMouseButton": "left",
  181.           "minDistance": 40,
  182.           "maxDistance": 400,
  183.           "maxOrthographicSize": 400,
  184.           "minOrthographicSize": 20,
  185.           "center": [
  186.             0,
  187.             0,
  188.             0, 0
  189.           ]
  190.         },
  191.       },
  192.       series: [
  193.         {
  194.           type: "map3D", // 加载series数据
  195.           seriesIndex: 0, // 第一个系列
  196.  
  197.           map: "centerMap",
  198.           regionHeight: 0,
  199.           boxHeight: 500,
  200.           // left: 0,
  201.           left: "4%",   //偏移量调整
  202.           top: "5%",  //偏移量调整
  203.           itemStyle: {
  204.             // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
  205.             color: "rgba(37, 37, 38,1)", // 地图板块的颜色
  206.             opacity: 0, // 图形的不透明度 [ default: 1 ]
  207.             borderWidth: 0, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
  208.             borderColor: "#69E8F5", // 图形描边的颜色。[ default: #333 ]
  209.           },
  210.  
  211.           label: {
  212.             show: true,
  213.             color: "#FFFFFF",
  214.           },
  215.           regions: [],
  216.           zlevel: 5,
  217.           viewControl: {
  218.             "projection": "perspective",
  219.             "autoRotate": false,
  220.             "autoRotateAfterStill": 3,
  221.             "distance": 100.1931248935421,  //默认比例
  222.             "alpha": 83.592048936336816,
  223.             "beta": 0.48683006219769,
  224.             "minAlpha": 5,
  225.             "maxAlpha": 40,
  226.             "minBeta": -1036800,
  227.             "maxBeta": 1036800,
  228.             "animation": true,
  229.             "animationDurationUpdate": 1000,
  230.             "animationEasingUpdate": "cubicInOut",
  231.             "orthographicSize": 60,
  232.             "autoRotateDirection": "cw",
  233.             "autoRotateSpeed": 10,
  234.             "damping": 0.8,
  235.             "rotateSensitivity": 1,
  236.             "zoomSensitivity": 1,
  237.             "panSensitivity": 1,
  238.             "panMouseButton": "middle",
  239.             "rotateMouseButton": "left",
  240.             "minDistance": 40,
  241.             "maxDistance": 400,
  242.             "maxOrthographicSize": 400,
  243.             "minOrthographicSize": 20,
  244.             "center": [
  245.               0,
  246.               -5,
  247.               0,
  248.             ]
  249.           },
  250.         },
  251.         {
  252.           type: "scatter3D",
  253.  
  254.           coordinateSystem: "geo3D",
  255.           data: [],
  256.           symbol: "pin",
  257.           symbolSize: 20,
  258.           animation: true,
  259.           animationDurationUpdate: 500,
  260.           geo3DIndex: 0,
  261.           silent: false,
  262.           itemStyle: {
  263.             opacity: 1,
  264.             width: 1,
  265.           },
  266.           shading: "lambert",
  267.           label: {
  268.             show: false,
  269.             position: "right",
  270.             distance: 200, // 距离图形元素的距离
  271.             color: "#ff0000",
  272.             backgroundColor: "rgba(255, 255, 255, 0)",
  273.             rich: {
  274.               get: {
  275.                 color: "#00E3FF",
  276.                 lineHeight: 12,
  277.               },
  278.               set: {
  279.                 color: "#FFF100",
  280.                 lineHeight: 12,
  281.               },
  282.               date11: {
  283.                 color: "#FFFFFF",
  284.                 lineHeight: 12,
  285.               },
  286.             },
  287.             zlevel: 6,
  288.           },
  289.           emphasis: {
  290.             itemStyle: {
  291.               color: "#FFF200",
  292.             },
  293.             label: {
  294.               show: false,
  295.             },
  296.           },
  297.           zlevel: 6,
  298.         },
  299.       ],
  300.     };
  301.     // myChart.showLoading();
  302.  
  303.     echarts.registerMap('centerMap', geoJson);
  304.     // myChart.hideLoading();
  305.  
  306.     var mapFeatures = echarts.getMap("centerMap").geoJson.features;
  307.     var geoCoordMap = {};
  308.     mapFeatures.forEach(function (v) {
  309.       // v.properties.center = _this.convertCoord(v.properties.center)
  310.       // 地区名称
  311.       var name = v.properties.name;
  312.       // 地区经纬度
  313.       geoCoordMap[name] = v.properties.center;
  314.  
  315.  
  316.     });
  317.     let currentIdx = -1;
  318.     function highlightNext() {
  319.       if (currentIdx++ >= 0) {
  320.         // 防止下标增加到超过区域数组长度
  321.         currentIdx %= mapFeatures.length;
  322.       }
  323.       highlightRegion(currentIdx) // 此处的currentIdx经过if判断，已经+1了
  324.       setTimeout(highlightNext, 5000);
  325.     }
  326.  
  327.     function highlightRegion(index) { // 高亮地图区域，改变对应的散点样式
  328.       let regionName = mapFeatures[index].properties.name; // 高亮的区名
  329.  
  330.       option.geo3D.regions = [ // 高亮3D地图对应的区块
  331.         {
  332.           name: regionName,
  333.           label: {
  334.             show: true,
  335.             color: "##000000",
  336.           },
  337.           itemStyle: {
  338.             color: "#ffffff",
  339.             opacity: 1,
  340.           }
  341.         }
  342.       ];
  343.  
  344.       // 当前高亮区域有散点，需删除stroke动效中的该条数据并在fill动效中增加该条数据
  345.       option.series[0].data = scatterData.filter(item => item.name !== regionName); // stroke散点数据
  346.       option.series[1].data = scatterData.filter(item => item.name === regionName); // fill散点数据
  347.  
  348.       myChart.setOption(option);
  349.       myChart.dispatchAction({ // 触发散点高亮事件，改变标签样式
  350.         type: 'showTip',
  351.         seriesIndex: 1, // series中的第二个图层（fill散点图层）
  352.         dataIndex: 0 // 高亮第一条数据，由于fill散点图层只有一条数据，这里可以不指定
  353.       });
  354.       myChart.dispatchAction({
  355.         type: 'highlight',
  356.         seriesIndex: 0,
  357.         dataIndex: 0
  358.       });
  359.       // 显示弹框
  360.       myChart.dispatchAction({
  361.         type: 'showTip',
  362.         seriesIndex: 0,
  363.         dataIndex: 0
  364.       });
  365.       // myChart.on('mouseover', () => {
  366.       //   console.log('mouseover')
  367.       //   // 停止定时器，清除之前的高亮
  368.       //   clearInterval(this.mTime)
  369.       //   this.mTime = ''
  370.       //   myChart.dispatchAction({
  371.       //     type: 'downplay',
  372.       //     seriesIndex: 0,
  373.       //     dataIndex: this.dataIndex
  374.       //   })
  375.       // })
  376.     }
  377.  
  378.  
  379.     myChart.setOption(option);
  380.     highlightNext()
  381.  
  382.  
  383.     // this.mapActive(myChart)
  384.  
  385.  
  386.   }
  387. }
  388. </script>
  389.  
  390. <style scoped>
  391. #hello {
  392.   position: absolute;
  393.   top: 50%;
  394.   left: 48%;
  395.   width: 2604px;
  396.   height: 1700px;
  397.   z-index: 9999;
  398.   /* border: 20px solid red;s */
  399.   /* border-color: rgba(0, 0, 0, 0) !important; */
  400.   transform: translate(-50%, -50%);
  401. }
  402. </style>

总结

在网上寻找适合自己的方案总是非常耗费精力和时间的。但是，我克服了这些困难，经过自己的研究和实践，最终终于做出来了自己想要的结果。

作为一名程序员，我觉得最重要的是保持不断探索、学习和尝试的精神。当我遇到问题时，我会尝试各种可能的解决方案，来找到最适合我自己的答案。这样不仅可以提升自己的技能水平，也可以增强自己的解决问题的能力。

通过自己的努力和研究，我创建了自己想要的效果，这让我非常自豪和满足。我希望我能够将这个过程记录下来，与其他人分享，让更多的人从中受益。

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】
推荐阅读
相关标签

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

  

闽ICP备14008679号