一根飞线的故事-SVG篇

最新推荐文章于 2025-02-05 08:15:27 发布
原创 最新推荐文章于 2025-02-05 08:15:27 发布 · 497 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#大数据 #数据可视化 #SVG

本文详细介绍了如何使用SVG的PathElement来创建飞线动效。通过SVGPathElement.getTotalLength和SVGPathElement.getPointAtLength方法获取路径长度和坐标点，结合D3库实现飞线的动态绘制。文章还探讨了性能优化，如利用贝塞尔曲线和过渡效果减少元素数量，以及使用SVG滤镜提升视觉效果。

作者|数澜UED团队

没有飞线的地图就像一个发际线上移的中年人一样平淡无奇。 —— By 胖子

每年春运和双十一的统计图都因为有飞线动效才更加吸引眼球，今天要为大家带来一根漂亮飞线要用什么姿势生成才能。

SVG

本篇是主讲SVG来绘制飞线的，所以强大的SVG必定能完成我们绘制飞线效果的各种需求。首先我先为各位介绍下完成这根线需要用到的一些小知识点。

Path元素

path元素
是SVG基本形状中最强大的一个，它不仅能创建其他基本形状，还能创建更多其他形状。这里我们只需要用它来绘制一条曲线。

首先我们先创建好这根曲(tou)线(fa)。

OK，这根头发我们已经在屏幕上放好了，如果你将path元素的曲线无限放大会发现，其实它是由非常多的坐标点相互连接组成的。这个时候脑洞放一下，如果我们能获取到这些点是不是就是获取了线的绘制轨迹。就可以逐帧绘制飞线了动效了。


那要如何来获取和使用这些坐标点呢？

勤奋的查阅MDN，我发现这个问题强大的SVG已经帮我们解决了，可以使用getTotalLength和getPointAtLength这两个方法来搞定。

