fix: BUG修改

src/components/testMap/index.scss

@@ -20,7 +20,7 @@
 		overflow: hidden;
 	}
 	.layer-config {
-		width: 360px;
+		width: 400px;
 		height: auto;
 		min-width: 360px;
 		min-height: 420px;
@@ -48,10 +48,88 @@
 				margin-right: 5px;
 			}
 		}
+		.bimModel-operate {
+			display: flex;
+			flex-direction: column;
+			margin-left: 5px;
+			.select-operate {
+				@include flex;
+				margin-top: 10px;
+				> span:nth-child(1) {
+					color: #fff;
+					font-size: 14px;
+				}
+				:deep() {
+					.el-select {
+						flex: 1;
+					}
+				}
+			}
+			.data-show {
+				width: 100%;
+				display: flex;
+				flex-direction: column;
+				margin-top: 10px;
+				> span {
+					color: #fff;
+					font-size: 14px;
+				}
+				.selected-box {
+					min-width: 208px;
+					min-height: 32px;
+					border: 1px solid #c0c4cc;
+					border-radius: 4px;
+					@include flex;
+					margin-top: 10px;
+					> div {
+						@include flex;
+						background-color: #f4f4f5;
+						padding: 3px 5px;
+						margin: 3px 6px 3px 0;
+						span {
+							color: #909399;
+							margin-right: 3px;
+						}
+						.el-icon-close {
+							cursor: pointer;
+						}
+					}
+				}
+			}
+		}
 		.operate-btn {
 			margin-top: 20px;
 		}
 	}
