fix: BUG修改

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";

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"];

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;
+	let pointsArr = [] as any;
-	// obj.points.map((item: any) => {
+	obj.points.map((item: any) => {
-	// 	pointsArr.push(mars3d.LngLatPoint.fromArray(item));
+		pointsArr.push(mars3d.LngLatPoint.fromArray(item));
-	// });
+	});
-	// console.log(pointsArr);
+	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",
+			url: "//data.mars3d.cn/gltf/mars/jingche/jingche.gltf",
-			scale: 1,
+			heading: 90,
-			minimumPixelSize: 60
+			mergeOrientation: true, // 用于设置模型不是标准的方向时的纠偏处理,在orientation基础的方式值上加上设置是heading值
+			minimumPixelSize: 50
 		},
-		path: {
+		camera: {
+			type: "gs",
+			pitch: -30,
+			radius: 500
+		},
+		polyline: {
 			color: "#ffff00",
-			opacity: 0.5,
+			width: 3
-			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
 		}
 	});
 	console.log(newRoutePath);
 	console.log(newRoutePath.info);
 	routeLayer.addGraphic(newRoutePath);
-	// 启动漫游
+	// 绑定popup
-	newRoutePath.flyTo();
+	bindPopup(newRoutePath);
-	newRoutePath.start();
+	newRoutePath.autoSurfaceHeight().then(function (e: any) {
+		// 启动漫游
+		newRoutePath.flyTo();
+		newRoutePath.start();
+
+		addParticleSystem(newRoutePath.property);
+	});
 };
+const bindPopup = (fixedRoute: any) => {
+	fixedRoute.bindPopup(
+		`<div style="width: 200px">
+      <div>总 距 离：<span id="lblAllLen"> </span></div>
+      <div>总 时 间：<span id="lblAllTime"> </span></div>
+      <div>开始时间：<span id="lblStartTime"> </span></div>
+      <div>剩余时间：<span id="lblRemainTime"> </span></div>
+      <div>剩余距离：<span id="lblRemainLen"> </span></div>
+    </div>`,
+		{ 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) => {

src/views/goverment/largeScreen/map.ts

@@ -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);
-}

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);