airport-qingdao-vue3/README.md at 196240b21f46b7a69f02422ddc76c899ca2a269d

renna 196240b21f 修改平台概览样式

2025-07-14 11:05:40 +08:00

4.7 KiB

Raw Blame History

前端运行

# 克隆项目
git clone https://github.com/yangzongzhuan/RuoYi-Vue3.git

# 进入项目目录
cd RuoYi-Vue3

# 安装依赖
yarn --registry=https://registry.npmmirror.com

# 启动服务
yarn dev

# 构建测试环境 yarn build:stage
# 构建生产环境 yarn build:prod
# 前端访问地址 http://localhost:80

未完成任务： 1.左侧菜单栏：刷新状态不保存 2.左侧二级菜单选中的时候一级菜单无背景色超图地图开发使用基础 1、前期准备工作熟悉超图地图服务以及基本的操作。 2、熟悉Openlayers以及Leaflet相关操作具体代码操作： 1、定义一个地图渲染承载框

2、定义一个地图实例 map: null, 定义一个渲染位置图层 layer: null 3、初始化地图 // 初始化地图 initMap() { ol.proj.setProj4(proj4); proj4.defs("EPSG:4528","+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=40500000 +y_0=0 +ellps=GRS80 +units=m +no_defs"); var projection = new ol.proj.Projection({ code: 'EPSG:4528',// 地图坐标系 }); this.map = new ol.Map({ target: 'replay_map',//第一步设置的地图承载框 controls: ol.control.defaults({ attribution: false, rotate: false }), view: new ol.View({ center: [40507885.133754 , 4025694.476392],//地图中心点 zoom: 12,//初始时的缩放比例 projection: projection,//坐标系等的设置 rotation: 0.3 }), //图层，这个是后期所有自定义的展示层 layers: [ new ol.layer.Tile({ source: new ol.source.TileSuperMapRest({ crossOrigin: 'anonymous', url: this.$map_url, extent: [40347872.25,2703739.74,40599933.05,5912395.20] }), projection: projection, }) ] }); // 添加位置图层 this.layer = new ol.layer.Vector({ source: new ol.source.Vector(), zIndex: 2, }); //把自定义展示的图层放到地图中 this.map.addLayer(this.layer); }, 3、图层自定义内容 //创建一个Feature const feature = new ol.Feature({ //以一个点作为示例，可以是点、线、面 geometry: new ol.geom.Point([item.longitude, item.latitude]), }); //定义样式 feature.setStyle(() => { //自定义样式 const style = []; style.push(this.getStyle(type, item)); return style; } //这个layer就是已开始定义的渲染图层 this.layer.getSource().addFeature(feature);

// 得到style实例 getStyle(type, item, status) { return new ol.style.Style({ image: new ol.style.Icon({ src: getImage(type, item, status), rotateWithView: true, scale: this.getScale(type), rotation: 0, }), zIndex: 3, text: new ol.style.Text({ font: '12px 微软雅黑', text: this.getText(type, item), offsetY: -15, fill: new ol.style.Fill({ color: '#515a71', }), }), }); },

当前项目用于青岛机场正式版

/** 获取用户列表 */ function getUserOptions() {

getRoleUsers(3).then(res => { userOptions.value = res.rows;

}); }

使用SockJS + STOMP协议滑出蓝色滑入黄色

20250711关键改进说明

平滑动画核心系统动画循环引擎：使用 requestAnimationFrame 创建流畅的60FPS动画循环运动预测算法：记录车辆移动历史轨迹（最多3个点）计算运动方向向量用于预测后续位置物理引擎：基于真实速度计算每帧最大移动距离方向插值时考虑车速影响（车速越高转向越慢）
新数据结构 vehicleAnimations：存储所有平滑动画所需数据当前位置和方向目标位置和方向最后更新时间预测向量 vehicleMotionHistory：存储最近位置点用于轨迹预测
增强的位置更新逻辑收到新位置时记录历史点计算历史点间的移动向量设置目标位置时包含预测偏移量当超过300ms没有新数据时使用预测向量继续移动
性能优化距离阈值检查（0.1米）避免不必要的计算角度归一化处理0-360度边界情况使用缓动函数使运动曲线更自然
暴露控制接口通过defineExpose提供了三个新方法：

startVehicleSmoothing()：启动平滑动画 stopVehicleSmoothing()：停止平滑动画 resetVehicleAnimations()：重置所有动画数据使用建议将此组件整合到现有项目中调用startVehicleSmoothing()启动平滑效果处理WebSocket消息时继续调用updateVehiclePosition() 当组件隐藏时调用stopVehicleSmoothing()节省资源

4.7 KiB Raw Blame History Unescape Escape

前端运行

4.7 KiB

Raw Blame History