首页 前端知识 Echarts实现3d 地图实现飞线效果

Echarts实现3d 地图实现飞线效果

2024-06-11 09:06:41 前端知识 前端哥 679 625 我要收藏

Echarts实现3d 地图实现飞线效果

lind3d 飞线效果图

注意:重点关注data中的数据格式

在lines3D中symbol不能设置指定样式,echarts官网也没有这个参数,所以对于lines3D飞线如何实现飞机航线. 补充:飞机效果链接

    {
              type: "lines3D",
              coordinateSystem: "geo3D",
              zlevel: 10, //设置这个才会有轨迹线的小尾巴
              polyline: false,
              effect: {
                show: true,
                period: 8, 箭头指向速度,值越小速度越快
                trailLength: this.option.line3DtrailLength||0.1,//[0,1] // 尾迹的长度,范围从 0 到 1,为线条长度的百分比。特效尾迹长度[0,1]值越大,尾迹越长重
                opacity: this.option.line3DOpacity || 12, // 尾迹线条透明度
                trailWidth: this.option.line3DtrailWidth ||10, //宽度
                trailColor: this.option.line3DtrailColor ||"#d80cfc",
                color: "#38bd98",//移动点的颜色
                constantSpeed: this.option.line3DconstantSpeed ||30,//速度
                //symbol: 'arrow', //箭头图标(无用)
                //symbolSize:30, 图标大小
                // symbol: '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',//箭头图标
                // symbol: "amarkLinesow",
                // symbol:['circle', 'arrow'],
              },
              //data必须存在才不会报
              //data: this.lines3DData,
              blendMode: "lighter",
              data: [
                {
                  coords: [
                    [120.864608, 32.016212, 7],
                    [117.139998, 30.377631, 1],
                  ],
                  lineStyle: {
                    color: '#ee7f9d',
                    width: 3
                  },
                },
                {
                  coords: [
                    [117.184811, 34.261792, 1],
                    [117.139998, 30.377631, 1],
                  ],
                  lineStyle: {
                    color: '#efe389',
                    width: 3
                  }
                },
                {
                  coords: [
                    [120.139998, 33.377631, 1],
                    [117.139998, 30.377631, 1],
                  ],
                  lineStyle: {
                    color: '#a4efc1',
                    width: 3
                  }
                },
                {
                  coords: [
                    [118.767413, 32.041544, 1],
                    [117.139998, 30.377631, 1],
                  ],
                  lineStyle: {
                    color: '#a4efc1',
                    width: 3
                  }
                },],

            },
转载请注明出处或者链接地址:https://www.qianduange.cn//article/11908.html
标签
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!