+	.tree-config {
+		width: 360px;
+		height: 420px;
+		overflow-y: scroll;
+		// min-width: 360px;
+		// min-height: 420px;
+		border: 1px solid #fff;
+		position: absolute;
+		top: 10px;
+		left: 420px;
+		padding: 10px 30px 20px;
+		&-content {
+			:deep() {
+				.el-tree {
+					background-color: transparent;
+					color: white;
+				}
+				.el-tree-node__content:hover {
+					background-color: rgba(0, 138, 255, 0.5);
+				}
+				.el-tree-node:focus > .el-tree-node__content {
+					background-color: rgba(0, 138, 255, 0.5);
+				}
+				.el-checkbox__inner {
+					background-color: transparent;
+				}
+			}
+		}
+	}
 	.close-btn {
 		position: absolute;
 		top: 0;

src/components/testMap/index.vue

@@ -73,14 +73,55 @@
 				<span>是否反色：</span>
 				<el-switch v-model="formData.invertColor" @change="e => layerOperate(e, 'invertColor')" />
 			</div> -->
-			<div class="property-row-item">
+			<!-- <div class="property-row-item">
 				<span>白膜颜色：{{ formData.color ? formData.color : "" }}</span>
 				<el-color-picker v-model="formData.color" @change="e => albugineaOperate(e, 'color')" />
+			</div> -->
+			<div class="bimModel-operate">
+				<div class="select-operate">
+					<span>模型构件操作：</span>
+					<el-select v-model="selectedFormData.type" placeholder="请选择">
+						<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
+					</el-select>
+				</div>
+				<div class="data-show">
+					<span>选中的数据值：</span>
+					<div class="selected-box" v-if="selectedFormData.type == 1">
+						<div v-for="(item, index) in selectedHideList" :key="index">
+							<span>{{ item }}</span>
+							<el-icon @click="deleteSelected(1, index)"><Close /></el-icon>
+						</div>
+					</div>
+					<div class="selected-box" v-if="selectedFormData.type == 2">
+						<div v-for="(item, index) in selectedColorList" :key="index">
+							<span>{{ item.name }}：{{ item.color }}</span>
+							<el-icon @click="deleteSelected(2, index)"><Close /></el-icon>
+						</div>
+					</div>
+					<el-color-picker
+						v-model="selectedFormData.color"
+						v-if="selectedFormData.type == 2"
+						style="margin-right: 15px"
+					></el-color-picker>
+				</div>
 			</div>
 			<div class="operate-btn">
 				<el-button @click="editAlbugineaConfig">保存当前配置</el-button>
 			</div>
 		</div>
+		<div class="tree-config" v-if="props.type == '白膜'">
+			<div class="tree-config-content">
+				<el-tree
+					:default-expanded-keys="expandedKeys"
+					:default-checked-keys="checkedKeys"
+					:data="treeData"
+					:props="treeProps"
+					show-checkbox
+					node-key="eleid"
+					@check="handleCheckChange"
+				/>
+			</div>
+		</div>
 		<div class="layer-config" v-if="props.type == '点坐标效果'">
 			<div class="property-row-item">
 				<span>效果颜色：{{ formData.color ? formData.color : "" }}</span>
@@ -221,6 +262,23 @@ const props = defineProps({
 	type: String
 });
 const emits = defineEmits(["confirm"]);
+const selectedFormData = ref({
+	type: 1,
+	color: ""
+});
+const selectedHideList = ref([]); // 选中要隐藏的构件
+const selectedColorList = ref([]); // 选中要着色的构件
+const typeOptions = ref([
+	{ label: "隐藏", value: 1 },
+	{ label: "着色", value: 2 }
+]);
+const treeProps = {
+	label: "name",
+	children: "children"
+};
+const treeData = ref<any>([]);
+const checkedKeys = ref<any[]>([]);
+const expandedKeys = ref<any>([]);
 const formData: any = ref({});
 const configJson = ref<any>({
 	scene: {
@@ -234,6 +292,10 @@ const configJson = ref<any>({
 		fullscreenButton: true, // 全屏按钮
 		contextmenu: { hasDefault: true } // 右键菜单
 	},
+	terrain: {
+		url: "//data.mars3d.cn/terrain",
+		show: true
+	},
 	basemaps: [
 		{
 			name: "天地图影像",
@@ -249,6 +311,18 @@ let graphicLayer: any;
 let thisLayer: any; // 选中的图层
 let thisAlbuginea: any; // 选中的白膜
 let tiles3dLayer: any;
+// 删除选中数据
+const deleteSelected = (type: any, index: any) => {
+	if (type == 1) {
+		selectedHideList.value.splice(index, 1);
+	} else if (type == 2) {
+		selectedColorList.value.splice(index, 1);
+	}
+};
+const handleCheckChange = (e: any, obj: any) => {
+	console.log(e);
+	console.log(obj);
+};
 // 修改模型当前配置
 const editModelConfig = async () => {
 	let requestData = {
@@ -462,6 +536,49 @@ const getPointPositionInfo = async () => {
 		await initMars3d(configJson.value);
 	}
 };
+// 获取白膜构件数据详情
+const name2text = (o: any) => {
+	o.text = o.name;
+
+	// 这块为了避免tree控件里的id不统一，所以加改变一下
+	o.eleid = o.id;
+	o.id = undefined;
+
+	if ((!o.text || o.text.trim() === "") && o.type) {
+		o.text = o.type;
+	}
+
+	if (o.children) {
+		for (let i = 0; i < o.children.length; i++) {
+			name2text(o.children[i]);
+		}
+	}
+};
+const querySceneTreeData = (url: any) => {
+	const scenetree = url.substring(0, url.lastIndexOf("/") + 1) + "scenetree.json";
+	return mars3d.Util.fetchJson({ url: scenetree });
+};
+const getAlbugineaTreeData = (model: any) => {
+	querySceneTreeData(model)
+		.then(function (scene: any) {
+			const data = [];
+			if (scene.scenes) {
+				for (let i = 0; i < scene.scenes.length; i++) {
+					const node = scene.scenes[i];
+					name2text(node);
+					data.push(node);
+				}
+			} else {
+				name2text(scene);
+				data.push(scene);
+			}
+			treeData.value = data;
+			console.log(treeData.value);
+		})
+		.catch(function (error) {
+			console.log("加载JSON出错", error);
+		});
+};
 // 获取白膜数据详情
 const getAlbugineaInfo = async () => {
 	let requestData = {
@@ -490,6 +607,7 @@ const getAlbugineaInfo = async () => {
 		}
 		tiles3dLayer = new mars3d.layer.TilesetLayer(showObj);
 		map.addLayer(tiles3dLayer);
+		getAlbugineaTreeData(result.url);
 		// configJson.value.layers = [
 		// 	{
 		// 		id: result.id,
@@ -554,6 +672,9 @@ const random = (min: any, max: any) => {
 const initMars3d = async (option: any) => {
 	console.log(666);
 	map = new mars3d.Map("mars3dContainer", option);
+	map.fixedLight = true; // 固定光照，避免gltf模型随时间存在亮度不一致。
+	// 固定光照时间
+	map.clock.currentTime = Cesium.JulianDate.fromDate(new Date("2022-11-01 12:00:00"));
 	// 创建矢量数据图层
 	graphicLayer = new mars3d.layer.GraphicLayer();
 	map.addLayer(graphicLayer);