diff --git a/src/components/testMap/index.vue b/src/components/testMap/index.vue index 95b6162..0fd88c7 100644 --- a/src/components/testMap/index.vue +++ b/src/components/testMap/index.vue @@ -464,8 +464,8 @@ const initMars3d = (option: any) => { graphic.flyTo(); } if (props.type == "线效果") { + const arrData: any = []; if (formData.value.type == "LineFlowColor") { - const arrData: any = []; 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,17 +528,18 @@ const initMars3d = (option: any) => { attr: { index: index } }); }); - - // 多个线对象的合并渲染。 - const graphic = new mars3d.graphic.PolylineCombine({ - id: formData.value.id, - instances: arrData - }); - console.log(graphic); - graphicLayer.addGraphic(graphic); - graphic.flyTo(); }); } + setTimeout(function () { + // 多个线对象的合并渲染。 + const graphic = new mars3d.graphic.PolylineCombine({ + id: formData.value.id, + instances: arrData + }); + console.log(graphic); + graphicLayer.addGraphic(graphic); + graphic.flyTo(); + }, 200); } }; onMounted(async () => { diff --git a/src/views/goverment/largeScreen/index.vue b/src/views/goverment/largeScreen/index.vue index 6036289..fa4af04 100644 --- a/src/views/goverment/largeScreen/index.vue +++ b/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({}); const screenComparisonShow = ref(false); // 分屏对比弹框 const leftRollerList = ref([]); @@ -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({});