[SVGPathElement.getTotalLength](https://developer.mozilla.org/en-US/docs/Web/API/SVGPathElement/getTotalLength

但因为SVG中绘制的都是矢量图，所以path元素不存在是由若干个点构成的，所以调用该方法会返回该path元素从起始点到终点的总长度（浮点数）。

尽管和预期有所差别，但搭配上下面的getPointAtLength方法我们依然能完成之前预想的实现方法。

SVGPathElement.getPointAtLength

调用该方法会根据传入到起点的距离值来计算返回对应的path元素坐标点的位置x、y值。

通过组合使用这两方法，我们可以自己定义这段轨迹上有有多少个坐标点，并且可以获取对应这些点的坐标值。

下面我们使用D3来操作这些DOM节点获取对应的节点数据信息

首先我们需要先定义好飞线轨迹是由多少个点构成的：

const pointNum = 1500

接下来我们可以通过方法将获取到的轨迹总长度进行平分得到单位长度unit，然后再调用getPointAtLength获取对应距离的坐标值。

const pointNum = 1500
const path = d3.select('#line')
const pathline = path.node()
const totalLength = pathline.getTotalLength()
const points = []

const unit = totalLength / pointNum

for (let i = 0; i <= pointNum; i += 1) {
   
   
  points.push(pathline.getPointAtLength(i * unit))
}

接下来我们就可以通过这些数据绘制飞线动效了！

接下来我们就可以通过这些数据绘制飞线动效了！

接下来我们就可以通过这些数据绘制飞线动效了！

重要的话我们来强调三遍。

飞线动效-1

如下图，其实实现飞线具体头部深、尾部浅效果可以通过绘制若干透明度逐渐递减的圆来达到。（Echarts飞线使用类似思路）

接下来所需要做的就是让上面的飞线像下图的矩形一样，让它按照对应的轨迹路线来进行移动。

但由于飞线是由若干个圆重叠组成的，所以不能像矩形一样只需要控制一个元素的x、y值就搞定运动行为。尤其是如下图这样的曲线运动的情况。

为此我们需要声明一个飞线类，首先需要定义飞线的长度、样式速度等特性。

由于之前已经声明好该路径轨迹拆分成多少段了，所以在此我们取个巧定义飞线的长度是其中lineLen段的长度，设定速度为每次渲染移动speed段。

class FlyLine {
   
   
  totalNum = 1500
  lineLen = 150
  speed = 15
  radius = 2.5
  fill = 'rgb(255, 200, 65)'
  circles = []
  constructor(){
   
   
    // percent的用处会在后面体现
    this.percent = this.lineLen
  }
}

上面的说明看不懂？灵魂画手图片解析

定义好飞线的特性变量之后，接下来我们可以绘制具体的飞线了。

因为飞线是若干circle元素堆叠成的，所以我们在此提炼出一个公有的画圆方法：


                

                
                
        

    



  


        

            

                      
                        最低0.47元/天 解锁文章
                          
                      
            

        


    



                



	

		

			

				
					
D3.js绘制飞线总结

				
			

			

				

					You_Ta的博客
				

				

					07-25
					
					4169
					
				

			

		

		

			
				
项目中多次遇到飞线的需求，故此抽个时间做个总结。
参考文章 :

svg之path详解
地图与飞线
一根飞线的故事-SVG篇




			
		

	



                

            
              



	

		

			

				
					
d3.js-V3制作简单的飞线图

				
			

			

				

					Encore47的博客
				

				

					01-31
					
					2856
					
				

			

		

		

			
				
d3.js制作简单的飞线图
简介
期末的一个小作业，放上来分享一下。若有不懂的地方欢迎在评论区提问~
最终效果图：

使用工具

d3.js (V3版本)

步骤简介

准备好数据。
绘制一个中国地图。
绘制飞线。

数据准备
数据来源
本次作业采用的是上海外国语大学2019年毕业生就业质量报告中的部分数据。
pdf中的数据如下：

代码中使用的数据如下：
//飞线的起始点数据
const dataset = [
    // {
    //     start: [121.4648, 31.2891],

			
		

	



              


  
              

                


	

		

			

				
					
svg path飞线动画

				
			

			

				

					m0_37777005的博客
				

				

					06-19
					
					1609
					
				

			

		

		

			
				
https://www.jianshu.com/p/69dd56c28248
https://zhuanlan.zhihu.com/p/67031777



			
		

	





	

		

			

				
					
svg绘制蝌蚪状飞线

				
			

			

				

					X01动力装甲的专栏
				

				

					10-12
					
					962
					
				

			

		

		

			
				
svg绘制蝌蚪状飞线
效果如图：


飞线效果在可视化中很常见，有了它整个屏幕好像添加了一个小精灵一样充满活力。



			
		

	



		

			
		



	

		

			

				
					
flyLine:三个webgl flyLine;投放飞线攻击线迁移线拓扑图动画线

				
			

			

				

					03-15
				

			

		

		

			
				
描绘飞线
使用飞线
let _Fly = new initFly ( {
    texture : "./xxx.png" //飞线贴图  如果不需要则不传递
} ) ; //初始化方法
//添加飞线
let flyMesh = _Fly . addFly ( {
    color : `rgba(255,0,0,1)` ,
    curve : [ ] , //飞线的路径  [{x,y,z},{x,y,z},{x,y,z}]  数组越大 飞线越密
    width : 9 , //飞线的宽度 大小
    length : 150 , //飞线的长度 
    speed : 1 , //速度 越大越快
    repeat : 1 //重复次数  1-Infinity
} )
scene . add ( flyMesh ) ;
删除
*重复循环次数完成自动删除
_Fly . r

			
		

	





	

		

			

				
					
飞线

				
			

			

				

					Dextrad_ihacker的博客
				

				

					11-15
					
					820
					
				

			

		

		

			
				
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{

			
		

	





	

		

			

				
					
绘制飞线

				
			

			

				

					weixin_45846862的博客
				

				

					12-31
					
					377
					
				

			

		

		

			
				
解析
 <path> 标签应该算是 SVG 中最为强大的标签了，各种图形都可以用他绘制。

本文使用 path 标签的贝塞尔曲线 Q 指令绘制弧线。

用法
<path d="M30 90 Q115 139 200 90"></path>  //M30 90 起点   Q115 139弧度  200 90终点

path 标签常用指令：
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = 

			
		

	





	

		

			

				
					
【Arduino开发入门必看】：从零搭建第一个LED闪烁项目的5大核心步骤

				
			

			

				

					
				

			

		

		

			
				
!...# 1. Arduino开发环境搭建与基础认知  Arduino作为开源电子原型平台的代表，广泛应用于物联网、智能硬件及创客项目中。...从软件安装到首个程序上传，每一步都至关重要，确保软硬件协同工作，是迈向嵌入式开发的第一

			
		

	





	

		

			

				
					
大屏数据可视化——DataV平台下的零售数据驾驶舱大屏数据可视化

				
			

			

				

					啊丢_的博客
				

				

					06-14
					
					4275
					
				

			

		

		

			
				
DataV组件库基于Vue （React版 (opens new window)），主要用于构建大屏数据展示页面即数据可视化。边框颜色属性属性说明类型可选值默认值color自定义颜色string[]背景色string1.color属性支持配置两个颜色，一主一副。2.颜色类型可以为颜色关键字、十六进制色、RGB及RGBA。本项目综合性的练习了关于使用DataV组件实现可视化的流程，从项目的初始化搭建到最后的成品。具体操作中使用了DataV中的圆环图组件、轮播图、轮播表、水位图。

			
		

	





	

		

			

				
					
svg网络拓扑

				
			

			

				

					12-24
				

			

		

		

			
				
这是一个前端可视化工程，包括网络拓扑、地理视图、动态图表。以上属于SVG技术。还包括rpg游戏角色AI寻路、数字雨特效等。

			
		

	





	

		

			

				
					
SVG 画动态线 实例

				
			

			

				

					04-03
				

			

		

		

			
				
NULL
博文链接：https://zhousheng193.iteye.com/blog/1461761

			
		

	





	

		

			

				
					
使用CSS3+SVG绘制沿固定路径飞行的纸飞机

				
			

			

				

					王铁柱666的博客
				

				

					02-05
					
					627
					
				

			

		

		

			
				
创建一个沿固定路径飞行的纸飞机效果，我们可以结合CSS3动画和SVG路径动画。

			
		

	





	

		

			

				
					
SVG之旅：线条之美，玩转SVG线条动画

				
			

			

				

					W3cplus
				

				

					01-18
					
					3339
					
				

			

		

		

			
				
在上一节的《SVG线条动画实现原理》一文中，了解了SVG中线动画是怎么做的。在这篇文章中，了解了怎么借助Sketch这样的制作软件绘制SVG的路径，然后借助于SVG的stroke-dasharray和stroke-dashoffset值设置为路径的长度（最好是大于其长度，可以通过.getTotalLength()获取到路径的长度），在@keframes中的100%处设置stroke-dashoff

			
		

	





	

		

			

				
					
打造Github首页的动态飞线效果

				
			

			

				

					luoawai的博客
				

				

					12-10
					
					862
					
				

			

		

		

			
				
打造Github首页的动态飞线的效果

			
		

	





	

		

			

				
					
svg线路图-线路动态流动效果

				
			

			

				

					优快云博客专家，系统架构师，有合作、疑惑请私信博主。
				

				

					08-11
					
					6720
					
				

			

		

		

			
				
svg线路图-线路动态流动效果，线路图中线路动态效果，线路动态流动效果，支持多样式管理。先用svg绘制，线路图，画出几条线路，然后根据线路的起始坐标，添加动态效果，出现电流流动效果。

			
		

	





	

		

			

				
					
svg流向动效-svg虚线流动-svg管道流动

				
			

			

				

					buzhidjiaosha的博客
				

				

					04-03
					
					3989
					
				

			

		

		

			
				
svg流虚线动效果，不规则svg管道流动效果，svg自适应流向动效

			
		

	





	

		

			

				
					
D3JS 实现绘制折线效果（svg）

				
			

			

				

					Turn_to_empty的博客
				

				

					04-11
					
					1792
					
				

			

		

		

			
				
D3JS 实现折线画笔效果：通过按下鼠标左键开始绘制，移动鼠标更新路径坐标预览效果，再次点击后则将鼠标当前位置添加进路径集，移动鼠标更新路径坐标预览效果，双击鼠标左键则结束绘制；通过画布的平移与缩放不影响画笔的绘制效果。

			
		

	





	

		

			

				
					
ETL调度系统及常见工具对比：azkaban、oozie、数栖云  |  数澜科技

				
			

			

				

					Dtwave_的博客
				

				

					11-21
					
					3289
					
				

			

		

		

			
				
调度系统对于复杂 ETL 工作的重要性相信每位同学都有所感知，今天我们就拿常见的几种调度系统工具为大家做一个小测评！方便大家找到更适合自己的工具。

			
		

	





	

		

			

				
					
Polyline flat=true 使用mapv-three 画一条飞线

					
最新发布

				
			

			

				

					09-20
				

			

		

		

			
				
<think>
我们正在使用mapv-three库，并且需要在Polyline的flat属性设置为true的情况下绘制一条飞线。
 根据引用[1]和[2]的信息，我们知道mapv是一个地理信息可视化库，而mapv-three可能是其结合Three.js的3D可视化扩展。
 用户提到的“flat属性设置为true”意味着我们希望飞线是平的（即在一个水平面上），而不是跟随地球曲率。

 在mapv-three中，绘制飞线通常使用Polyline类，并且通过设置flat属性来控制是否在3D空间中展平（忽略地球曲率）。

 由于没有直接提供mapv-three中Polyline的详细API，但根据常见的3D地理可视化库的使用经验，我们可以推测：
 1. 创建Polyline对象时，需要指定一系列的坐标点（经纬度）。
 2. 设置flat属性为true，表示飞线将在一个平面上（通常是固定高度）绘制，而不是沿着地球表面。

 实现步骤可能如下：
 1. 初始化地图和mapv-three图层。
 2. 定义飞线的起点和终点（经纬度坐标）。
 3. 创建Polyline对象，并设置flat为true，同时可能还需要设置高度（altitude）或者样式（如颜色、线宽等）。
 4. 将Polyline对象添加到图层中。

 注意：由于mapv-three的API可能不稳定（如引用[1]所述），以下代码基于常见用法推测，具体请参考最新官方文档。

 示例代码结构：

 ```javascript
 // 假设我们已经有了百度地图实例（map）和mapvthree图层实例（layer）

 // 飞线的起点和终点坐标（经纬度）
 var startPoint = [116.392394, 39.904211]; // 起点
 var endPoint = [121.475941, 31.227203];   // 终点

 // 创建飞线数据
 var data = [{
     geometry: {
         type: 'LineString',
         coordinates: [startPoint, endPoint]
     },
     properties: {
         // 设置飞线的样式
         color: 'rgba(50, 240, 250, 0.8)', // 颜色
         altitude: 10000,                  // 高度（单位：米）
         // 其他样式...
     }
 }];

 // 创建Polyline图层选项
 var options = {
     lineWidth: 4,       // 线宽
     flat: true,         // 关键：设置为true，表示在平面上绘制（忽略地球曲率）
     // 其他选项...
 };

 // 创建Polyline图层
 var polylineLayer = new mapvthree.PolylineLayer(data, options);

 // 将图层添加到mapvthree场景中
 layer.add(polylineLayer);
 ```

 注意：以上代码仅为示例，实际使用时需要根据mapv-three的具体API进行调整。

 如果用户已经设置了flat=true，但飞线仍然不是平的，可能需要检查：
 - 坐标点是否提供了足够的高度（altitude）？在平面上绘制时，通常需要给每个点设置高度（或者统一高度）。
 - 是否需要在数据中为每个点单独设置高度？例如，上面的例子中我们在properties里设置了altitude，但有些库可能需要在geometry的坐标中提供三维坐标（即[经度, 纬度, 高度]）。

 另外，根据引用[2]，我们加载的是百度地图（WebGL版本），并且使用了mapvthree，所以需要确保正确引入了mapvthree库。

 如果用户需要更具体的帮助，建议查阅mapv-three的官方示例或文档，特别是关于PolylineLayer的部分。

 生成相关问题：

 1. 在mapv-three中，除了Polyline，还有哪些方法可以绘制飞线？
 2. 如何调整飞线的动画效果（如流动效果）？
 3. 在设置flat=true的情况下，如何控制飞线的高度？
 4. mapv-three中如何为飞线添加点击事件？
</think>
基于您的问题，结合Mapv Three库的特性，以下是在`flat=true`模式下绘制飞线的完整实现方法：

### 实现步骤
1. **初始化地图与Mapv Three场景**
```javascript
// 加载百度地图WebGL版本
const map = new BMapGL.Map('container', { enableWebGL: true });
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);

// 初始化MapvThree场景
const viewer = new mapvthree.Viewer(map, {
    tilt: 60,  // 俯视角增强3D效果
    animation: true  // 启用动画
});
```

2. **配置飞线数据与样式**
```javascript
const flyLineData = [
    {
        from: [116.40, 39.91], // 起点经纬度
        to: [121.48, 31.23],   // 终点经纬度
        properties: {
            color: '#ff0000',  // 飞线颜色
            speed: 2           // 粒子运动速度
        }
    }
];

const options = {
    style: 'fly',              // 飞线类型
    size: 5,                   // 粒子大小
    texture: 'arrow.png',      // 粒子纹理(可选)
    flat: true,                // 关键设置：平面模式
    height: 5000,              // 平面高度(米)
    animationType: 'flow',     // 粒子流动画
    depthTest: false           // 禁用深度检测确保始终可见
};
```

3. **创建飞线图层**
```javascript
const flyLineLayer = new mapvthree.FlyLineLayer(
    viewer,
    flyLineData,
    options
);
```

### 关键参数说明
1. **`flat: true`**  
   - 强制飞线在固定高度平面渲染（忽略地球曲率）
   - 需配合`height`参数设置平面海拔高度
   - 效果等价于二维平面上的直线路径

2. **注意事项**  
   - 当开启`flat`模式时，建议同时设置`depthTest: false`避免遮挡问题
   - 平面高度(`height`)需大于地图最高建筑海拔
   - 飞线起点/终点坐标需使用经纬度数组格式`[lng, lat]`

### 效果优化建议
1. 添加轨迹动画：
```javascript
options.trailLength = 0.8;  // 粒子拖尾长度(0-1)
options.uvScale = [0.1, 1]; // 纹理缩放比例
```

2. 动态数据更新：
```javascript
// 实时更新飞线终点
flyLineLayer.updateData([{
    from: [116.40, 39.91],
    to: [dynamicLng, dynamicLat] // 动态坐标
}]);
```

> **重要提示**：Mapv Three的`FlyLineLayer`在平面模式下实际是通过正交投影模拟二维平面效果，粒子系统会沿直线路径运动[^1][^2]。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

            还能输入1000个字符
          

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值