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