fix:小车打点动画完善
This commit is contained in:
		
							parent
							
								
									8c54ee60e0
								
							
						
					
					
						commit
						6503d7f09d
					
				| @ -2,7 +2,7 @@ | ||||
|  * @Author: SunTao 328867980@qq.com | ||||
|  * @Date: 2024-10-17 11:34:00 | ||||
|  * @LastEditors: SunTao 328867980@qq.com | ||||
|  * @LastEditTime: 2024-11-29 17:41:31 | ||||
|  * @LastEditTime: 2024-12-02 10:24:07 | ||||
|  * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue | ||||
|  * @Description: 大屏首页 | ||||
| --> | ||||
| @ -1232,23 +1232,45 @@ export default { | ||||
|           if (!this.carMapPointSource) { | ||||
|             this.drawCarMapPoint(item.data); | ||||
|           } else { | ||||
|             console.log(item.data, "location"); | ||||
|             // 获取小车图层的features数组 | ||||
|             const [features] = this.carMapPointSource.getFeatures(); | ||||
|             // 修改geometry定位 | ||||
|             features.set("geometry", new Point(item.data.location)); | ||||
|             features.setStyle([ | ||||
|               new Style({ | ||||
|                 image: new Icon({ | ||||
|                   crossOrigin: "anonymous", | ||||
|                   src: logo, | ||||
|                   // 图标缩放比例 | ||||
|                   scale: 0.03, | ||||
|                   // 将角度转换为弧度,并除以180*π | ||||
|                   rotation: (item.data.direction-90) * (Math.PI / 180), | ||||
|             // 获取当前位置和目标位置 | ||||
|             const currentLocation = this.carMapPointSource | ||||
|               .getFeatures()[0] | ||||
|               .getGeometry() | ||||
|               .getCoordinates(); | ||||
|             const targetLocation = item.data.location; | ||||
|             // 计算两点之间的差值 | ||||
|             const dx = (targetLocation[0] - currentLocation[0]) / 100; | ||||
|             const dy = (targetLocation[1] - currentLocation[1]) / 100; | ||||
|             // 设置计数器 | ||||
|             let count = 0; | ||||
|             // 创建定时器,每10ms移动一次,总共移动100次,约1秒完成 | ||||
|             const timer = setInterval(() => { | ||||
|               count++; | ||||
|               if (count >= 100) { | ||||
|                 clearInterval(timer); | ||||
|                 return; | ||||
|               } | ||||
| 
 | ||||
|               // 计算当前帧的位置 | ||||
|               const x = currentLocation[0] + dx * count; | ||||
|               const y = currentLocation[1] + dy * count; | ||||
| 
 | ||||
|               // 更新小车位置 | ||||
|               const [features] = this.carMapPointSource.getFeatures(); | ||||
|               features.setGeometry(new Point([x, y])); | ||||
|               features.setStyle([ | ||||
|                 new Style({ | ||||
|                   image: new Icon({ | ||||
|                     crossOrigin: "anonymous", | ||||
|                     src: logo, | ||||
|                     // 图标缩放比例 | ||||
|                     scale: 0.03, | ||||
|                     // 将角度转换为弧度,并除以180*π | ||||
|                     rotation: (item.data.direction - 90) * (Math.PI / 180), | ||||
|                   }), | ||||
|                 }), | ||||
|               }), | ||||
|             ]); | ||||
|               ]); | ||||
|             }, 10); | ||||
|           } | ||||
|         } | ||||
|       }); | ||||
| @ -1260,7 +1282,6 @@ export default { | ||||
|      * @return {void} | ||||
|      */ | ||||
|     drawCarMapPoint(item) { | ||||
|       console.log(item, "小车点位"); | ||||
|       const features = []; | ||||
|       const feature = new Feature({ | ||||
|         geometry: new Point(item.location), | ||||
|  | ||||
| @ -208,7 +208,7 @@ | ||||
|           > | ||||
|             <template slot-scope="scope"> | ||||
|               <el-button | ||||
|                 v-if="activeName === '已生成'" | ||||
|                 v-if="activeName !== '未生成'" | ||||
|                 size="mini" | ||||
|                 type="text" | ||||
|                 icon="el-icon-view" | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user