From b7c1c226150730b3da104fdb5cc1350ff7c75190 Mon Sep 17 00:00:00 2001 From: kun <1422840143@qq.com> Date: Fri, 27 Oct 2023 17:27:09 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20BUG=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/config/config.ts | 2 +- src/enums/Home/index.ts | 2 +- .../components/routeNavigation.vue | 130 +++++++++++++----- src/views/goverment/largeScreen/map.ts | 32 ----- src/views/login/index.vue | 2 +- 5 files changed, 101 insertions(+), 67 deletions(-) delete mode 100644 src/views/goverment/largeScreen/map.ts diff --git a/src/config/config.ts b/src/config/config.ts index bad7473..8f1cb1f 100644 --- a/src/config/config.ts +++ b/src/config/config.ts @@ -1,7 +1,7 @@ // ? 全局不动配置项 只做导出不做修改 // * 首页地址（默认） -export const HOME_URL: string = "/government"; +export const HOME_URL: string = "/largeScreen"; // * 登录页地址（默认） export const LOGIN_URL: string = "/login"; diff --git a/src/enums/Home/index.ts b/src/enums/Home/index.ts index e689c1c..8a63ac3 100644 --- a/src/enums/Home/index.ts +++ b/src/enums/Home/index.ts @@ -1 +1 @@ -export const HOME_URL: string[] = ["/government", "/home", "/home", "/home"]; +export const HOME_URL: string[] = ["/largeScreen", "/home", "/home", "/home"]; diff --git a/src/views/goverment/largeScreen/components/routeNavigation.vue b/src/views/goverment/largeScreen/components/routeNavigation.vue index 52cd8d8..df31999 100644 --- a/src/views/goverment/largeScreen/components/routeNavigation.vue +++ b/src/views/goverment/largeScreen/components/routeNavigation.vue @@ -77,6 +77,7 @@ onMounted(() => { }); // 模型路线漫游 const startFly = (row: any, index: number) => { + // 加载完成在加载小车，否则地形未加载完成，小车会处于地下 productRoute(row, index); }; // 生成路线 @@ -86,51 +87,116 @@ const productRoute = (obj: any, index: number) => { console.log(endGraphic); const graphic = routeLayer.getGraphicById(obj.id); console.log(graphic); - // let pointsArr = [] as any; - // obj.points.map((item: any) => { - // pointsArr.push(mars3d.LngLatPoint.fromArray(item)); - // }); - // console.log(pointsArr); + let pointsArr = [] as any; + obj.points.map((item: any) => { + pointsArr.push(mars3d.LngLatPoint.fromArray(item)); + }); + console.log(pointsArr); const newRoutePath = new mars3d.graphic.FixedRoute({ id: obj.id + "-" + index, name: "路线-" + index, speed: 200, - positions: [startGraphic.points[0], endGraphic.points[0]], + positions: [...pointsArr], + clockLoop: false, // 是否循环播放 model: { - url: "//data.mars3d.cn/gltf/mars/MQ-9-Predator.glb", - scale: 1, - minimumPixelSize: 60 + url: "//data.mars3d.cn/gltf/mars/jingche/jingche.gltf", + heading: 90, + mergeOrientation: true, // 用于设置模型不是标准的方向时的纠偏处理,在orientation基础的方式值上加上设置是heading值 + minimumPixelSize: 50 }, - path: { + camera: { + type: "gs", + pitch: -30, + radius: 500 + }, + polyline: { color: "#ffff00", - opacity: 0.5, - width: 1, - leadTime: 0 - }, - coneTrack: { - angle: 15, // 半场角度 - color: "rgba(255,0,255,0.5)" - }, - updateClock: false, - point: { - color: "#ffff00", - pixelSize: 5, - distanceDisplayCondition: true, - distanceDisplayCondition_near: 80000, - distanceDisplayCondition_far: Number.MAX_VALUE - }, - label: { - text: "测试", - font_size: 20 + width: 3 } }); console.log(newRoutePath); console.log(newRoutePath.info); routeLayer.addGraphic(newRoutePath); - // 启动漫游 - newRoutePath.flyTo(); - newRoutePath.start(); + // 绑定popup + bindPopup(newRoutePath); + newRoutePath.autoSurfaceHeight().then(function (e: any) { + // 启动漫游 + newRoutePath.flyTo(); + newRoutePath.start(); + + addParticleSystem(newRoutePath.property); + }); }; +const bindPopup = (fixedRoute: any) => { + fixedRoute.bindPopup( + `
+
总 距 离：
+
总 时 间：
+
开始时间：
+
剩余时间：
+
剩余距离：
+
`, + { closeOnClick: false } + ); + + // 刷新局部DOM,不影响popup面板的其他控件操作 + fixedRoute.on(mars3d.EventType.postRender, function (event: any) { + const container = event.container; // popup对应的DOM + + const params = fixedRoute?.info; + console.log(fixedRoute?.info); + if (!params) { + return; + } + + const lblAllLen = container.querySelector("#lblAllLen"); + if (lblAllLen) { + lblAllLen.innerHTML = mars3d.MeasureUtil.formatDistance(params.distance_all); + } + + const lblAllTime = container.querySelector("#lblAllTime"); + if (lblAllTime) { + lblAllTime.innerHTML = mars3d.Util.formatTime(params.second_all / map.clock.multiplier); + } + + const lblStartTime = container.querySelector("#lblStartTime"); + if (lblStartTime) { + lblStartTime.innerHTML = mars3d.Util.formatDate(Cesium.JulianDate.toDate(fixedRoute.startTime), "yyyy-M-d HH:mm:ss"); + } + + const lblRemainTime = container.querySelector("#lblRemainTime"); + if (lblRemainTime) { + lblRemainTime.innerHTML = mars3d.Util.formatTime((params.second_all - params.second) / map.clock.multiplier); + } + + const lblRemainLen = container.querySelector("#lblRemainLen"); + if (lblRemainLen) { + lblRemainLen.innerHTML = mars3d.MeasureUtil.formatDistance(params.distance_all - params.distance) || "完成"; + } + }); +}; +// 添加尾气粒子效果 +function addParticleSystem(property: any) { + const particleSystem = new mars3d.graphic.ParticleSystem({ + position: property, + style: { + image: "src/assets/images/Mars3DImg/particle/smoke.png", + particleSize: 12, // 粒子大小（单位：像素） + emissionRate: 20.0, // 发射速率 （单位：次/秒） + pitch: 40, // 俯仰角 + maxHeight: 1000, // 超出该高度后不显示粒子效果 + + startColor: Cesium.Color.GREY.withAlpha(0.7), // 开始颜色 + endColor: Cesium.Color.WHITE.withAlpha(0.0), // 结束颜色 + startScale: 1.0, // 开始比例（单位：相对于imageSize大小的倍数） + endScale: 5.0, // 结束比例（单位：相对于imageSize大小的倍数） + minimumSpeed: 1.0, // 最小速度(米/秒) + maximumSpeed: 4.0 // 最大速度(米/秒) + }, + attr: { remark: "车辆尾气" } + }); + routeLayer.addGraphic(particleSystem); +} let lastRoute: any; // 高亮路线 const highLightRoute = (row: any) => { diff --git a/src/views/goverment/largeScreen/map.ts b/src/views/goverment/largeScreen/map.ts deleted file mode 100644 index 196c545..0000000 --- a/src/views/goverment/largeScreen/map.ts +++ /dev/null @@ -1,32 +0,0 @@ -import * as mars3d from "mars3d"; - -export let map: mars3d.Map; // mars3d.Map三维地图对象 -/** - * 初始化地图业务，生命周期钩子函数（必须） - * 框架在地图初始化完成后自动调用该函数 - * @param {mars3d.Map} mapInstance 地图对象 - * @returns {void} 无 - */ -export function onMounted(mapInstance: any) { - map = mapInstance; // 记录首次创建的map -} - -/** - * 释放当前地图业务的生命周期函数 - * @returns {void} 无 - */ -export function onUnmounted() { - map = null; -} - -// 获取图层 -export function getLayers() { - return map.getLayers({ - basemaps: true, // 是否取config.json中的basemaps - layers: true // 是否取config.json中的layers - }); -} - -export function addLayer(layer: any) { - map.addLayer(layer); -} diff --git a/src/views/login/index.vue b/src/views/login/index.vue index a9bfda4..70a0661 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -66,7 +66,7 @@ const login = (formEl: FormInstance | undefined) => { if (!valid) return; loading.value = true; try { - const arr = ref(["/government", "/home", "/home", "/home"]); + const arr = ref(["/largeScreen", "/home", "/home", "/home"]); // 1.执行登录接口 const { result } = await loginApi({ ...loginForm, showPassword: loginForm.showPassword }); console.log(result);