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

fix: BUG修改

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/testMap/index.scss
View File

@ -277,3 +277,18 @@
z-index: 999 !important; 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;
}
}

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

@ -82,6 +82,28 @@
<span>效果颜色：{{ formData.color ? formData.color : "" }}</span> <span>效果颜色：{{ formData.color ? formData.color : "" }}</span>
<el-color-picker v-model="formData.color" @change="e => pointPositionOperate(e, 'color')" /> <el-color-picker v-model="formData.color" @change="e => pointPositionOperate(e, 'color')" />
</div> </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"> <div class="property-column-item">
<span>半径：{{ formData.radius ? formData.radius : 0 }}米</span> <span>半径：{{ formData.radius ? formData.radius : 0 }}米</span>
<el-slider <el-slider
@ -189,7 +211,6 @@ import {
gltfModelEdit gltfModelEdit
} from "@/api/modules/mapCommon"; } from "@/api/modules/mapCommon";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { form } from "@/views/project/supervision/ProjectSupervision/overview";
const props = defineProps({ const props = defineProps({
testMapVisible: Boolean, testMapVisible: Boolean,
relativeId: String, relativeId: String,
@ -199,7 +220,7 @@ const emits = defineEmits(["confirm"]);
const formData: any = ref({}); const formData: any = ref({});
const configJson = ref<any>({ const configJson = ref<any>({
scene: { 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: { control: {
baseLayerPicker: false, // basemaps底图切换按钮 baseLayerPicker: false, // basemaps底图切换按钮
@ -342,6 +363,7 @@ const pointPositionOperate = (e: any, label: any) => {
}, },
clampToGround: true // 是否贴地 clampToGround: true // 是否贴地
}; };
graphic.position = new mars3d.LngLatPoint(formData.value.lng, formData.value.lat, formData.value.alt);
graphic.setStyle(loadJson); graphic.setStyle(loadJson);
} }
console.log(777); console.log(777);
@ -563,13 +585,13 @@ const initMars3d = async (option: any) => {
formData.value.lat = event.target.point.lat; formData.value.lat = event.target.point.lat;
formData.value.alt = event.target.point.alt; formData.value.alt = event.target.point.alt;
formData.value.radius = event.target.radius; formData.value.radius = event.target.radius;
let loadJson = { // let loadJson = {
position: new mars3d.LngLatPoint(formData.value.lng, formData.value.lat, formData.value.alt), // position: new mars3d.LngLatPoint(formData.value.lng, formData.value.lat, formData.value.alt),
style: { // style: {
radius: formData.value.radius // radius: formData.value.radius
} // }
}; // };
graphic.setStyle(loadJson); // graphic.setStyle(loadJson);
}); });
// 开启编辑状态 // 开启编辑状态
graphic.startEditing(); graphic.startEditing();
@ -650,7 +672,7 @@ const initMars3d = async (option: any) => {
}); });
console.log(graphic); console.log(graphic);
graphicLayer.addGraphic(graphic); graphicLayer.addGraphic(graphic);
graphic.flyTo(); graphic.flyTo({ minHeight: 2000 });
}, 200); }, 200);
} }
if (props.type == "模型") { if (props.type == "模型") {

1
src/views/goverment/frontLargeScreen/index.vue
View File

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

56
src/views/goverment/largeScreen/components/flyViewBookmark.vue
View File

@ -51,20 +51,23 @@ const getConfig = async () => {
const { result } = await getSystemConfig(requestData); const { result } = await getSystemConfig(requestData);
console.log(result, "6666666"); console.log(result, "6666666");
if (result) { if (result) {
bookMarkId.value = result.configId; if (listArr.value.length == 0 && !bookMarkId.value) {
let arr = JSON.parse(result.configValue); // 处理特殊情况，当没数据时再进行赋值，有数据时只取Id
if (arr && arr.length > 0) { let arr = JSON.parse(result.configValue);
console.log("历史数据", arr); if (arr && arr.length > 0) {
for (let i = 0; i < arr.length; i++) { console.log("历史数据", arr);
const item = arr[i]; for (let i = 0; i < arr.length; i++) {
// 删除未匹配项 const item = arr[i];
// if (listArr.value[0].img === "") { // 删除未匹配项
// formState.imgObject.splice(0, 1) // if (listArr.value[0].img === "") {
// formState.found = true // formState.imgObject.splice(0, 1)
// } // formState.found = true
listArr.value.push(item); // }
listArr.value.push(item);
}
} }
} }
bookMarkId.value = result.configId;
} }
}; };
// 飞到对应视角 // 飞到对应视角
@ -72,10 +75,18 @@ const flytoView = (item: any) => {
map.setCameraView(item.center); map.setCameraView(item.center);
}; };
// 删除视角书签 // 删除视角书签
const delteMark = (index: number) => { const delteMark = async (index: number) => {
listArr.value.splice(index, 1); 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 = () => { const addView = () => {
@ -105,20 +116,17 @@ const addView = () => {
// }); // });
item.img = response.image; item.img = response.image;
listArr.value.unshift(item); listArr.value.unshift(item);
console.log(listArr.value); // 记录到接口
console.log(bookMarkId.value);
// 记录到历史数据
let requestData: any = { configKey: "flyViewConfig", configValue: JSON.stringify(listArr.value) }; let requestData: any = { configKey: "flyViewConfig", configValue: JSON.stringify(listArr.value) };
if (listArr.value.length > 0 && !bookMarkId.value) { await getConfig();
await getConfig(); requestData.configId = bookMarkId.value;
requestData.configId = bookMarkId.value;
} else if (listArr.value.length > 0 && bookMarkId.value) {
requestData.configId = bookMarkId.value;
}
const res = await updateSystemConfig(requestData); const res = await updateSystemConfig(requestData);
console.log(res); console.log(res);
if (res.code == 200) { if (res.code == 200) {
ElMessage.success("操作成功"); ElMessage.success("操作成功");
} else {
// 当添加不成功时需要重新删除
listArr.value.splice(listArr.value.length - 1, 1);
} }
textVal.value = ""; textVal.value = "";
}); });

2
src/views/goverment/largeScreen/components/mapMeasurement.vue
View File

@ -5,7 +5,7 @@
<el-icon size="16" color="#fff" @click="closeDiv"><Close /></el-icon> <el-icon size="16" color="#fff" @click="closeDiv"><Close /></el-icon>
</div> </div>
<div class="main-content-menu"> <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><img class="icon" :src="item.icon" alt="" srcset="" /></div>
<div>{{ item.name }}</div> <div>{{ item.name }}</div>
</div> </div>

172
src/views/goverment/largeScreen/components/routeNavigation.vue
View File

@ -28,10 +28,10 @@
<div class="td">方案{{ index + 1 }}</div> <div class="td">方案{{ index + 1 }}</div>
<div class="td"> <div class="td">
<div> <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="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-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>
<div>{{ htmlDeal(item) }}</div> <div>{{ htmlDeal(item) }}</div>
</div> </div>
@ -40,7 +40,7 @@
</div> </div>
<div class="speed-set" v-if="tableData.length > 0"> <div class="speed-set" v-if="tableData.length > 0">
<span>速度：</span> <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> <span>（km/h）</span>
</div> </div>
</div> </div>
@ -71,6 +71,8 @@ let mapGraphic: any;
let routeLayer: any; let routeLayer: any;
let gaodeRoute: any; // 高德路径规划 let gaodeRoute: any; // 高德路径规划
let startGraphic: any, endGraphic: any; let startGraphic: any, endGraphic: any;
let routeLineData: any = null; // 初始标记路线
let initRoutePath: any = null;
onMounted(() => { onMounted(() => {
map.scene.globe.depthTestAgainstTerrain = false; // 不投射到地形上 map.scene.globe.depthTestAgainstTerrain = false; // 不投射到地形上
routeLayer = new mars3d.layer.GraphicLayer(); routeLayer = new mars3d.layer.GraphicLayer();
@ -80,52 +82,11 @@ onMounted(() => {
gaodeRoute = new mars3d.query.GaodeRoute({ gaodeRoute = new mars3d.query.GaodeRoute({
key: ["ad31e514e7e740179d6d8f182720bcf5"] key: ["ad31e514e7e740179d6d8f182720bcf5"]
}); });
}); initRoutePath = new mars3d.graphic.FixedRoute({
// 模型路线是否跟随视角 id: "route-id",
const checkChange = (row: any, index: number) => { name: "路线-0",
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,
speed: 200, speed: 200,
positions: pointsArr, positions: [[106.204963, 26.510103]],
clockLoop: false, // 是否循环播放 clockLoop: false, // 是否循环播放
model: { model: {
url: "//data.mars3d.cn/gltf/mars/jingche/jingche.gltf", url: "//data.mars3d.cn/gltf/mars/jingche/jingche.gltf",
@ -143,17 +104,87 @@ const productRoute = (obj: any, index: number) => {
width: 3 width: 3
} }
}); });
console.log(newRoutePath); mapGraphic && mapGraphic.addGraphic(initRoutePath);
console.log(newRoutePath.info);
routeLayer.addGraphic(newRoutePath);
// 绑定popup // 绑定popup
bindPopup(newRoutePath); bindPopup(initRoutePath);
newRoutePath.autoSurfaceHeight().then(function (e: any) { });
// 速度切换
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(); initRoutePath.flyTo();
newRoutePath.start(); initRoutePath.start();
addParticleSystem(newRoutePath.property); addParticleSystem(initRoutePath.property);
}); });
}; };
const bindPopup = (fixedRoute: any) => { const bindPopup = (fixedRoute: any) => {
@ -226,15 +257,20 @@ function addParticleSystem(property: any) {
}); });
routeLayer.addGraphic(particleSystem); routeLayer.addGraphic(particleSystem);
} }
let lastRoute: any;
// 高亮路线 // 高亮路线
const highLightRoute = (row: any) => { const highLightRoute = (row: any, index: any) => {
const graphic = routeLayer.getGraphicById(row.id); const graphic = routeLayer.getGraphicById(row.id);
tableData.value.map((item: any, index2: any) => {
if (lastRoute) { let rowGraphic = routeLayer.getGraphicById(item.id);
lastRoute.entityGraphic.material = lastRoute.entityGraphic.material_old; if (index2 != index) {
lastRoute.entityGraphic.width = lastRoute.entityGraphic.width_old; rowGraphic.entityGraphic.width = 5;
} rowGraphic.entityGraphic.material = {};
}
rowGraphic.show = true;
item.isStart = false;
item.isFollow = false;
});
initRoutePath.show = false;
// 动画线材质 // 动画线材质
graphic.entityGraphic.width = 5; 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, image: new URL("@/assets/images/Mars3DImg/textures/line-color-yellow.png", import.meta.url).href,
speed: 20 speed: 20
}); });
// map.flyToGraphic(graphic);
map.flyToGraphic(graphic);
lastRoute = graphic;
}; };
// html格式处理 // html格式处理
const htmlDeal = (row: any) => { const htmlDeal = (row: any) => {
@ -357,7 +390,7 @@ const startPicking = () => {
startGraphic = graphic; startGraphic = graphic;
const point = graphic.point; const point = graphic.point;
point.format(); point.format();
queryRoute(); // queryRoute();
mapPosition.value.startPosition = point.lng + "," + point.lat; mapPosition.value.startPosition = point.lng + "," + point.lat;
return point.lng + "," + point.lat; return point.lng + "," + point.lat;
}); });
@ -382,6 +415,7 @@ const endPicking = () => {
const point = graphic.point; const point = graphic.point;
point.format(); point.format();
queryRoute(); queryRoute();
initRoutePath.show = false;
mapPosition.value.endPosition = point.lng + "," + point.lat; mapPosition.value.endPosition = point.lng + "," + point.lat;
return point.lng + "," + point.lat; return point.lng + "," + point.lat;
}); });
@ -524,7 +558,6 @@ onUnmounted(() => {
> div:nth-child(1) { > div:nth-child(1) {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
border-bottom: 2px solid white; border-bottom: 2px solid white;
padding: 5px; padding: 5px;
:deep() { :deep() {
@ -536,6 +569,7 @@ onUnmounted(() => {
} }
.el-button { .el-button {
margin-left: 0px !important; margin-left: 0px !important;
margin-right: 5px;
} }
} }
} }

11
src/views/goverment/largeScreen/components/spaceAnalysis.vue
View File

@ -5,7 +5,7 @@
<el-icon size="16" color="#fff" @click="closeDiv"><Close /></el-icon> <el-icon size="16" color="#fff" @click="closeDiv"><Close /></el-icon>
</div> </div>
<div class="main-content-menu" v-if="mainMenuShow"> <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><img class="icon" :src="item.icon" alt="" srcset="" /></div>
<div>{{ item.name }}</div> <div>{{ item.name }}</div>
</div> </div>
@ -49,18 +49,22 @@
<div class="item-classify-item"> <div class="item-classify-item">
<span>四周方向：</span> <span>四周方向：</span>
<el-slider v-model="allProperty.heading" :max="360" @input="e => viewShedOperate(e, 'heading')" /> <el-slider v-model="allProperty.heading" :max="360" @input="e => viewShedOperate(e, 'heading')" />
<span>值：{{ allProperty.heading }}</span>
</div> </div>
<div class="item-classify-item"> <div class="item-classify-item">
<span>视角距离：</span> <span>视角距离：</span>
<el-slider v-model="allProperty.distance" :step="10" :max="5000" @input="e => viewShedOperate(e, 'distance')" /> <el-slider v-model="allProperty.distance" :step="10" :max="5000" @input="e => viewShedOperate(e, 'distance')" />
<span>值：{{ allProperty.distance }}</span>
</div> </div>
<div class="item-classify-item"> <div class="item-classify-item">
<span>透明度：</span> <span>透明度：</span>
<el-slider v-model="allProperty.opacity" :step="0.1" :max="1" @input="e => viewShedOperate(e, 'opacity')" /> <el-slider v-model="allProperty.opacity" :step="0.1" :max="1" @input="e => viewShedOperate(e, 'opacity')" />
<span>值：{{ allProperty.opacity }}</span>
</div> </div>
<div class="item-classify-item"> <div class="item-classify-item">
<span>视椎线框：</span> <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> </div>
<div class="sunshing-play"> <div class="sunshing-play">
@ -1131,6 +1135,9 @@ onUnmounted(() => {
.volumeAnalysis { .volumeAnalysis {
width: 400px; width: 400px;
} }
.viewShed {
width: 350px;
}
} }
} }
// element 组件样式 // element 组件样式

