图层控制完善V1.0

src/views/Map3d/components/layer.vue

@@ -23,17 +23,16 @@
 
 <template>
 	<div class="jt-layer">
-		<el-tree :data="treeData" :default-expanded-keys="expandedKeys" :default-checked-keys="checkedkeys"
-			node-key="id" class="tree-line" :expand-on-click-node="false" ref="treeRef"
-			@check-change="handleCheckChange" @node-click="handleClick">
+		<!-- :default-checked-keys="checkedkeys"  默认勾选的节点的 key 的数组-->
+		<!-- :default-expanded-keys="expandedKeys" 默认展开的节点的 key 的数组-->
+		<!-- :expand-on-click-node="false" 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。 -->
+		<!-- @check-change="handleCheckChange" @current-change="handleCurrentChange" -->
+		<el-tree :data="treeData" :default-expanded-keys="expandedKeys" :default-checked-keys="checkedkeys" node-key="id" class="tree-line"  ref="treeRef" @check-change="handleCheckChange" @node-click="handleClick">
 			<template #default="{ node, data }">
 				<!-- 复选框 -->
-				<el-checkbox v-if="data.ischeck == '1' && store.userport == 'PC'" v-model="node.checked"
-					:indeterminate="node.indeterminate" :disabled="!!node.disabled"
-					@change="handleCheckBoxChange($event, data, node)">
+				<el-checkbox v-if="data.ischeck == '1' && store.userport == 'PC'" v-model="node.checked" :indeterminate="node.indeterminate" :disabled="!!node.disabled" @change="handleCheckBoxChange($event, data, node)">
 				</el-checkbox>
-				<el-switch v-else-if="data.ischeck == 1 && store.userport == 'APP'" width="30rem" size="small"
-					v-model="node.checked" @change="handleCheckBoxChange($event, data, node)" />
+				<el-switch v-else-if="data.ischeck == 1 && store.userport == 'APP'" width="30rem" size="small" v-model="node.checked" @change="handleCheckBoxChange($event, data, node)" />
 				<span class="custom-tree-node">
 					<!-- 字体、图标 -->
 					<!-- <span>
@@ -56,8 +55,7 @@
 				<!-- 透明度 -->
 				<template v-if="node.checked && data.opacity >0">
 					<div style="width: 80rem; padding: 0 20rem; position: absolute; right: 0">
-						<el-slider v-model="data.opacity" @input="handleSliderChange($event, data)" :max="1" :min="0.1"
-							:step="0.1" />
+						<el-slider v-model="data.opacity" @input="handleSliderChange($event, data)" :max="1" :min="0.1" :step="0.1" />
 					</div>
 				</template>
 			</template>
@@ -76,8 +74,7 @@
 				treeData: [],
 				inittree: [], //初始化图层数组
 				expandedKeys: [], //对应要展开的节点id
-				currentKey: [], //默认打开节点的id
-				checkedkeys: []
+				checkedkeys: []//默认打开节点的id
 			}
 		},
 
@@ -166,13 +163,15 @@
 
 								break;
 							case "Cesium3DTileset": //加载3DTileset地图服务--实景
-								jt3d._viewer.flyTo(window[_serviceId], {
-									offset: {
-										heading: Cesium.Math.toRadians(20.0), //方向
-										pitch: Cesium.Math.toRadians(-90), //倾斜角度
-										range: 1000
-									}
-								});
+								if (window[_serviceId]) {
+									jt3d._viewer.flyTo(window[_serviceId], {
+										offset: {
+											heading: Cesium.Math.toRadians(20.0), //方向
+											pitch: Cesium.Math.toRadians(-90), //倾斜角度
+											range: 1000
+										}
+									});
+								}
 								break;
 							case "Cesium3DTileset_BM": //加载3DTileset地图服务--白膜
 
@@ -199,6 +198,13 @@
 				let layername = data.layername;
 				let layertype = data.layertype;
 
+				//修改默认选中参数，用于单击定位
+				if (checked) {
+					data.isinit = '1';
+				} else {
+					data.isinit = '0';
+				}
+
 				//透明度
 				let _opacity = null;
 				if (data.opacity == null) {
@@ -609,15 +615,11 @@
 							}
 							break;
 						case "Cesium3DTileset": //加载3DTileset地图服务--实景
-							if (data.datasource == '#') return
-							let datasource = data.datasource.split("#")
-							console.log('datasource', datasource)
 							if (checked) {
-								//加载实景
 								//设置参数
 								let _options = {
 									id: _serviceId,
-									url: datasource[0],
+									url: data.datasource,
 								}
 								if (parameterset) {
 									if (parameterset.height) {
@@ -627,9 +629,8 @@
 										_options.alpha = parameterset.alpha;
 									}
 								}
+								//加载实景
 								jt3d.layer.addCesium3DTileset(_options, function(serviceId) {
-									console.log('添加')
-									window[_serviceId] = window[serviceId];
 								});
 
 
@@ -676,16 +677,11 @@
 			handleSliderChange($event, data) {
 				let _serviceId = "service_" + data.layercode + data.layerorder;
 				if (data.loadtype === "Cesium3DTileset") {
-					let datasource = data.datasource.split("#")
-					datasource.forEach((res, index) => {
-						let tileset = window[_serviceId + index];
-
-						//设置实景透明度
-						jt3d.layer.set3DTileStyle({
-							serviceId: _serviceId + index,
-							alpha: $event,
-						});
-					})
+					//设置实景透明度
+					jt3d.layer.set3DTileStyle({
+						serviceId: _serviceId,
+						alpha: $event,
+					});
 				} else if (data.loadtype === "CrImageServerLayer") {
 					let floatLayer = window[_serviceId];
 					floatLayer.setOpacity($event)
@@ -747,28 +743,21 @@
 				let _self = this;
 				console.log('datas', datas)
 				datas.forEach((data, index) => {
+					// 获取当前node节点
 					var node = _self.$refs.treeRef.getNode(data);
 					//node.isLeaf是否是叶子节点
 					if (node.isLeaf) {
-						let checked = false;
 						if (data.isinit === '1') {
-							checked = true;
 							_self.checkedkeys.push(data.id)
-							console.log('默认勾选', _self.checkedkeys)
 						}
-						data.opacity = Number(data.opacity)
-						// _self.$refs.treeRef.setChecked(node, checked);
-						// _self.handleCheckChange(data,checked)
-						// _self.childNodesChange(node, checked);
-						// _self.$refs.treeRef.setCurrentKey(data.id)
 					}
-					
+
 					if (data.children) {
 						_self.setNodesChecked(data.children);
 					}
 				});
 				_self.$nextTick(() => {
-					_self.$refs.treeRef.setCheckedKeys(_self.checkedkeys,true)
+					_self.$refs.treeRef.setCheckedKeys(_self.checkedkeys, true);
 				});
 			},
 
@@ -826,15 +815,14 @@
 							res.layerorder = '0' + res.layerorder
 						}
 
-						//显示2级
-						if (res.parentid === null) {
-							_this.expandedKeys.push(res.id);
-						}
-
-						//其它级别展开
-						if (res.isExpand === '1') {
+						//透明度
+						res.opacity = Number(res.opacity);
+						
+						//默认展开
+						if (res.isexpand === '1') {
 							_this.expandedKeys.push(res.id);
 						}
+						
 					})
 					_this.treeData = deepTree(_this.inittree)
 					resolve(_this.treeData)