echarts 地图飞线实例

时间:2021-09-13
本文章向大家介绍echarts 地图飞线实例,主要包括echarts 地图飞线实例使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

效果图

demo实例:

<template>
  <div ref="main" style="width: 1920px; height: 1080px; border: 1px solid #ddd"></div>
</template>
<script>
import * as echarts from 'echarts'
import china from '@/assets/china.json'
export default {
  data() {
    return {}
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      var mapChart = this.$echarts.init(this.$refs.main)
      //这里注释掉的2个是通过遍历geojson文件中的所有点位绘制成飞线,一般实际应用中不会这样用
      // const coord = china.features.map(val => {
      //   // debugger
      //   return {
      //       name:val.properties.name,
      //       value:val.properties.cp
      //   }
      // })
      // coord.forEach((v,index)=> {
      //   debugger
      //     index > 0 && lines_coord.push({
      //         coords:[v.value,coord[0].value]
      //     })
      // })



      //所有点位的集合
      const coord =[
        /*
        *写法一:数组中的元素是以对象的形式,主要用到的其实也就关于点位的经纬度数组,就是下面的value,对象中可以其他key,
        *比如name等,这个就提示框tooltip的展示可能需要,如果不需要的话可以直接以写法二的方式就好了
        */
        // { name: '台湾', value: [121.509062, 25.044332]},
        // { name: '山西', value: [112.549248, 37.857014]},
        // {name:'河北', value: [114.502461, 38.045474]}

        /*
        *写法二:数组中的元素直接以点位的经纬度数组形式
        */
        //零、一角标的为终点,后面的为起点
        [121.509062, 25.044332],
        [101.509062, 25.044332], 
        [112.549248, 37.857014],
        [114.502461, 38.045474], 
        [102.549248, 37.857014],
        [124.502461, 42.045474]
      ]
      //所有飞线起点终点的集合
      const lines_coord = [
        /*
        * 写法一:标准写法对象:key:coords    value:经纬度的数组
        */
        {coords:[[112.549248, 37.857014],[121.509062, 25.044332]]},
        {coords:[[114.502461, 38.045474],[121.509062, 25.044332]]},
        {coords:[[102.549248, 37.857014],[101.509062, 25.044332]]},
        {coords:[[124.502461, 42.045474],[101.509062, 25.044332]]},

        /*
        * 写法二:数组形式,默认该点位的数组为key:coords 的值
        */
        // [[112.549248, 37.857014],[121.509062, 25.044332]],
        // [[114.502461, 38.045474], [121.509062, 25.044332]]
      ];

      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'
      mapChart.setOption({
                geo:{
                        name:'地图',
                        // type: 'map',  //地图种类、
                        map: 'china', //地图类型。
                        zlevel: 0,
                        show:true,
                        layoutCenter: ['50%', '50%'],
                        roam: false,
                        layoutSize: "90%",
                        zoom: 1,
                        label: {
                            normal: {
                                show: true,
                                textStyle:{
                                    fontSize:14,
                                    // 文字顔色
                                    color: '#43D0D6'
                                }
                            }
                        },
                        itemStyle: { //地图区域的多边形 图形样式。
                            emphasis:{ //高亮状态下的样试
                                label:{
                                    show:true,
                                },
                                areaColor: '#FFB800',
                            },
                            normal: {
                                areaColor: '#1b579c',
                                borderWidth: 1,//设置外层边框
                                borderColor:'#1ECEF4',                                        
                            }
                        },
                    },
                series: [
                    {
                        // effectScatter画散点【起点】
                        type:'effectScatter',
                        coordinateSystem: 'geo',
                        zlevel: 2,
                        symbolSize:6,
                        rippleEffect: {
                            period: 3, brushType: 'stroke', scale: 3
                        },
                        itemStyle:{
                            color:'#FFB800',
                            opacity:0.7
                        },
                        data:coord.slice(2)
                    },
                    {
                        // 画中心散点【终点】,这里是为了区分起点终点不同样式,所以分开写,如果二者样式一样那就直接合在一起写就好了
                        type:'effectScatter',
                        coordinateSystem: 'geo',
                        zlevel: 2,
                        symbolSize:10,
                        rippleEffect: {
                            period: 4, brushType: 'stroke', scale: 4
                        },
                        itemStyle:{
                            color:'#FF5722',
                            opacity:1
                        },
                        data:coord.slice(0,2)
                    },
                    //这里设了2条不同效果的飞线是为了讲他们叠加起来,满足飞机后面白色的喷气动画效果
                    {
                        type: 'lines',
                        zlevel: 1,
                        
                        effect: {
                            show: true,
                            period: 5,
                            trailLength: 0.7,
                            color: '#fff',
                            symbolSize: 3
                        },
                        lineStyle: {
                            normal: {
                                color: '#FFB800',
                                width: 0,
                                curveness: 0.2
                            }
                        },
                        data: lines_coord
                    },
                    {
                        // lines画线
                        type:'lines',
                        coordinateSystem:'geo',
                        zlevel: 2,   
                        symbol: ['none', 'arrow'],//设置飞线的起点终点处的绘制图形
                        symbolSize: 12,                       
                        effect: {
                            show: true,
                            period: 5, //箭头指向速度,值越小速度越快
                            trailLength: 0, //特效尾迹长度[0,1]值越大,尾迹越长重
                            symbol: planePath, //飞机图标
                            symbolSize: 15, //图标大小
                            color:'#01AAED'
                        },
                        itemStyle: {
                            normal: {
                                borderWidth: 1,
                                lineStyle: {
                                    type: 'solid',
                                    shadowBlur: 10
                                }
                            }
                        },
                        lineStyle: { //飞线的样式
                            normal: {width: 1.2, opacity: 0.6, curveness: 0.2, color: '#FFB800'}                            
                        },
                        data:lines_coord
                        
                    }
                ],
      })
    }
  },
}
</script>

<style scoped>
.test-title {
  background: #146402;
  color: #fff;
}
</style>

原文地址:https://www.cnblogs.com/YiFeng-Liu/p/15261707.html