admin/Mars3D-screen_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 线效果功能新增

Browse Source
This commit is contained in:
kun 2023-11-03 17:16:28 +08:00
parent 62f5edeb92
commit 97ea7620e2
2 changed files with 112 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/testMap/index.vue
View File

@ -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 () => {

102
src/views/goverment/largeScreen/index.vue
View File

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