diff --git a/src/assets/images/bottom-box.png b/src/assets/images/bottom-box.png new file mode 100644 index 0000000..5b2fd3d Binary files /dev/null and b/src/assets/images/bottom-box.png differ diff --git a/src/assets/images/left-bg.png b/src/assets/images/left-bg.png new file mode 100644 index 0000000..db3461f Binary files /dev/null and b/src/assets/images/left-bg.png differ diff --git a/src/assets/images/map-title.png b/src/assets/images/map-title.png new file mode 100644 index 0000000..0eaf1af Binary files /dev/null and b/src/assets/images/map-title.png differ diff --git a/src/assets/images/right-bg.png b/src/assets/images/right-bg.png new file mode 100644 index 0000000..3d3cd3b Binary files /dev/null and b/src/assets/images/right-bg.png differ diff --git a/src/assets/images/top-box.png b/src/assets/images/top-box.png new file mode 100644 index 0000000..c7a273d Binary files /dev/null and b/src/assets/images/top-box.png differ diff --git a/src/assets/styles/font.css b/src/assets/styles/font.css new file mode 100644 index 0000000..6104a36 --- /dev/null +++ b/src/assets/styles/font.css @@ -0,0 +1,4 @@ +@font-face { + font-family: "YouSheBiaoTiHei"; + src: url("./font/YouSheBiaoTiHei.ttf"); +} \ No newline at end of file diff --git a/src/assets/styles/font/YouSheBiaoTiHei.ttf b/src/assets/styles/font/YouSheBiaoTiHei.ttf new file mode 100644 index 0000000..3729151 Binary files /dev/null and b/src/assets/styles/font/YouSheBiaoTiHei.ttf differ diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 36e3a8f..816aec6 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -6,6 +6,7 @@ @import './btn.scss'; @import './ruoyi.scss'; @import './marsMap.scss'; +@import './font.css'; body { width: 100%; diff --git a/src/views/components/map/container.vue b/src/views/components/map/container.vue index 570e7d0..d19c821 100644 --- a/src/views/components/map/container.vue +++ b/src/views/components/map/container.vue @@ -1,31 +1,104 @@ - - - - - \ No newline at end of file +} + diff --git a/src/views/components/map/marsMap.vue b/src/views/components/map/marsMap.vue index 36a3562..4883b3d 100644 --- a/src/views/components/map/marsMap.vue +++ b/src/views/components/map/marsMap.vue @@ -17,15 +17,9 @@ let options = { }, showSun: false, showMoon: false, - showSkyBox: false, - showSkyAtmosphere: false, + showSkyBox: true, + showSkyAtmosphere: true, fog: false, - // backgroundColor: "#363635", // 天空背景色 - globe: { - baseColor: "#363635", // 地球地面背景色 - showGroundAtmosphere: false, - enableLighting: false, - }, clock: { currentTime: "2023-11-01 12:00:00", // 固定光照时间 }, @@ -62,8 +56,39 @@ let options = { }, ], }; +const params = reactive({ + lat: 31.162232, + lng: 120.734077, + altitude: 3000, + heading: 0, //当前朝向 + pitch: 0, //保当前俯仰角 + roll: 0, //当前翻滚角 + correction: 1, + speed: 800, + +}); +const EARTH_RADIUS = 6371000; +let isUav = true +const DIRECTION = { + UP: "w", + DOWN: "s", + LEFT: "a", + RIGHT: "d", + SPEED_UP: "q", + SPEED_DOWN: "e", +}; +const keyboardMap = { + [DIRECTION.UP]: false, + [DIRECTION.DOWN]: false, + [DIRECTION.LEFT]: false, + [DIRECTION.RIGHT]: false, + [DIRECTION.SPEED_UP]: false, + [DIRECTION.SPEED_DOWN]: false, +}; let map = null; +let list = []; +let uav = null const mapLayer = {}; const mapLoad = (mapInstance) => { map = mapInstance; @@ -73,38 +98,152 @@ const mapLoad = (mapInstance) => { }); map.addLayer(mapLayer.markerLayer); //创建无人机固定巡航 - initUav() - // 绘制停机场矩形 - initRectangle(); - initMarker(); + // initUav() + // // 绘制停机场矩形 + // initRectangle(); + // initMarker(); + + + boostrapUav() }; -const initUav = ()=>{ - let list = [] - PointJson.map(item=>{ - list.push(item.wz.split(",").map(Number)) - }) - const uav = new mars3d.graphic.Route({ +const boostrapUav = () => { + // initUav() + // onAddKeyboardListener() + // const renderer = () => { + // onAdjustParams(); + // onAdjustAttitude(); + // requestAnimationFrame(renderer); + // }; + // renderer(); +} + +//开启按键监听 +const onAddKeyboardListener = () => { + document.addEventListener("keydown", (e) => { + if (Object.keys(keyboardMap).includes(e.key)) { + keyboardMap[e.key] = true; + } + }); + document.addEventListener("keyup", (e) => { + if (Object.keys(keyboardMap).includes(e.key)) { + keyboardMap[e.key] = false; + } + }); +}; + +//开启飞行参数调整 +const onAdjustParams = () => { + if (keyboardMap[DIRECTION.SPEED_UP]) { + params.speed += 100; + } + if (keyboardMap[DIRECTION.SPEED_DOWN]) { + if (params.speed >= 500) { + params.speed -= 100; + } + } + //机体爬升 + if (keyboardMap[DIRECTION.UP] && params.pitch <= 0.3) { + params.pitch += 0.005; + if (params.pitch > 0) { + const { speed, pitch } = params; + const temp = (params.speed / 60 / 60 / 60) * 110; + //1经纬度约等于110km + params.altitude += temp * Math.sin(pitch); + } + } + //机体俯冲 + if (keyboardMap[DIRECTION.DOWN] && params.pitch >= -0.3) { + params.pitch -= 0.006; + if (params.pitch < 0) { + const { speed, pitch } = params; + //1经纬度约等于110km + const temp = (params.speed / 60 / 60 / 60) * 110; + params.altitude += temp * Math.sin(pitch); + } + } + //机体左转 + if (keyboardMap[DIRECTION.LEFT]) { + params.heading -= 0.115; + if (params.roll > -10) { + params.roll -= 0.115; + } + } + //机体右转 + if (keyboardMap[DIRECTION.RIGHT]) { + params.heading += 0.115; + if (params.roll < 10) { + params.roll += 0.115; + } + + } + const { heading, pitch, roll } = params; + const { abs, cos } = Math; + params.correction = abs(cos(heading) * cos(pitch)); + if (abs(heading) < 0.001) params.heading = 0; + if (abs(roll) < 0.001) params.roll = 0; + if (abs(pitch) < 0.001) params.pitch = 0; + //方向自动回正 + // if (params.heading > 0) params.heading -= 0.0025 + // if (params.heading < 0) params.heading += 0.0025 + if (params.roll > 0) params.roll -= 0.003; + if (params.roll < 0) params.roll += 0.003; + if (params.pitch < 0) params.pitch += 0.005; + if (params.pitch > 0) params.pitch -= 0.003; +}; + +// 开启飞行姿态调整/ +const onAdjustAttitude = () => { + const temp = params.speed / 60 / 60 / 60 / 110; + params.lng += temp * Math.cos(params.heading); + params.lat -= temp * Math.sin(params.heading); + const { lng, lat, altitude, heading, pitch, roll } = params; + + params.altitude += temp * Math.sin(pitch) * 110 * 1000 * 10; + + const position = Cesium.Cartesian3.fromDegrees(lng, lat, altitude); + + uav.model.setStyle({ + heading, + pitch, + roll + }); + uav.addTimePosition(position); + + +}; + + +const initUav = () => { + if (list.length == 0) { + PointJson.map((item) => { + list.push(item.wz.split(",").map(Number)); + }); + } + + uav = new mars3d.graphic.Route({ id: "uav", name: "无人机模型", position: { - type: "time", // 时序动态坐标 - speed: 100, - list: list - }, + type: "time", // 时序动态坐标 + speed: 100, + list: list, + }, model: { url: "https://data.mars3d.cn/gltf/mars/wrj.glb", scale: 0.1, minimumPixelSize: 0.1, runAnimations: true, mergeOrientation: true, + }, + camera: { type: "gs", - } - }) + }, + }); mapLayer.markerLayer.addGraphic(uav); -} +}; const initRectangle = () => { const graphic = new mars3d.graphic.RectanglePrimitive({ @@ -124,7 +263,6 @@ const initRectangle = () => { mapLayer.markerLayer.addGraphic(graphic); }; - /** * 渲染所有点位 */ diff --git a/src/views/components/map/panelLeft.vue b/src/views/components/map/panelLeft.vue index 9ba79d7..cdd3110 100644 --- a/src/views/components/map/panelLeft.vue +++ b/src/views/components/map/panelLeft.vue @@ -9,6 +9,6 @@ \ No newline at end of file diff --git a/src/views/map.vue b/src/views/map.vue index 5aaa201..bc384da 100644 --- a/src/views/map.vue +++ b/src/views/map.vue @@ -1,11 +1,16 @@ @@ -20,12 +25,8 @@ import {