fix: BUG修改

This commit is contained in:
kun 2023-11-27 18:43:59 +08:00
parent f2b5ee812f
commit 0aaae06d70
10 changed files with 251 additions and 143 deletions

View File

@ -277,3 +277,18 @@
z-index: 999 !important;
}
}
// element 组件样式
:deep() {
// .el-input__wrapper {
// background-color: transparent !important;
// }
// .el-input__inner {
// color: white;
// }
.el-input-number__increase,
.el-input-number__decrease {
background-color: transparent;
color: white;
display: none;
}
}

View File

@ -82,6 +82,28 @@
<span>效果颜色{{ formData.color ? formData.color : "" }}</span>
<el-color-picker v-model="formData.color" @change="e => pointPositionOperate(e, 'color')" />
</div>
<div class="property-column-item">
<span>经度</span>
<el-input-number
v-model.number="formData.lng"
controls-position="right"
style="margin: 5px 0px"
@blur="e => pointPositionOperate(e, 'lng')"
/>
</div>
<div class="property-column-item">
<span>纬度</span>
<el-input-number
v-model.number="formData.lat"
controls-position="right"
style="margin: 5px 0px"
@blur="e => pointPositionOperate(e, 'lat')"
/>
</div>
<!-- <div class="property-column-item">
<span>高度</span>
<el-input-number v-model.number="formData.alt" controls-position="right" @change="e => pointPositionOperate(e, 'alt')" />
</div> -->
<div class="property-column-item">
<span>半径{{ formData.radius ? formData.radius : 0 }}</span>
<el-slider
@ -189,7 +211,6 @@ import {
gltfModelEdit
} from "@/api/modules/mapCommon";
import { ElMessage } from "element-plus";
import { form } from "@/views/project/supervision/ProjectSupervision/overview";
const props = defineProps({
testMapVisible: Boolean,
relativeId: String,
@ -199,7 +220,7 @@ const emits = defineEmits(["confirm"]);
const formData: any = ref({});
const configJson = ref<any>({
scene: {
center: { lat: 14.029537, lng: 105.94238, alt: 4879779, heading: 0, pitch: -66 }
center: { lat: 26.502888, lng: 106.174716, alt: 1961.1, heading: 25.1, pitch: -50 }
},
control: {
baseLayerPicker: false, // basemaps
@ -342,6 +363,7 @@ const pointPositionOperate = (e: any, label: any) => {
},
clampToGround: true //
};
graphic.position = new mars3d.LngLatPoint(formData.value.lng, formData.value.lat, formData.value.alt);
graphic.setStyle(loadJson);
}
console.log(777);
@ -563,13 +585,13 @@ const initMars3d = async (option: any) => {
formData.value.lat = event.target.point.lat;
formData.value.alt = event.target.point.alt;
formData.value.radius = event.target.radius;
let loadJson = {
position: new mars3d.LngLatPoint(formData.value.lng, formData.value.lat, formData.value.alt),
style: {
radius: formData.value.radius
}
};
graphic.setStyle(loadJson);
// let loadJson = {
// position: new mars3d.LngLatPoint(formData.value.lng, formData.value.lat, formData.value.alt),
// style: {
// radius: formData.value.radius
// }
// };
// graphic.setStyle(loadJson);
});
//
graphic.startEditing();
@ -650,7 +672,7 @@ const initMars3d = async (option: any) => {
});
console.log(graphic);
graphicLayer.addGraphic(graphic);
graphic.flyTo();
graphic.flyTo({ minHeight: 2000 });
}, 200);
}
if (props.type == "模型") {

View File

@ -529,6 +529,7 @@ const loadModel = async () => {
map.setCameraViewList(viewPoints, {
complete: () => {
flyOperateShow.value = false;
// map.setCameraViewList(viewPoints)
}
});
flyOperateShow.value = true;

View File

@ -51,20 +51,23 @@ const getConfig = async () => {
const { result } = await getSystemConfig(requestData);
console.log(result, "6666666");
if (result) {
bookMarkId.value = result.configId;
let arr = JSON.parse(result.configValue);
if (arr && arr.length > 0) {
console.log("历史数据", arr);
for (let i = 0; i < arr.length; i++) {
const item = arr[i];
//
// if (listArr.value[0].img === "") {
// formState.imgObject.splice(0, 1)
// formState.found = true
// }
listArr.value.push(item);
if (listArr.value.length == 0 && !bookMarkId.value) {
// Id
let arr = JSON.parse(result.configValue);
if (arr && arr.length > 0) {
console.log("历史数据", arr);
for (let i = 0; i < arr.length; i++) {
const item = arr[i];
//
// if (listArr.value[0].img === "") {
// formState.imgObject.splice(0, 1)
// formState.found = true
// }
listArr.value.push(item);
}
}
}
bookMarkId.value = result.configId;
}
};
//
@ -72,10 +75,18 @@ const flytoView = (item: any) => {
map.setCameraView(item.center);
};
//
const delteMark = (index: number) => {
const delteMark = async (index: number) => {
listArr.value.splice(index, 1);
//
globalStore.viewBookmarkArr = JSON.stringify(listArr.value);
//
console.log(listArr.value);
let requestData: any = { configKey: "flyViewConfig", configValue: JSON.stringify(listArr.value) };
await getConfig();
requestData.configId = bookMarkId.value;
const res = await updateSystemConfig(requestData);
console.log(res);
if (res.code == 200) {
ElMessage.success("操作成功");
}
};
//
const addView = () => {
@ -105,20 +116,17 @@ const addView = () => {
// });
item.img = response.image;
listArr.value.unshift(item);
console.log(listArr.value);
console.log(bookMarkId.value);
//
//
let requestData: any = { configKey: "flyViewConfig", configValue: JSON.stringify(listArr.value) };
if (listArr.value.length > 0 && !bookMarkId.value) {
await getConfig();
requestData.configId = bookMarkId.value;
} else if (listArr.value.length > 0 && bookMarkId.value) {
requestData.configId = bookMarkId.value;
}
await getConfig();
requestData.configId = bookMarkId.value;
const res = await updateSystemConfig(requestData);
console.log(res);
if (res.code == 200) {
ElMessage.success("操作成功");
} else {
//
listArr.value.splice(listArr.value.length - 1, 1);
}
textVal.value = "";
});

View File

@ -5,7 +5,7 @@
<el-icon size="16" color="#fff" @click="closeDiv"><Close /></el-icon>
</div>
<div class="main-content-menu">
<div v-for="(item, i) in menuList" :key="i" class="menu-item" @click="mapOperate(item.name)">
<div v-for="(item, i) in menuList" :key="i" class="menu-item" @click="mapOperate(item.name)" :title="item.name">
<div><img class="icon" :src="item.icon" alt="" srcset="" /></div>
<div>{{ item.name }}</div>
</div>

View File

@ -28,10 +28,10 @@
<div class="td">方案{{ index + 1 }}</div>
<div class="td">
<div>
<el-button type="primary" @click="highLightRoute(item)" size="small">高亮路线</el-button>
<el-button type="primary" @click="highLightRoute(item, index)" size="small">高亮路线</el-button>
<el-button type="primary" @click="startFly(item, index)" size="small" v-if="!item.isStart">开始漫游</el-button>
<el-button type="primary" @click="stopFly(item, index)" size="small" v-else>停止漫游</el-button>
<el-checkbox v-model="item.isFollow" @change="checkChange(item, index)">跟随视角</el-checkbox>
<el-checkbox v-model="item.isFollow" @change="checkChange(item, index)" v-if="item.isStart">跟随视角</el-checkbox>
</div>
<div>{{ htmlDeal(item) }}</div>
</div>
@ -40,7 +40,7 @@
</div>
<div class="speed-set" v-if="tableData.length > 0">
<span>速度</span>
<el-input-number v-model="mapPosition.speed" controls-position="right" />
<el-input-number v-model="mapPosition.speed" controls-position="right" @blur="speedChange" />
<span>km/h</span>
</div>
</div>
@ -71,6 +71,8 @@ let mapGraphic: any;
let routeLayer: any;
let gaodeRoute: any; //
let startGraphic: any, endGraphic: any;
let routeLineData: any = null; // 线
let initRoutePath: any = null;
onMounted(() => {
map.scene.globe.depthTestAgainstTerrain = false; //
routeLayer = new mars3d.layer.GraphicLayer();
@ -80,52 +82,11 @@ onMounted(() => {
gaodeRoute = new mars3d.query.GaodeRoute({
key: ["ad31e514e7e740179d6d8f182720bcf5"]
});
});
// 线
const checkChange = (row: any, index: number) => {
let routeData = routeLayer.getGraphicById(row.id + "-" + index);
console.log(routeData);
routeData &&
routeData.setCameraOptions({
type: row.isFollow ? "gs" : ""
});
};
// 线
const stopFly = (row: any, index: number) => {
let routeData = routeLayer.getGraphicById(row.id + "-" + index);
row.isStart = false;
routeData && routeData.stop();
};
// 线
const startFly = (row: any, index: number) => {
//
let routeData = routeLayer.getGraphicById(row.id + "-" + index);
if (routeData) {
//
routeData.flyTo();
routeData.start();
} else {
productRoute(row, index);
}
row.isStart = true;
};
// 线
const productRoute = (obj: any, index: number) => {
console.log(obj);
console.log(startGraphic);
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);
const newRoutePath = new mars3d.graphic.FixedRoute({
id: obj.id + "-" + index,
name: "路线-" + index,
initRoutePath = new mars3d.graphic.FixedRoute({
id: "route-id",
name: "路线-0",
speed: 200,
positions: pointsArr,
positions: [[106.204963, 26.510103]],
clockLoop: false, //
model: {
url: "//data.mars3d.cn/gltf/mars/jingche/jingche.gltf",
@ -143,17 +104,87 @@ const productRoute = (obj: any, index: number) => {
width: 3
}
});
console.log(newRoutePath);
console.log(newRoutePath.info);
routeLayer.addGraphic(newRoutePath);
mapGraphic && mapGraphic.addGraphic(initRoutePath);
// popup
bindPopup(newRoutePath);
newRoutePath.autoSurfaceHeight().then(function (e: any) {
bindPopup(initRoutePath);
});
//
const speedChange = () => {
console.log(111);
console.log(mapPosition.value.speed);
initRoutePath.multiplier = mapPosition.value.speed / 200;
};
// 线
const checkChange = (row: any, index: number) => {
initRoutePath &&
initRoutePath.setCameraOptions({
type: row.isFollow ? "gs" : ""
});
};
// 线
const stopFly = (row: any, index: number) => {
tableData.value.map((item: any, index2: any) => {
if (index2 != index) {
let rowGraphic = routeLayer.getGraphicById(item.id);
rowGraphic.entityGraphic.width = 5;
rowGraphic.entityGraphic.material = {};
rowGraphic.show = true;
item.isStart = false;
item.isFollow = false;
}
});
if (!initRoutePath || !routeLineData) return;
routeLineData.show = true;
row.isStart = false;
initRoutePath && initRoutePath.stop();
};
// 线
const startFly = (row: any, index: number) => {
//
routeLineData = routeLayer.getGraphicById(row.id); // 线
tableData.value.map((item: any, index2: any) => {
if (index2 != index) {
let rowGraphic = routeLayer.getGraphicById(item.id);
rowGraphic.entityGraphic.width = 5;
rowGraphic.entityGraphic.material = {};
rowGraphic.show = true;
item.isStart = false;
item.isFollow = false;
}
});
// if (newRoutePath) {
// //
// newRoutePath.flyTo();
// newRoutePath.start();
// } else {
// }
initRoutePath.show = true;
mapPosition.value.speed = 200;
initRoutePath.speed = mapPosition.value.speed;
routeLineData.show = false;
productRoute(row, index);
row.isStart = true;
};
// 线
const productRoute = (obj: any, index: number) => {
console.log(obj);
console.log(startGraphic);
console.log(endGraphic);
const graphic = routeLayer.getGraphicById(obj.id);
graphic.show = false;
console.log(graphic);
let pointsArr = [...mars3d.PolyUtil.simplifyPositions(obj.points)] as any; //
pointsArr.splice(pointsArr.length - 1, 1); //
// obj.points.map((item: any) => {
// pointsArr.push(mars3d.LngLatPoint.fromArray(item));
// });
initRoutePath.positions = pointsArr;
initRoutePath.autoSurfaceHeight().then(function (e: any) {
//
newRoutePath.flyTo();
newRoutePath.start();
initRoutePath.flyTo();
initRoutePath.start();
addParticleSystem(newRoutePath.property);
addParticleSystem(initRoutePath.property);
});
};
const bindPopup = (fixedRoute: any) => {
@ -226,15 +257,20 @@ function addParticleSystem(property: any) {
});
routeLayer.addGraphic(particleSystem);
}
let lastRoute: any;
// 线
const highLightRoute = (row: any) => {
const highLightRoute = (row: any, index: any) => {
const graphic = routeLayer.getGraphicById(row.id);
if (lastRoute) {
lastRoute.entityGraphic.material = lastRoute.entityGraphic.material_old;
lastRoute.entityGraphic.width = lastRoute.entityGraphic.width_old;
}
tableData.value.map((item: any, index2: any) => {
let rowGraphic = routeLayer.getGraphicById(item.id);
if (index2 != index) {
rowGraphic.entityGraphic.width = 5;
rowGraphic.entityGraphic.material = {};
}
rowGraphic.show = true;
item.isStart = false;
item.isFollow = false;
});
initRoutePath.show = false;
// 线
graphic.entityGraphic.width = 5;
@ -243,10 +279,7 @@ const highLightRoute = (row: any) => {
image: new URL("@/assets/images/Mars3DImg/textures/line-color-yellow.png", import.meta.url).href,
speed: 20
});
map.flyToGraphic(graphic);
lastRoute = graphic;
// map.flyToGraphic(graphic);
};
// html
const htmlDeal = (row: any) => {
@ -357,7 +390,7 @@ const startPicking = () => {
startGraphic = graphic;
const point = graphic.point;
point.format();
queryRoute();
// queryRoute();
mapPosition.value.startPosition = point.lng + "," + point.lat;
return point.lng + "," + point.lat;
});
@ -382,6 +415,7 @@ const endPicking = () => {
const point = graphic.point;
point.format();
queryRoute();
initRoutePath.show = false;
mapPosition.value.endPosition = point.lng + "," + point.lat;
return point.lng + "," + point.lat;
});
@ -524,7 +558,6 @@ onUnmounted(() => {
> div:nth-child(1) {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid white;
padding: 5px;
:deep() {
@ -536,6 +569,7 @@ onUnmounted(() => {
}
.el-button {
margin-left: 0px !important;
margin-right: 5px;
}
}
}

View File

@ -5,7 +5,7 @@
<el-icon size="16" color="#fff" @click="closeDiv"><Close /></el-icon>
</div>
<div class="main-content-menu" v-if="mainMenuShow">
<div v-for="(item, i) in menuList" :key="i" class="menu-item" @click="mapOperate(item.name)">
<div v-for="(item, i) in menuList" :key="i" class="menu-item" @click="mapOperate(item.name)" :title="item.name">
<div><img class="icon" :src="item.icon" alt="" srcset="" /></div>
<div>{{ item.name }}</div>
</div>
@ -49,18 +49,22 @@
<div class="item-classify-item">
<span>四周方向</span>
<el-slider v-model="allProperty.heading" :max="360" @input="e => viewShedOperate(e, 'heading')" />
<span>{{ allProperty.heading }}</span>
</div>
<div class="item-classify-item">
<span>视角距离</span>
<el-slider v-model="allProperty.distance" :step="10" :max="5000" @input="e => viewShedOperate(e, 'distance')" />
<span>{{ allProperty.distance }}</span>
</div>
<div class="item-classify-item">
<span>透明度</span>
<el-slider v-model="allProperty.opacity" :step="0.1" :max="1" @input="e => viewShedOperate(e, 'opacity')" />
<span>{{ allProperty.opacity }}</span>
</div>
<div class="item-classify-item">
<span>视椎线框</span>
<el-switch v-model="allProperty.showFrustum" @input="e => viewShedOperate(e, 'showFrustum')" />
<!-- <el-switch v-model="allProperty.showFrustum" @input="e => viewShedOperate(e, 'showFrustum')" /> -->
<el-checkbox v-model="allProperty.showFrustum" @change="e => viewShedOperate(e, 'showFrustum')">显示框线</el-checkbox>
</div>
</div>
<div class="sunshing-play">
@ -1131,6 +1135,9 @@ onUnmounted(() => {
.volumeAnalysis {
width: 400px;
}
.viewShed {
width: 350px;
}
}
}
// element

View File

@ -51,20 +51,23 @@ const getConfig = async () => {
const { result } = await getSystemConfig(requestData);
console.log(result, "6666666");
if (result) {
bookMarkId.value = result.configId;
let arr = JSON.parse(result.configValue);
if (arr && arr.length > 0) {
console.log("历史数据", arr);
for (let i = 0; i < arr.length; i++) {
const item = arr[i];
//
// if (listArr.value[0].img === "") {
// formState.imgObject.splice(0, 1)
// formState.found = true
// }
listArr.value.push(item);
if (listArr.value.length == 0 && !bookMarkId.value) {
// Id
let arr = JSON.parse(result.configValue);
if (arr && arr.length > 0) {
console.log("历史数据", arr);
for (let i = 0; i < arr.length; i++) {
const item = arr[i];
//
// if (listArr.value[0].img === "") {
// formState.imgObject.splice(0, 1)
// formState.found = true
// }
listArr.value.push(item);
}
}
}
bookMarkId.value = result.configId;
}
};
//
@ -72,10 +75,18 @@ const flytoView = (item: any) => {
map.setCameraView(item.center);
};
//
const delteMark = (index: number) => {
const delteMark = async (index: number) => {
listArr.value.splice(index, 1);
//
globalStore.viewBookmarkArr = JSON.stringify(listArr.value);
//
console.log(listArr.value);
let requestData: any = { configKey: "bookMarkConfig", configValue: JSON.stringify(listArr.value) };
await getConfig();
requestData.configId = bookMarkId.value;
const res = await updateSystemConfig(requestData);
console.log(res);
if (res.code == 200) {
ElMessage.success("操作成功");
}
};
//
const addView = () => {
@ -105,19 +116,17 @@ const addView = () => {
// });
item.img = response.image;
listArr.value.unshift(item);
console.log(listArr.value);
//
//
let requestData: any = { configKey: "bookMarkConfig", configValue: JSON.stringify(listArr.value) };
if (listArr.value.length > 0 && !bookMarkId.value) {
await getConfig();
requestData.configId = bookMarkId.value;
} else if (listArr.value.length > 0 && bookMarkId.value) {
requestData.configId = bookMarkId.value;
}
await getConfig();
requestData.configId = bookMarkId.value;
const res = await updateSystemConfig(requestData);
console.log(res);
if (res.code == 200) {
ElMessage.success("操作成功");
} else {
//
listArr.value.splice(listArr.value.length - 1, 1);
}
textVal.value = "";
});

View File

@ -55,7 +55,7 @@
</div>
<!-- 工具菜单操作 -->
<div class="tool-menu-operate" v-if="toolListShow">
<div class="tool-item" v-for="(item, index) in data[2].children" :key="index" @click="clickMenu(item.name)">
<div class="tool-item" v-for="(item, index) in data[3].children" :key="index" @click="clickMenu(item.name)">
<img :src="item.icon" alt="" srcset="" style="width: 14px; height: 14px" />
<span>{{ item.name }}</span>
</div>
@ -102,7 +102,7 @@
</div>
</div>
<!-- 卷帘对比弹框 -->
<div class="roller-add" v-if="rollerComparisonShow">
<div class="roller-add" v-if="rollerComparisonShow" v-draggable>
<div class="roller-add-content">
<span>左侧图层</span>
<el-select v-model="rollerVal.leftRollerVal" :teleported="false" placeholder="请选择" @change="changeLeft">
@ -659,14 +659,14 @@ const lantianSkybox = new mars3d.GroundSkyBox({
}
});
const data = [
// {
// name: "",
// icon: new URL("@/assets/images/Mars3DIcon/gj.png", import.meta.url).href,
// children: [
// { name: "", icon: new URL("@/assets/images/Mars3DIcon/tsls.png", import.meta.url).href },
// { name: "", icon: new URL("@/assets/images/Mars3DIcon/kjfx.png", import.meta.url).href }
// ]
// },
{
name: "物联网设备",
icon: new URL("@/assets/images/Mars3DIcon/gj.png", import.meta.url).href,
children: [
{ name: "视频", icon: new URL("@/assets/images/Mars3DIcon/tsls.png", import.meta.url).href },
{ name: "扬尘", icon: new URL("@/assets/images/Mars3DIcon/kjfx.png", import.meta.url).href }
]
},
{ name: "底图", icon: new URL("@/assets/images/Mars3DIcon/dt.png", import.meta.url).href },
{ name: "图层", icon: new URL("@/assets/images/Mars3DIcon/tc.png", import.meta.url).href },
{
@ -733,14 +733,22 @@ const screenComparison = () => {
insertBefore: mapOld
});
map.addControl(mapScreenSplit);
//
// mapScreenSplit.mapEx.basemap = "";
};
//
const changeRight = (e: any) => {
console.log(mapSplit);
mapSplit.rightLayer = [layersObj[e]];
leftRollerList.value = baseMaps.value.filter((item: any) => {
return item.id != rollerVal.value.rightRollerVal;
});
console.log(mapSplit.rightLayer);
console.log(layersObj);
console.log(e);
// mapSplit.setOptions({
// rightLayer: [layersObj[rollerVal.value.rightRollerVal]],
// leftLayer: [layersObj[rollerVal.value.leftRollerVal]]
// });
};
//
const changeLeft = (e: any) => {
@ -748,6 +756,10 @@ const changeLeft = (e: any) => {
rightRollerList.value = baseMaps.value.filter((item: any) => {
return item.id != rollerVal.value.leftRollerVal;
});
// mapSplit.setOptions({
// rightLayer: [layersObj[rollerVal.value.rightRollerVal]],
// leftLayer: [layersObj[rollerVal.value.leftRollerVal]]
// });
};
//
const clearRollerComparison = () => {
@ -769,7 +781,7 @@ const rollerComparison = () => {
leftLayer: [layersObj[rollerVal.value.leftRollerVal]]
});
map.addControl(mapSplit);
// map.control.baseLayerPicker = false; // basemaps
// mapSplit.on(mars3d.EventType.mouseMove, function (event: any) {
// console.log("mapSplit", event);
// });
@ -1152,7 +1164,7 @@ const getLineEffect = async () => {
});
console.log(graphic);
graphicLayer.addGraphic(graphic);
graphic.flyTo();
graphic.flyTo({ minHeight: 3000 });
}, 100);
}
});

View File

@ -303,7 +303,7 @@ const layerTypeJson = ref([
name: "单张图片 (本地离线)",
icon: new URL("@/assets/images/Mars3DImg/basemaps/offline.png", import.meta.url).href,
type: "image",
url: "//data.mars3d.cn/filesrc/assets/images/Mars3DImg/world/world.jpg"
url: new URL("@/assets/images/Mars3DImg/basemaps/offline.png", import.meta.url).href
},
{
name: "无底图",