feat: 线效果功能新增

src/components/testMap/index.vue

@@ -464,8 +464,8 @@ const initMars3d = (option: any) => {
 		graphic.flyTo();
 	}
 	if (props.type == "线效果") {
-		if (formData.value.type == "LineFlowColor") {
 		const arrData: any = [];
+		if (formData.value.type == "LineFlowColor") {
 			for (let j = 0; j < 100; ++j) {
 				const startPt = randomPoint();
 
@@ -486,18 +486,8 @@ const initMars3d = (option: any) => {
 						}
 					}
 				});
-
-				// 多个线对象的合并渲染。
-				const graphic = new mars3d.graphic.PolylineCombine({
-					id: formData.value.id,
-					instances: arrData
-				});
-				console.log(graphic);
-				graphicLayer.addGraphic(graphic);
-				graphic.flyTo();
 			}
 		} else {
-			const arrData: any = [];
 			mars3d.Util.fetchJson({ url: JSON.parse(formData.value.jsonFile).url }).then(function (data) {
 				const busLines: any = [];
 				data.forEach(function (busLine: any, idx: any) {
@@ -538,7 +528,9 @@ const initMars3d = (option: any) => {
 						attr: { index: index }
 					});
 				});
-
+			});
+		}
+		setTimeout(function () {
 			// 多个线对象的合并渲染。
 			const graphic = new mars3d.graphic.PolylineCombine({
 				id: formData.value.id,
@@ -547,8 +539,7 @@ const initMars3d = (option: any) => {
 			console.log(graphic);
 			graphicLayer.addGraphic(graphic);
 			graphic.flyTo();
-			});
+		}, 200);
-		}
 	}
 };
 onMounted(async () => {

src/views/goverment/largeScreen/index.vue

@@ -245,7 +245,7 @@ import MapPrint from "./components/mapPrint.vue";
 import FlyRoam from "./components/flyRoam.vue";
 import MapMark from "./components/mapMark.vue";
 import RouteNavigation from "./components/routeNavigation.vue";
-import { getSystemConfig, baseMapList, albugineaMapList, diffuseWallList } from "@/api/modules/mapCommon";
+import { getSystemConfig, baseMapList, albugineaMapList, diffuseWallList, polylineCombineList } from "@/api/modules/mapCommon";
 const configJson = ref<any>({});
 const screenComparisonShow = ref(false); // 分屏对比弹框
 const leftRollerList = ref<any>([]);
@@ -794,6 +794,8 @@ const initMars3d = (option: any) => {
 	getBasicMaps();
 	// 查询配置点坐标效果
 	getPointPosition();
+	// 查询配置线效果
+	getLineEffect();
 	// 添加数据
 	// addRandomGraphicByCount(graphicLayer, [117.080397, 31.656139, 33.3]);
 	// addRandomGraphicByCount(graphicLayer, [117.078006, 31.65649, 49.4]);
@@ -844,6 +846,104 @@ const initMars3d = (option: any) => {
 	// map.addEffect(snowEffect);
 	// map.addEffect(snowCover);
 };
+// 取区域内的随机点
+const randomPoint = () => {
+	const jd = random(117.208056 * 1000, 117.25548 * 1000) / 1000;
+	const wd = random(31.816617 * 1000, 31.855756 * 1000) / 1000;
+	return new mars3d.LngLatPoint(jd, wd, 100);
+};
+// 取随机数字
+const random = (min: any, max: any) => {
+	return Math.floor(Math.random() * (max - min + 1) + min);
+};
+// 查询配置线效果
+const getLineEffect = async () => {
+	const resLineEffect: any = await polylineCombineList({});
+	console.log(resLineEffect, "线效果666666");
+	if (resLineEffect.result && resLineEffect.result.length > 0) {
+		resLineEffect.result.map((item: any) => {
+			if (item.show) {
+				const arrData: any = [];
+				if (item.type == "LineFlowColor") {
+					for (let j = 0; j < 100; ++j) {
+						const startPt = randomPoint();
+
+						const endPt = startPt.clone();
+						endPt.alt = random(1000, 2000);
+
+						arrData.push({
+							positions: [startPt, endPt],
+							style: {
+								width: item.width,
+								materialType: mars3d.MaterialType.LineFlowColor,
+								materialOptions: {
+									color: item.color,
+									speed: item.speed,
+									startTime: random(1000, 3000),
+									percent: 0.1,
+									alpha: 0.01
+								}
+							}
+						});
+					}
+				} else {
+					mars3d.Util.fetchJson({ url: JSON.parse(item.jsonFile).url }).then(function (data) {
+						const busLines: any = [];
+						data.forEach(function (busLine: any, idx: any) {
+							let prevPt: any;
+							const points = [];
+							for (let i = 0; i < busLine.length; i += 2) {
+								let pt = [busLine[i], busLine[i + 1]];
+								if (i > 0) {
+									pt = [prevPt[0] + pt[0], prevPt[1] + pt[1]];
+								}
+								prevPt = pt;
+
+								const longitude = pt[0] / 1e4;
+								const latitude = pt[1] / 1e4;
+								const cart = Cesium.Cartesian3.fromDegrees(longitude, latitude, 100.0);
+								points.push(cart);
+							}
+
+							busLines.push({
+								positions: points,
+								color: item.color,
+								speed: 2 + 1.0 * Math.random(),
+								bgColor: item.bgColor
+							});
+						});
+						busLines.forEach(function (item2: any, index2: any) {
+							arrData.push({
+								positions: item2.positions,
+								style: {
+									width: item2.width,
+									materialType: mars3d.MaterialType.ODLine,
+									materialOptions: {
+										color: item2.color,
+										speed: item2.speed,
+										bgColor: item2.bgColor,
+										startTime: Math.random()
+									}
+								},
+								attr: { index: index2 }
+							});
+						});
+					});
+				}
+				setTimeout(function () {
+					// 多个线对象的合并渲染。
+					const graphic = new mars3d.graphic.PolylineCombine({
+						id: item.id,
+						instances: arrData
+					});
+					console.log(graphic);
+					graphicLayer.addGraphic(graphic);
+					graphic.flyTo();
+				}, 100);
+			}
+		});
+	}
+};
 // 查询配置点坐标效果
 const getPointPosition = async () => {
 	const resPointPosition: any = await diffuseWallList({});