55
src/views/goverment/largeScreen/components/viewBookmark.vue
View File

@ -51,20 +51,23 @@ const getConfig = async () => {
const { result } = await getSystemConfig(requestData); const { result } = await getSystemConfig(requestData);
console.log(result, "6666666"); console.log(result, "6666666");
if (result) { if (result) {
bookMarkId.value = result.configId; if (listArr.value.length == 0 && !bookMarkId.value) {
let arr = JSON.parse(result.configValue); // 处理特殊情况，当没数据时再进行赋值，有数据时只取Id
if (arr && arr.length > 0) { let arr = JSON.parse(result.configValue);
console.log("历史数据", arr); if (arr && arr.length > 0) {
for (let i = 0; i < arr.length; i++) { console.log("历史数据", arr);
const item = arr[i]; for (let i = 0; i < arr.length; i++) {
// 删除未匹配项 const item = arr[i];
// if (listArr.value[0].img === "") { // 删除未匹配项
// formState.imgObject.splice(0, 1) // if (listArr.value[0].img === "") {
// formState.found = true // formState.imgObject.splice(0, 1)
// } // formState.found = true
listArr.value.push(item); // }
listArr.value.push(item);
}
} }
} }
bookMarkId.value = result.configId;
} }
}; };
// 飞到对应视角 // 飞到对应视角
@ -72,10 +75,18 @@ const flytoView = (item: any) => {
map.setCameraView(item.center); map.setCameraView(item.center);
}; };
// 删除视角书签 // 删除视角书签
const delteMark = (index: number) => { const delteMark = async (index: number) => {
listArr.value.splice(index, 1); 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 = () => { const addView = () => {
@ -105,19 +116,17 @@ const addView = () => {
// }); // });
item.img = response.image; item.img = response.image;
listArr.value.unshift(item); listArr.value.unshift(item);
console.log(listArr.value); // 记录到接口
// 记录到历史数据
let requestData: any = { configKey: "bookMarkConfig", configValue: JSON.stringify(listArr.value) }; let requestData: any = { configKey: "bookMarkConfig", configValue: JSON.stringify(listArr.value) };
if (listArr.value.length > 0 && !bookMarkId.value) { await getConfig();
await getConfig(); requestData.configId = bookMarkId.value;
requestData.configId = bookMarkId.value;
} else if (listArr.value.length > 0 && bookMarkId.value) {
requestData.configId = bookMarkId.value;
}
const res = await updateSystemConfig(requestData); const res = await updateSystemConfig(requestData);
console.log(res); console.log(res);
if (res.code == 200) { if (res.code == 200) {
ElMessage.success("操作成功"); ElMessage.success("操作成功");
} else {
// 当添加不成功时需要重新删除
listArr.value.splice(listArr.value.length - 1, 1);
} }
textVal.value = ""; textVal.value = "";
}); });

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

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

2
src/views/jxjview/layerManagement/components/operateDialog.vue
View File

@ -303,7 +303,7 @@ const layerTypeJson = ref([
name: "单张图片 (本地离线)", name: "单张图片 (本地离线)",
icon: new URL("@/assets/images/Mars3DImg/basemaps/offline.png", import.meta.url).href, icon: new URL("@/assets/images/Mars3DImg/basemaps/offline.png", import.meta.url).href,
type: "image", 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: "无底图", name: "无底图",