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-30 21:17:28 +08:00
parent 3473c294ca
commit 106da732f0
6 changed files with 716 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/index.html vendored
View File

@ -1,4 +1,4 @@
<!doctype html><html lang="en"><head><meta charset="UTF-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title></title><script type="module" crossorigin src="./assets/js/index-7e224516.js"></script><link rel="stylesheet" href="./assets/css/index-3a232b61.css"></head><body><div id="app"><style>#app,body,html{width:100%;height:100%;padding:0;margin:0}.loading-box{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%}.loading-box .loading-wrap{display:flex;align-items:center;justify-content:center;padding:98px}.dot{position:relative;box-sizing:border-box;display:inline-block;width:32px;height:32px;font-size:32px;transform:rotate(45deg);animation:ant-rotate 1.2s infinite linear}.dot i{position:absolute;display:block;width:14px;height:14px;background-color:#409eff;border-radius:100%;opacity:.3;transform:scale(.75);transform-origin:50% 50%;animation:ant-spin-move 1s infinite linear alternate}.dot i:first-child{top:0;left:0}.dot i:nth-child(2){top:0;right:0;animation-delay:.4s}.dot i:nth-child(3){right:0;bottom:0;animation-delay:.8s}.dot i:nth-child(4){bottom:0;left:0;animation-delay:1.2s}@keyframes ant-rotate{to{transform:rotate(405deg)}}@keyframes ant-spin-move{to{opacity:1}}</style><div class="loading-box"><div class="loading-wrap"><span class="dot dot-spin"><i></i><i></i><i></i><i></i></span></div></div></div><script>const globalState = JSON.parse(window.localStorage.getItem("GlobalState")); <!doctype html><html lang="en"><head><meta charset="UTF-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title></title><script type="module" crossorigin src="./assets/js/index-df2ae8f2.js"></script><link rel="stylesheet" href="./assets/css/index-3a232b61.css"></head><body><div id="app"><style>#app,body,html{width:100%;height:100%;padding:0;margin:0}.loading-box{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%}.loading-box .loading-wrap{display:flex;align-items:center;justify-content:center;padding:98px}.dot{position:relative;box-sizing:border-box;display:inline-block;width:32px;height:32px;font-size:32px;transform:rotate(45deg);animation:ant-rotate 1.2s infinite linear}.dot i{position:absolute;display:block;width:14px;height:14px;background-color:#409eff;border-radius:100%;opacity:.3;transform:scale(.75);transform-origin:50% 50%;animation:ant-spin-move 1s infinite linear alternate}.dot i:first-child{top:0;left:0}.dot i:nth-child(2){top:0;right:0;animation-delay:.4s}.dot i:nth-child(3){right:0;bottom:0;animation-delay:.8s}.dot i:nth-child(4){bottom:0;left:0;animation-delay:1.2s}@keyframes ant-rotate{to{transform:rotate(405deg)}}@keyframes ant-spin-move{to{opacity:1}}</style><div class="loading-box"><div class="loading-wrap"><span class="dot dot-spin"><i></i><i></i><i></i><i></i></span></div></div></div><script>const globalState = JSON.parse(window.localStorage.getItem("GlobalState"));
if (globalState) { if (globalState) {
const color = globalState.themeConfig.primary; const color = globalState.themeConfig.primary;
const isDark = globalState.themeConfig.isDark; const isDark = globalState.themeConfig.isDark;

83
src/views/goverment/frontLargeScreen/bridgeFace.json Normal file
View File

@ -0,0 +1,83 @@
{
"bridge": [
"c6c924912dcb486982ebdec467c98808",
"ba562d279b924438aa61f348fb89aece",
"a7c3535c855a4050a2eb7ef7c89e0c47",
"81cd0488b9314ed98348d650abf29aa2",
"16c6cae593254572bec338149a2f3c64",
"308b6e8fd5a14dba852613ca10a834ee",
"35026dd5e9374fa4a71721806f8d763f",
"8f936662e17c48a799951cb05de4cdfd",
"e0632dd5a29a4b5daad53df462f11462",
"b9a7c7996a474b5097f0abc9615a9374",
"70f2ff9ff9e74e00bb3be403ba72690e",
"cf0f1a408f92410ab3a7380ba9130282",
"d622ec6af22147a3832bbbd2770684d2",
"98ff576414e64cc59796a5033ce70ae8",
"43e434a1c678491ba6f41dcc8860774d",
"585c4cdb705448feb51b3e40fb7818c5",
"a01c4e321d6147c584ac401975270a0b",
"04d835860aa04a17adfca7b60d13cb3c",
"8e0c6034970142ef9be27259ca249cf7",
"7f9952d246814537bb46cc43c2019570",
"0e6c9fc85663460b926122c783fb18b8",
"51c7e779097c456f9d38563479ec2861",
"981778a5ebb04d96b6854c38942ccb8a",
"ca132856d8224d7ab352e5dc757726e2",
"6ba0a45cbbcf44db96cb3ec7cb81ff22",
"cd9f34609c3b45e7879b027ab9f03eea",
"523942f174794d8eb6d0c20a3c537e0d",
"e8f888d28be1499eb977050bdef314cb",
"0d719382554a4227846ade8eec55eb1b",
"5c1397ab1e8c40e6b6c2012e7e35f2a8",
"d8d23df3953b474b952dce0498208c6c",
"55a93ad9ce4549d6a83c2b9d95806e94",
"3fa119b4b5b34fae9f0d48fbd9bf0545",
"a907b35c7e84413aa0f7165946582e2d",
"f005bfeb70b34fd49815863444ccd559",
"3e6aedd3076c4f698fb31916f1ec675a",
"53e0b6531d914e10be3005ff106ce38c",
"f5874f85e5304c43910268bd10c1497e",
"cdb5044de3da4932a49a1c5a1f078017",
"e30327b94cbb40dcb0fb7bf12edbe654",
"73bcc62801014640973852256cdb1489",
"3686e5d0d2304a81a0475d29f0e8b991",
"da49cdbe5d314054a8083efb4f7dc150",
"1411a027a77248208400280a258bbc4c",
"67c324563dd241399c1544b61a9ed404",
"c8bebf998afd43a3bdeca319242fd4b8",
"fd4f6ffe292f4d8f9d01c522c9ac201f",
"dcdd6881b0534f37a804c6e2a249ecf8",
"2b93046f2868474a9539e3d057821404",
"82270ae71ab14ba696a099345140eff7",
"3c7ed26d203d46ceaaa554976f49eb27",
"045f496ee7c64afeaa689ca178506313",
"298d021af0cc459f9bcb6be0ce2ed820",
"35bf1771fcc14c5dbbe464a6ad6601f5",
"7013fd7fe26f4eeeb6848f27aae30e40",
"6b880076803b4a11bd95994db6aaf825",
"2bef1d286cac4992af2cd460c0e30332",
"492cf843d042463a9653f6af7aa80451",
"f7e958d3a6084651b128e4d452248cc3",
"492cf843d042463a9653f6af7aa80451",
"f7e958d3a6084651b128e4d452248cc3",
"50302d48aded430a842572441ad208a0",
"250f5372e2e84abf8a7a284f85a46bbb",
"178e99943d164aa38c1543871be4feb0",
"59315d2b698e42f79fae0b1f0ce92e51",
"fee4efac86ab4b6da9b866d81a0f2f38",
"68d24b1db05e4f39a646f0edc8c8324d",
"2721596659d946b19ecb0159ebae0657",
"22a050ed4382487c9f349c6fa2d26189",
"9e58aa2c2132420384cee0ef03999523",
"8eef2d9f88a649beb056fd57145a8e08",
"2d93564f38384216b5f4e01933acb858",
"dd93247c48df4fe0bfe74ffd54568902",
"b8743c5d7cfe41db8593c765e5441943",
"fcc06d3c3fb84d67a7aa32275b10c415",
"abd8d288ab18479894d2a38c33e95f49",
"6b585054f41e4284bb32b3ab52370ea7",
"a8ae1ee1c77542d69069c9937d5503c9",
"ebc2f25fbdc842cdbb66d3404e1b37b2"
]
}

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

@ -276,6 +276,7 @@ import * as Cesium from "mars3d-cesium";
import "mars3d/dist/mars3d.css"; import "mars3d/dist/mars3d.css";
import * as mars3d from "mars3d"; import * as mars3d from "mars3d";
import ConfigJson from "@/views/goverment/largeScreen/config.json"; import ConfigJson from "@/views/goverment/largeScreen/config.json";
import BridgeJson from "./bridgeFace.json";
import layoutTop from "@/components/layoutTop/index.vue"; import layoutTop from "@/components/layoutTop/index.vue";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { datas } from "@/enums/company/SetpsEnum"; import { datas } from "@/enums/company/SetpsEnum";
@ -302,6 +303,7 @@ import {
equipmentList equipmentList
} from "@/api/modules/mapCommon"; } from "@/api/modules/mapCommon";
import { getDicList } from "@/api/modules/jxjview"; import { getDicList } from "@/api/modules/jxjview";
const modelLineList = ref([]);
const isViewStart = ref<boolean>(true); const isViewStart = ref<boolean>(true);
interface FormState { interface FormState {
isStart: boolean; isStart: boolean;
@ -564,15 +566,83 @@ const getEquipTypeList = async () => {
}); });
} }
}; };
// 根据控件id隐藏控件
const checkModelId = (boolean: any) => {
let ids = BridgeJson.bridge;
new Cesium.Cesium3DTileStyle({
show: {
evaluate: function (feature: any) {
console.log(feature, "id集合-----------");
let ishow = boolean;
ids.includes(feature._batchId) ? (ishow = ishow) : (ishow = !ishow);
return ishow;
}
}
});
};
// 设置特定模型 // 设置特定模型
const loadModel = async () => { const loadModel = async () => {
const tiles3dLayer = new mars3d.layer.TilesetLayer({ const tiles3dLayer = new mars3d.layer.TilesetLayer({
id: "bridge-model",
name: "桥梁", name: "桥梁",
url: "http://jxjzw.zhgdyun.com:6080/model/tileset.json", url: "http://jxjzw.zhgdyun.com:6080/model/tileset.json",
position: { lat: 23.808356, lng: 106.858628, alt: -30 }, position: { lat: 23.808356, lng: 106.858628, alt: -30 },
maximumScreenSpaceError: 1 maximumScreenSpaceError: 1
}); });
map.addLayer(tiles3dLayer); map.addLayer(tiles3dLayer);
// let ids = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
// tiles3dLayer.style = new Cesium.Cesium3DTileStyle({
// ...tiles3dLayer.style,
// color: {
// evaluateColor: function (feature: any, result: any) {
// console.log(feature, result, "66666666666688888888888889999999999999");
// // return Cesium.Color.clone(Cesium.Color.WHITE, result);
// }
// },
// show: {
// evaluate: function (id: any) {
// console.log(id, "id集合-----------");
// // let ishow = false;
// // ids.includes(feature._batchId) ? (ishow = ishow) : (ishow = !ishow);
// // console.log(ishow);
// return false;
// }
// }
// });
// tiles3dLayer.style = {
// // color : ids.includes("${id}") ? "false" : "true"
// color: {
// conditions: [
// ["${id} ==='c6c924912dcb486982ebdec467c98808'", "rgb(255, 255, 255)"],
// ["true", "rgba(255, 200, 200,0)"]
// ]
// }
// // show: ids.includes("${id}")
// // show: {
// // conditions: [
// // [ids.includes("${id}"), "false"],
// // ["true", "true"]
// // ]
// // }
// // show: ids.includes("${id}") ? "false" : "true"
// // show: {
// // conditions: [
// // ["${id} == 'c6c924912dcb486982ebdec467c98808'", "false"],
// // ["true", "true"]
// // ]
// // }
// };
// tiles3dLayer.style = new Cesium.Cesium3DTileStyle({
// show: {
// evaluate: function (feature: any) {
// console.log(feature, "id集合-----------");
// let ishow = false;
// ids.includes(feature.featureId) ? (ishow = ishow) : (ishow = !ishow);
// console.log(ishow);
// return ishow;
// }
// }
// });
let requestData = { let requestData = {
configKey: "flyViewConfig" configKey: "flyViewConfig"
}; };
@ -589,6 +659,7 @@ const loadModel = async () => {
// 视角切换（分步执行） // 视角切换（分步执行）
viewerChange(viewPoints); viewerChange(viewPoints);
flyOperateShow.value = true; flyOperateShow.value = true;
// checkModelId(false);
}; };
// 视点飞行视角切换 // 视点飞行视角切换
const viewerChange = (points: any) => { const viewerChange = (points: any) => {
@ -1175,21 +1246,82 @@ const initMars3d = (option: any) => {
name: "POI查询", name: "POI查询",
pid: 99 // 图层父级ID，一般图层管理中使用 pid: 99 // 图层父级ID，一般图层管理中使用
}); });
graphicLayer.bindPopup((event: any) => { // graphicLayer.bindPopup((event: any) => {
const attr = event.graphic.attr || {}; // const attr = event.graphic.attr || {};
if (!attr) { // if (!attr) {
return; // return;
} // }
const dom = initVue3Popup(QueryPopup, attr); // const dom = initVue3Popup(QueryPopup, attr);
return dom; // return dom;
}); // });
map.addLayer(graphicLayer); map.addLayer(graphicLayer);
// 监听比例尺的变化
const distanceLegend = new mars3d.control.DistanceLegend({ left: "100px", bottom: "2px" });
map.addControl(distanceLegend);
distanceLegend.on(mars3d.EventType.change, function (event) {
console.log("比例尺发生变化", event);
if (event.distance > 1000) {
showModelLine();
} else {
closeModelLine();
}
});
// 获取配置文件底图数据 // 获取配置文件底图数据
getBasicMaps(); getBasicMaps();
// 查询配置点坐标效果 // 查询配置点坐标效果
getPointPosition(); getPointPosition();
// 查询配置线效果 // 查询配置线效果
getLineEffect(); getLineEffect();
// 查询模型线效果
getModelLine();
};
// 隐藏模型线效果并显示模型
const closeModelLine = () => {
modelLineList.value.map(item => {
let graphic = graphicLayer.getGraphicById(item.id);
graphic.show = false;
});
let modelGraphic = map.getLayerById("bridge-model");
modelGraphic.show = true;
};
// 显示模型线效果并隐藏模型
const showModelLine = () => {
modelLineList.value.map(item => {
let graphic = graphicLayer.getGraphicById(item.id);
graphic.show = true;
});
let modelGraphic = map.getLayerById("bridge-model");
modelGraphic.show = false;
};
// 获取模型线效果
const getModelLine = async () => {
let requestData = {
configKey: "modelLineConfig"
};
const { result } = await getSystemConfig(requestData);
console.log(result, "6666666");
if (result) {
let arr = JSON.parse(result.configValue);
if (arr && arr.length > 0) {
console.log("历史数据", arr);
modelLineList.value = arr;
for (let i = 0; i < arr.length; i++) {
const item = arr[i];
const graphicImg = new mars3d.graphic.CurveEntity({
id: item.id,
positions: item.points,
style: {
color: item.color,
width: 3,
clampToGround: true
},
show: false
});
console.log(graphicImg);
graphicLayer.addGraphic(graphicImg);
}
}
}
}; };
// 取区域内的随机点 // 取区域内的随机点
const randomPoint = (position: any) => { const randomPoint = (position: any) => {

83
src/views/goverment/largeScreen/bridgeFace.json Normal file
View File

@ -0,0 +1,83 @@
{
"bridge": [
"c6c924912dcb486982ebdec467c98808",
"ba562d279b924438aa61f348fb89aece",
"a7c3535c855a4050a2eb7ef7c89e0c47",
"81cd0488b9314ed98348d650abf29aa2",
"16c6cae593254572bec338149a2f3c64",
"308b6e8fd5a14dba852613ca10a834ee",
"35026dd5e9374fa4a71721806f8d763f",
"8f936662e17c48a799951cb05de4cdfd",
"e0632dd5a29a4b5daad53df462f11462",
"b9a7c7996a474b5097f0abc9615a9374",
"70f2ff9ff9e74e00bb3be403ba72690e",
"cf0f1a408f92410ab3a7380ba9130282",
"d622ec6af22147a3832bbbd2770684d2",
"98ff576414e64cc59796a5033ce70ae8",
"43e434a1c678491ba6f41dcc8860774d",
"585c4cdb705448feb51b3e40fb7818c5",
"a01c4e321d6147c584ac401975270a0b",
"04d835860aa04a17adfca7b60d13cb3c",
"8e0c6034970142ef9be27259ca249cf7",
"7f9952d246814537bb46cc43c2019570",
"0e6c9fc85663460b926122c783fb18b8",
"51c7e779097c456f9d38563479ec2861",
"981778a5ebb04d96b6854c38942ccb8a",
"ca132856d8224d7ab352e5dc757726e2",
"6ba0a45cbbcf44db96cb3ec7cb81ff22",
"cd9f34609c3b45e7879b027ab9f03eea",
"523942f174794d8eb6d0c20a3c537e0d",
"e8f888d28be1499eb977050bdef314cb",
"0d719382554a4227846ade8eec55eb1b",
"5c1397ab1e8c40e6b6c2012e7e35f2a8",
"d8d23df3953b474b952dce0498208c6c",
"55a93ad9ce4549d6a83c2b9d95806e94",
"3fa119b4b5b34fae9f0d48fbd9bf0545",
"a907b35c7e84413aa0f7165946582e2d",
"f005bfeb70b34fd49815863444ccd559",
"3e6aedd3076c4f698fb31916f1ec675a",
"53e0b6531d914e10be3005ff106ce38c",
"f5874f85e5304c43910268bd10c1497e",
"cdb5044de3da4932a49a1c5a1f078017",
"e30327b94cbb40dcb0fb7bf12edbe654",
"73bcc62801014640973852256cdb1489",
"3686e5d0d2304a81a0475d29f0e8b991",
"da49cdbe5d314054a8083efb4f7dc150",
"1411a027a77248208400280a258bbc4c",
"67c324563dd241399c1544b61a9ed404",
"c8bebf998afd43a3bdeca319242fd4b8",
"fd4f6ffe292f4d8f9d01c522c9ac201f",
"dcdd6881b0534f37a804c6e2a249ecf8",
"2b93046f2868474a9539e3d057821404",
"82270ae71ab14ba696a099345140eff7",
"3c7ed26d203d46ceaaa554976f49eb27",
"045f496ee7c64afeaa689ca178506313",
"298d021af0cc459f9bcb6be0ce2ed820",
"35bf1771fcc14c5dbbe464a6ad6601f5",
"7013fd7fe26f4eeeb6848f27aae30e40",
"6b880076803b4a11bd95994db6aaf825",
"2bef1d286cac4992af2cd460c0e30332",
"492cf843d042463a9653f6af7aa80451",
"f7e958d3a6084651b128e4d452248cc3",
"492cf843d042463a9653f6af7aa80451",
"f7e958d3a6084651b128e4d452248cc3",
"50302d48aded430a842572441ad208a0",
"250f5372e2e84abf8a7a284f85a46bbb",
"178e99943d164aa38c1543871be4feb0",
"59315d2b698e42f79fae0b1f0ce92e51",
"fee4efac86ab4b6da9b866d81a0f2f38",
"68d24b1db05e4f39a646f0edc8c8324d",
"2721596659d946b19ecb0159ebae0657",
"22a050ed4382487c9f349c6fa2d26189",
"9e58aa2c2132420384cee0ef03999523",
"8eef2d9f88a649beb056fd57145a8e08",
"2d93564f38384216b5f4e01933acb858",
"dd93247c48df4fe0bfe74ffd54568902",
"b8743c5d7cfe41db8593c765e5441943",
"fcc06d3c3fb84d67a7aa32275b10c415",
"abd8d288ab18479894d2a38c33e95f49",
"6b585054f41e4284bb32b3ab52370ea7",
"a8ae1ee1c77542d69069c9937d5503c9",
"ebc2f25fbdc842cdbb66d3404e1b37b2"
]
}

340
src/views/goverment/largeScreen/components/modelLineMark.vue Normal file
View File

@ -0,0 +1,340 @@
<template>
<div class="main-content">
<div class="main-content-title">
<span>模型线标绘</span>
<el-icon size="16" color="#fff" @click="closeDiv"><Close /></el-icon>
</div>
<div class="equip-list">
<div class="type-select">
<span>标注颜色：</span>
<el-color-picker v-model="formData.lineColor" />
</div>
<div class="type-select">
<span>二维贴地：</span>
<el-button type="primary" @click="drawCurve(true)">曲线</el-button>
</div>
<el-table
:data="tableData"
rowKey="id"
:header-cell-style="{ backgroundColor: '#3359B5', color: '#fff', borderColor: '#3F5C8E' }"
>
<el-table-column align="center" label="颜色">
<template #default="{ row }">
<el-color-picker v-model="row.color" v-if="row.isEdit" />
<span v-else>{{ row.color }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="操作">
<template #default="scope">
<span class="primaryBtn" v-if="scope.row.isEdit" @click="saveEdit(scope.row)">保存</span>
<span class="primaryBtn" v-if="!scope.row.isEdit" @click="scope.row.isEdit = true">编辑</span>
<span class="deleteBtn" @click="delteMark(scope.row, scope.$index)">删除</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script lang="ts" setup>
//引入cesium基础库
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
import * as Cesium from "mars3d-cesium";
//导入mars3d主库
import "mars3d/dist/mars3d.css";
import * as mars3d from "mars3d";
import { ref, onMounted, onUnmounted, reactive } from "vue";
import { getSystemConfig, updateSystemConfig } from "@/api/modules/mapCommon";
import { ElMessage } from "element-plus";
const props = defineProps(["mapInstance", "graphicInstance"]);
const emits = defineEmits(["hiddenConfim", "saveJson"]);
const bookMarkId = ref(null);
const tableData = ref<any>([]);
const formData = ref({
lineColor: ""
});
let map: any = props.mapInstance;
let graphicLayer: any;
let parentGraphicLayer: any = props.graphicInstance;
onMounted(async () => {
map.scene.globe.depthTestAgainstTerrain = false; // 不投射到地形上
graphicLayer = new mars3d.layer.GraphicLayer();
map.addLayer(graphicLayer);
await getConfig();
graphicLayer.on(mars3d.EventType.drawCreated, function (e) {
console.log("创建完成", e);
addMark(e.graphic);
});
});
// 添加
const addMark = async (obj: any) => {
const item = {
color: formData.value.lineColor,
id: obj.id,
points: [] as any
};
obj.points.map((val: any) => {
item.points.push([val.lng, val.lat, val.alt]);
});
tableData.value.unshift(item);
console.log(tableData.value);
// 记录到接口
let requestData: any = { configKey: "modelLineConfig", configValue: JSON.stringify(tableData.value) };
await getConfig();
requestData.configId = bookMarkId.value;
const res = await updateSystemConfig(requestData);
console.log(res);
if (res.code == 200) {
ElMessage.success("操作成功");
// const graphicImg = new mars3d.graphic.CurveEntity({
// positions: obj.points,
// style: {
// color: formData.value.lineColor,
// width: 3,
// clampToGround: true
// }
// })
// graphicLayer.addGraphic(graphicImg);
// const pointGraphic = graphicLayer.getGraphicById("line-tip");
// pointGraphic && pointGraphic.remove(true);
} else {
// 当添加不成功时需要重新删除
tableData.value.splice(listArr.value.length - 1, 1);
}
};
// 获取模型标绘配置
const getConfig = async () => {
let requestData = {
configKey: "modelLineConfig"
};
const { result } = await getSystemConfig(requestData);
console.log(result, "6666666");
if (result) {
if (tableData.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
// }
tableData.value.push(item);
const graphicImg = new mars3d.graphic.CurveEntity({
id: item.id,
positions: item.points,
style: {
color: item.color,
width: 3,
clampToGround: true
}
});
console.log(graphicImg);
graphicLayer.addGraphic(graphicImg);
}
}
}
bookMarkId.value = result.configId;
}
};
// 删除
const delteMark = async (row: any, index: number) => {
tableData.value.splice(index, 1);
// 记录到接口
console.log(tableData.value);
let requestData: any = { configKey: "modelLineConfig", configValue: JSON.stringify(tableData.value) };
await getConfig();
requestData.configId = bookMarkId.value;
const res = await updateSystemConfig(requestData);
console.log(res);
if (res.code == 200) {
ElMessage.success("操作成功");
let graphic = graphicLayer.getGraphicById(row.id);
console.log(graphic, "子图像");
if (!graphic) {
graphic = parentGraphicLayer.getGraphicById(row.id);
}
graphic && graphic.remove(true);
}
};
// 保存编辑信息
const saveEdit = async (row: any) => {
let graphic = graphicLayer.getGraphicById(row.id);
console.log(graphic, "子图像");
if (!graphic) {
graphic = parentGraphicLayer.getGraphicById(row.id);
}
graphic.setStyle({
color: row.color
});
row.isEdit = false;
};
// 绘制曲线
const drawCurve = (clampToGround: boolean) => {
if (!formData.value.lineColor) {
ElMessage("请先选择颜色");
return;
}
graphicLayer.startDraw({
id: "line-tip",
type: "curve",
style: {
color: formData.value.lineColor,
width: 3,
clampToGround: clampToGround
}
});
};
const closeDiv = () => {
emits("hiddenConfim");
};
onUnmounted(() => {
map = null;
});
</script>
<style scoped lang="scss">
@mixin flex {
display: flex;
align-items: center;
}
// 菜单弹框出现动画
@keyframes fadeIn {
0% {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
100% {
opacity: 1;
transform: none;
}
}
.main-content {
position: absolute;
top: 60px;
right: 10px;
padding-bottom: 10px;
background-image: none !important;
border: 1px solid #008aff70;
border-radius: 2px !important;
background-color: rgba(23, 49, 71, 0.8);
width: 300px;
box-shadow: 0 4px 15px 1px #02213bb3;
animation: fadeIn 1s;
&-title {
@include flex;
width: 100%;
height: 40px;
padding: 0 5px 0 10px;
background-image: url("@/assets/images/Mars3DIcon/subClassTitle.png");
background-size: 100% 100%;
background-repeat: no-repeat;
span {
font-size: 16px;
color: #0089fe;
margin-right: auto;
}
:deep() {
.el-icon {
cursor: pointer;
}
}
}
.equip-list {
width: 100%;
height: 100%;
padding: 15px 25px;
.type-select {
@include flex;
color: white;
margin-bottom: 10px;
:deep() {
.el-checkbox__inner,
.el-radio__inner {
background-color: transparent;
}
.el-checkbox__label,
.el-radio__label {
color: white;
}
}
}
.primaryBtn {
color: #61aefe;
margin-right: 10px;
cursor: pointer;
}
.deleteBtn {
color: #f57272;
margin-right: 10px;
cursor: pointer;
}
.btn-style {
@include flex;
margin-top: 15px;
:deep() {
.el-button {
width: 100%;
}
}
}
}
}
// element 组件样式
:deep() {
.el-input__wrapper {
background-color: transparent;
}
.el-input__inner {
color: white;
}
.el-input-number__increase,
.el-input-number__decrease {
background-color: transparent;
color: white;
}
.el-button {
background: rgba(51, 89, 181, 0.6);
border-radius: 6px;
border: 0;
}
.el-table {
background-color: transparent;
tr {
background-color: transparent;
}
}
.el-table__border-left-patch {
background-color: #3f5c8e;
}
.el-table--border .el-table__inner-wrapper::after {
background-color: #3f5c8e;
}
.el-table--border::after {
background-color: #3f5c8e;
}
.el-table__inner-wrapper::before {
background-color: #3f5c8e;
}
.el-table td.el-table__cell {
border-color: #3f5c8e;
}
.el-table--border .el-table__cell {
border-color: #3f5c8e;
}
.cell {
color: white;
}
.el-table__row:hover {
background-color: transparent;
}
.el-table__body tr:hover > td {
// background-color: #008bff !important;
background-color: transparent !important;
}
}
</style>

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

@ -174,6 +174,8 @@
<ViewBookmark :mapInstance="map" v-if="viewBookmarkShow" @hiddenConfim="viewBookmarkShow = false" v-draggable /> <ViewBookmark :mapInstance="map" v-if="viewBookmarkShow" @hiddenConfim="viewBookmarkShow = false" v-draggable />
<!-- 视点飞行书签弹框 --> <!-- 视点飞行书签弹框 -->
<FlyViewBookmark :mapInstance="map" v-if="flyViewBookmarkShow" @hiddenConfim="flyViewBookmarkShow = false" v-draggable /> <FlyViewBookmark :mapInstance="map" v-if="flyViewBookmarkShow" @hiddenConfim="flyViewBookmarkShow = false" v-draggable />
<!-- 模型标绘弹框 -->
<modelLineMark :mapInstance="map" v-if="modelLineMarkShow" @hiddenConfim="modelLineMarkShow = false" v-draggable />
<!-- 地图打印弹框 --> <!-- 地图打印弹框 -->
<MapPrint :mapInstance="map" v-if="mapPrintShow" @hiddenConfim="mapPrintShow = false" v-draggable /> <MapPrint :mapInstance="map" v-if="mapPrintShow" @hiddenConfim="mapPrintShow = false" v-draggable />
<!-- 飞行漫游弹框 --> <!-- 飞行漫游弹框 -->
@ -307,6 +309,7 @@ import RegionalNavigation from "./components/regionalNavigation.vue";
import MyTags from "./components/myTags.vue"; import MyTags from "./components/myTags.vue";
import ViewBookmark from "./components/viewBookmark.vue"; import ViewBookmark from "./components/viewBookmark.vue";
import FlyViewBookmark from "./components/flyViewBookmark.vue"; import FlyViewBookmark from "./components/flyViewBookmark.vue";
import modelLineMark from "./components/modelLineMark.vue";
import MapPrint from "./components/mapPrint.vue"; import MapPrint from "./components/mapPrint.vue";
import FlyRoam from "./components/flyRoam.vue"; import FlyRoam from "./components/flyRoam.vue";
import MapMark from "./components/mapMark.vue"; import MapMark from "./components/mapMark.vue";
@ -322,6 +325,7 @@ import {
equipmentList equipmentList
} from "@/api/modules/mapCommon"; } from "@/api/modules/mapCommon";
import { getDicList } from "@/api/modules/jxjview"; import { getDicList } from "@/api/modules/jxjview";
const modelLineList = ref([]);
const equipTypeDictLabel = ref(); const equipTypeDictLabel = ref();
const equipTypeList = ref([]); const equipTypeList = ref([]);
const equipListShow = ref(false); const equipListShow = ref(false);
@ -343,6 +347,7 @@ const flyRoamShow = ref(false); // 飞行漫游弹框
const mapPrintShow = ref(false); // 地图打印弹框 const mapPrintShow = ref(false); // 地图打印弹框
const viewBookmarkShow = ref(false); // 视角书签弹框 const viewBookmarkShow = ref(false); // 视角书签弹框
const flyViewBookmarkShow = ref(false); // 视点飞行书签弹框 const flyViewBookmarkShow = ref(false); // 视点飞行书签弹框
const modelLineMarkShow = ref(false); // 模型标绘弹框
const myTagsShow = ref(false); // 我的标记弹框 const myTagsShow = ref(false); // 我的标记弹框
const regionalNavigationShow = ref(false); // 地区导航弹框 const regionalNavigationShow = ref(false); // 地区导航弹框
const pickingShow = ref(false); // 坐标定位弹框 const pickingShow = ref(false); // 坐标定位弹框
@ -748,6 +753,7 @@ const data = [
{ name: "我的标记", icon: new URL("@/assets/images/Mars3DIcon/wdbj.png", import.meta.url).href }, { name: "我的标记", icon: new URL("@/assets/images/Mars3DIcon/wdbj.png", import.meta.url).href },
{ name: "视角书签", icon: new URL("@/assets/images/Mars3DIcon/sjsq.png", import.meta.url).href }, { name: "视角书签", icon: new URL("@/assets/images/Mars3DIcon/sjsq.png", import.meta.url).href },
{ name: "视点飞行", icon: new URL("@/assets/images/Mars3DIcon/sjsq.png", import.meta.url).href }, { name: "视点飞行", icon: new URL("@/assets/images/Mars3DIcon/sjsq.png", import.meta.url).href },
{ name: "模型标绘", icon: new URL("@/assets/images/Mars3DIcon/sjsq.png", import.meta.url).href },
{ name: "地图打印", icon: new URL("@/assets/images/Mars3DIcon/dtdy.png", import.meta.url).href }, { name: "地图打印", icon: new URL("@/assets/images/Mars3DIcon/dtdy.png", import.meta.url).href },
{ name: "飞行漫游", icon: new URL("@/assets/images/Mars3DIcon/fxmy.png", import.meta.url).href }, { name: "飞行漫游", icon: new URL("@/assets/images/Mars3DIcon/fxmy.png", import.meta.url).href },
{ name: "图上标绘", icon: new URL("@/assets/images/Mars3DIcon/tsbh.png", import.meta.url).href }, { name: "图上标绘", icon: new URL("@/assets/images/Mars3DIcon/tsbh.png", import.meta.url).href },
@ -907,9 +913,10 @@ const clickMenu = (name: any) => {
myTagsShow.value = true; myTagsShow.value = true;
} else if (name == "视角书签") { } else if (name == "视角书签") {
viewBookmarkShow.value = true; viewBookmarkShow.value = true;
flyViewBookmarkShow;
} else if (name == "视点飞行") { } else if (name == "视点飞行") {
flyViewBookmarkShow.value = true; flyViewBookmarkShow.value = true;
} else if (name == "模型标绘") {
modelLineMarkShow.value = true;
} else if (name == "地图打印") { } else if (name == "地图打印") {
mapPrintShow.value = true; mapPrintShow.value = true;
} else if (name == "飞行漫游") { } else if (name == "飞行漫游") {
@ -1132,12 +1139,69 @@ const initMars3d = (option: any) => {
// return dom; // return dom;
// }); // });
map.addLayer(graphicLayer); map.addLayer(graphicLayer);
// 监听比例尺的变化
const distanceLegend = new mars3d.control.DistanceLegend({ left: "100px", bottom: "2px" });
map.addControl(distanceLegend);
distanceLegend.on(mars3d.EventType.change, function (event) {
console.log("比例尺发生变化", event);
if (event.distance > 1000) {
showModelLine();
} else {
closeModelLine();
}
});
// 获取配置文件底图数据 // 获取配置文件底图数据
getBasicMaps(); getBasicMaps();
// 查询配置点坐标效果 // 查询配置点坐标效果
getPointPosition(); getPointPosition();
// 查询配置线效果 // 查询配置线效果
getLineEffect(); getLineEffect();
// 查询配置模型线效果
getModelLine();
};
// 隐藏模型线效果并显示模型
const closeModelLine = () => {
modelLineList.value.map(item => {
let graphic = graphicLayer.getGraphicById(item.id);
graphic.show = false;
});
};
// 显示模型线效果并隐藏模型
const showModelLine = () => {
modelLineList.value.map(item => {
let graphic = graphicLayer.getGraphicById(item.id);
graphic.show = true;
});
};
// 获取模型线效果
const getModelLine = async () => {
let requestData = {
configKey: "modelLineConfig"
};
const { result } = await getSystemConfig(requestData);
console.log(result, "6666666");
if (result) {
let arr = JSON.parse(result.configValue);
if (arr && arr.length > 0) {
console.log("历史数据", arr);
modelLineList.value = arr;
for (let i = 0; i < arr.length; i++) {
const item = arr[i];
const graphicImg = new mars3d.graphic.CurveEntity({
id: item.id,
positions: item.points,
style: {
color: item.color,
width: 3,
clampToGround: true
},
show: false
});
console.log(graphicImg);
graphicLayer.addGraphic(graphicImg);
}
}
}
}; };
// 取区域内的随机点 // 取区域内的随机点
const randomPoint = (position: any) => { const randomPoint = (position: any) => {
@ -1751,6 +1815,10 @@ onUnmounted(() => {
background: rgba(51, 89, 181, 0.6); background: rgba(51, 89, 181, 0.6);
} }
} }
.tool-menu-operate {
top: 56px;
right: 10px;
}
.basic-map { .basic-map {
position: absolute; position: absolute;
top: 60px; top: 60px;