164 lines
4.7 KiB
Markdown
164 lines
4.7 KiB
Markdown
|
||
|
||
## 前端运行
|
||
|
||
```bash
|
||
# 克隆项目
|
||
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、定义一个地图渲染承载框<div id="replay_map" />
|
||
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关键改进说明
|
||
1. 平滑动画核心系统
|
||
动画循环引擎：使用 requestAnimationFrame 创建流畅的60FPS动画循环
|
||
运动预测算法：
|
||
记录车辆移动历史轨迹（最多3个点）
|
||
计算运动方向向量用于预测后续位置
|
||
物理引擎：
|
||
基于真实速度计算每帧最大移动距离
|
||
方向插值时考虑车速影响（车速越高转向越慢）
|
||
2. 新数据结构
|
||
vehicleAnimations：存储所有平滑动画所需数据
|
||
当前位置和方向
|
||
目标位置和方向
|
||
最后更新时间
|
||
预测向量
|
||
vehicleMotionHistory：存储最近位置点用于轨迹预测
|
||
3. 增强的位置更新逻辑
|
||
收到新位置时记录历史点
|
||
计算历史点间的移动向量
|
||
设置目标位置时包含预测偏移量
|
||
当超过300ms没有新数据时使用预测向量继续移动
|
||
4. 性能优化
|
||
距离阈值检查（0.1米）避免不必要的计算
|
||
角度归一化处理0-360度边界情况
|
||
使用缓动函数使运动曲线更自然
|
||
5. 暴露控制接口
|
||
通过defineExpose提供了三个新方法：
|
||
|
||
startVehicleSmoothing()：启动平滑动画
|
||
stopVehicleSmoothing()：停止平滑动画
|
||
resetVehicleAnimations()：重置所有动画数据
|
||
使用建议
|
||
将此组件整合到现有项目中
|
||
调用startVehicleSmoothing()启动平滑效果
|
||
处理WebSocket消息时继续调用updateVehiclePosition()
|
||
当组件隐藏时调用stopVehicleSmoothing()节省资源 |