fix: BUG修改
This commit is contained in:
kun
parent
3473c294ca
commit
106da732f0
2
dist/index.html
vendored
2
dist/index.html
vendored
@ -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) {
|
||||
const color = globalState.themeConfig.primary;
|
||||
const isDark = globalState.themeConfig.isDark;
|
||||
|
||||
83
src/views/goverment/frontLargeScreen/bridgeFace.json
Normal file
83
src/views/goverment/frontLargeScreen/bridgeFace.json
Normal 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"
|
||||
]
|
||||
}
|
||||
@ -276,6 +276,7 @@ import * as Cesium from "mars3d-cesium";
|
||||
import "mars3d/dist/mars3d.css";
|
||||
import * as mars3d from "mars3d";
|
||||
import ConfigJson from "@/views/goverment/largeScreen/config.json";
|
||||
import BridgeJson from "./bridgeFace.json";
|
||||
import layoutTop from "@/components/layoutTop/index.vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { datas } from "@/enums/company/SetpsEnum";
|
||||
@ -302,6 +303,7 @@ import {
|
||||
equipmentList
|
||||
} from "@/api/modules/mapCommon";
|
||||
import { getDicList } from "@/api/modules/jxjview";
|
||||
const modelLineList = ref([]);
|
||||
const isViewStart = ref<boolean>(true);
|
||||
interface FormState {
|
||||
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 tiles3dLayer = new mars3d.layer.TilesetLayer({
|
||||
id: "bridge-model",
|
||||
name: "桥梁",
|
||||
url: "http://jxjzw.zhgdyun.com:6080/model/tileset.json",
|
||||
position: { lat: 23.808356, lng: 106.858628, alt: -30 },
|
||||
maximumScreenSpaceError: 1
|
||||
});
|
||||
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 = {
|
||||
configKey: "flyViewConfig"
|
||||
};
|
||||
@ -589,6 +659,7 @@ const loadModel = async () => {
|
||||
// 视角切换（分步执行）
|
||||
viewerChange(viewPoints);
|
||||
flyOperateShow.value = true;
|
||||
// checkModelId(false);
|
||||
};
|
||||
// 视点飞行视角切换
|
||||
const viewerChange = (points: any) => {
|
||||
@ -1175,21 +1246,82 @@ const initMars3d = (option: any) => {
|
||||
name: "POI查询",
|
||||
pid: 99 // 图层父级ID，一般图层管理中使用
|
||||
});
|
||||
graphicLayer.bindPopup((event: any) => {
|
||||
const attr = event.graphic.attr || {};
|
||||
if (!attr) {
|
||||
return;
|
||||
}
|
||||
const dom = initVue3Popup(QueryPopup, attr);
|
||||
return dom;
|
||||
});
|
||||
// graphicLayer.bindPopup((event: any) => {
|
||||
// const attr = event.graphic.attr || {};
|
||||
// if (!attr) {
|
||||
// return;
|
||||
// }
|
||||
// const dom = initVue3Popup(QueryPopup, attr);
|
||||
// return dom;
|
||||
// });
|
||||
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();
|
||||
// 查询配置点坐标效果
|
||||
getPointPosition();
|
||||
// 查询配置线效果
|
||||
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) => {
|
||||
|
||||
83
src/views/goverment/largeScreen/bridgeFace.json
Normal file
83
src/views/goverment/largeScreen/bridgeFace.json
Normal 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
340
src/views/goverment/largeScreen/components/modelLineMark.vue
Normal 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>
|
||||
@ -174,6 +174,8 @@
|
||||
<ViewBookmark :mapInstance="map" v-if="viewBookmarkShow" @hiddenConfim="viewBookmarkShow = 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 />
|
||||
<!-- 飞行漫游弹框 -->
|
||||
@ -307,6 +309,7 @@ import RegionalNavigation from "./components/regionalNavigation.vue";
|
||||
import MyTags from "./components/myTags.vue";
|
||||
import ViewBookmark from "./components/viewBookmark.vue";
|
||||
import FlyViewBookmark from "./components/flyViewBookmark.vue";
|
||||
import modelLineMark from "./components/modelLineMark.vue";
|
||||
import MapPrint from "./components/mapPrint.vue";
|
||||
import FlyRoam from "./components/flyRoam.vue";
|
||||
import MapMark from "./components/mapMark.vue";
|
||||
@ -322,6 +325,7 @@ import {
|
||||
equipmentList
|
||||
} from "@/api/modules/mapCommon";
|
||||
import { getDicList } from "@/api/modules/jxjview";
|
||||
const modelLineList = ref([]);
|
||||
const equipTypeDictLabel = ref();
|
||||
const equipTypeList = ref([]);
|
||||
const equipListShow = ref(false);
|
||||
@ -343,6 +347,7 @@ const flyRoamShow = ref(false); // 飞行漫游弹框
|
||||
const mapPrintShow = ref(false); // 地图打印弹框
|
||||
const viewBookmarkShow = ref(false); // 视角书签弹框
|
||||
const flyViewBookmarkShow = ref(false); // 视点飞行书签弹框
|
||||
const modelLineMarkShow = ref(false); // 模型标绘弹框
|
||||
const myTagsShow = ref(false); // 我的标记弹框
|
||||
const regionalNavigationShow = 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/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/fxmy.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;
|
||||
} else if (name == "视角书签") {
|
||||
viewBookmarkShow.value = true;
|
||||
flyViewBookmarkShow;
|
||||
} else if (name == "视点飞行") {
|
||||
flyViewBookmarkShow.value = true;
|
||||
} else if (name == "模型标绘") {
|
||||
modelLineMarkShow.value = true;
|
||||
} else if (name == "地图打印") {
|
||||
mapPrintShow.value = true;
|
||||
} else if (name == "飞行漫游") {
|
||||
@ -1132,12 +1139,69 @@ const initMars3d = (option: any) => {
|
||||
// return dom;
|
||||
// });
|
||||
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();
|
||||
// 查询配置点坐标效果
|
||||
getPointPosition();
|
||||
// 查询配置线效果
|
||||
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) => {
|
||||
@ -1751,6 +1815,10 @@ onUnmounted(() => {
|
||||
background: rgba(51, 89, 181, 0.6);
|
||||
}
|
||||
}
|
||||
.tool-menu-operate {
|
||||
top: 56px;
|
||||
right: 10px;
|
||||
}
|
||||
.basic-map {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user