图层控制完善

.env.development

@@ -6,3 +6,5 @@ VITE_APP_ENV = 'development'
 
 # 金田基础框架/开发环境
 VITE_API_URL = 'http://10.88.77.132:8092/'
+
+# http://10.88.77.132:8080/

src/views/Main/components/header.vue

@@ -66,7 +66,7 @@
 						<template #dropdown>
 							<span slot="slot" class="text"></span>
 							<el-dropdown-menu>
-								<el-dropdown-item command="system">个人中心</el-dropdown-item>
+								<!-- <el-dropdown-item command="system">个人中心</el-dropdown-item> -->
 								<el-dropdown-item command="system" @click="modifypassword">修改密码</el-dropdown-item>
 								<el-dropdown-item command="logout" divided @click="logout">退出登录</el-dropdown-item>
 							</el-dropdown-menu>

src/views/Map3d/components/layer.vue

@@ -25,15 +25,14 @@
 	<div class="jt-layer">
 		<!-- :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">
+		<!-- @node-click 节点单击事件 -->
+		<el-tree :data="treeData" :default-expanded-keys="expandedKeys" :default-checked-keys="checkedkeys" node-key="id" class="tree-line" ref="treeRef" >
 			<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>
 				<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 class="custom-tree-node"  @click="handleClick(data)">
 					<!-- 字体、图标 -->
 					<!-- <span>
 						<img src="@/assets/images/logo16x16.ico" />
@@ -74,19 +73,19 @@
 				treeData: [],
 				inittree: [], //初始化图层数组
 				expandedKeys: [], //对应要展开的节点id
-				checkedkeys: []//默认打开节点的id
+				checkedkeys: [] //默认打开节点的id
 			}
 		},
 
 		/* 方法 */
 		methods: {
-
 			/**
 			 * el-tree 当节点被点击的时候触发
 			 * 控制地图服务的显示及隐藏
 			 * @param {Object} data 传递给 data 属性的数组中该节点所对应的对象
 			 */
 			async handleClick(data) {
+				console.log('操作', '单击定位')
 				let _self = this;
 
 				let _serviceId = "service_" + data.layercode + data.layerorder;
@@ -181,29 +180,96 @@
 						}
 					})
 				}
+			},
+
+			/**
+			 * el-slider 值改变时触发
+			 * 地图服务的透明度调整
+			 */
+			handleSliderChange($event, data) {
+				let _serviceId = "service_" + data.layercode + data.layerorder;
+				if (data.loadtype === "Cesium3DTileset") {
+					//设置实景透明度
+					jt3d.layer.set3DTileStyle({
+						serviceId: _serviceId,
+						alpha: $event,
+					});
+				} else if (data.loadtype === "CrImageServerLayer") {
+					let floatLayer = window[_serviceId];
+					floatLayer.setOpacity($event)
+				} else if (data.loadtype === "PolygonImageMaterial") {
+					//设置透明度
+					jt3d.layer.setPolygonImageMaterial({
+						serviceId: _serviceId,
+						alpha: $event,
+					});
+				} else if (data.loadtype === "entitiesGltf") {
+					//设置透明度
+					jt3d.layer.setModelStyle({
+						serviceId: _serviceId,
+						alpha: $event,
+					});
+				} else {
+					jt3d.layer.setLayersStyle({
+						serviceId: _serviceId,
+						alpha: $event,
+					});
+				}
+			},
+
+			/**
+			 * el-checkbox 当绑定值变化时触发的事件
+			 * @param {Object} checked 复选框状态
+			 * @param {Object} data 对应于节点点击的节点对象
+			 * @param {Object} node TreeNode 的 node 属性
+			 */
+			handleCheckBoxChange(checked, data, node) {
+				
+				let _node = this.$refs.treeRef.getNode(data);
+				if (_node.isLeaf) {
+					this.setLayerControl(data, checked);
+					this.$refs.treeRef.setChecked(_node, checked); //是否设置子节点，默认为false，利用tree组件渲染后带有的isLeaf(是否为叶子节点)属性，如果为叶子节点就选中。利用tree的API就实现了正确的回显效果	
+
+				} else {
+					//控制子节点
+					this.childNodesChange(node, checked);
+				}
+			},
 
+			/**
+			 * 控制子节点
+			 * @param {Object} node
+			 * @param {Object} checked
+			 */
+			childNodesChange(node, checked) {
+				let _self = this;
+				node.childNodes.forEach(item => {
+					_self.setLayerControl(item.data, checked);
+					_self.$refs.treeRef.setChecked(item, checked);
+					_self.childNodesChange(item, checked);
+				});
 			},
 
 			/**
-			 * el-tree 当复选框被点击的时候触发
 			 * 控制地图服务的显示及隐藏
 			 * @param {Object} data 传递给 data 属性的数组中该节点所对应的对象
 			 * @param {Object} checked 节点本身是否被选中
 			 */
-			async handleCheckChange(data, checked) {
-				console.log('进入图层控制')
+			async setLayerControl(data, checked) {
+				console.log('操作', '图层控制')
+
 				let _self = this;
 
 				let _serviceId = "service_" + data.layercode + data.layerorder;
 				let layername = data.layername;
 				let layertype = data.layertype;
 
-				//修改默认选中参数，用于单击定位
-				if (checked) {
-					data.isinit = '1';
-				} else {
-					data.isinit = '0';
-				}
+				// //修改默认选中参数，用于单击定位
+				// if (checked) {
+				// 	data.isinit = '1';
+				// } else {
+				// 	data.isinit = '0';
+				// }
 
 				//透明度
 				let _opacity = null;
@@ -244,6 +310,8 @@
 					switch (data.loadtype) {
 						case "GeoJsonPoint": //GeoJsonPoint
 							if (checked) {
+								data.isinit = '1';
+
 								//设置参数
 								let _options = {
 									id: _serviceId,
@@ -270,11 +338,15 @@
 							} else {
 								jt3d.layer.removeDataSources({
 									serviceId: _serviceId,
+								}).then(res => {
+									data.isinit = '0';
 								});
 							}
 							break;
 						case "GeoJsonPolyline": //GeoJsonPolyline
 							if (checked) {
+								data.isinit = '1';
+
 								//设置参数
 								let _options = {
 									id: _serviceId,
@@ -320,11 +392,15 @@
 							} else {
 								jt3d.layer.removeDataSources({
 									serviceId: _serviceId,
+								}).then(res => {
+									data.isinit = '0';
 								});
 							}
 							break;
 						case "entitiesGltf": //gltf/glb
 							if (checked) {
+								data.isinit = '1';
+
 								//设置参数
 								let _options = {
 									id: _serviceId,
@@ -373,11 +449,15 @@
 							} else {
 								jt3d.layer.removeEntity({
 									serviceId: _serviceId,
+								}).then(res => {
+									data.isinit = '0';
 								});
 							}
 							break;
 						case "PolygonImageMaterial": //图片材质
 							if (checked) {
+								data.isinit = '1';
+
 								if (parameterset) {
 									if (parameterset.points) {
 										jt3d.layer.addPolygonImageMaterial({
@@ -397,11 +477,15 @@
 							} else {
 								jt3d.layer.removeEntity({
 									serviceId: _serviceId,
+								}).then(res => {
+									data.isinit = '0';
 								});
 							}
 							break;
 						case "CrImageServerLayer": //贴地所有地形、模型的规划图、网格地图
 							if (checked) {
+								data.isinit = '1';
+
 								let floatLayer = new this.jt3dSDK.CrImageServerLayer({
 									viewer: window["viewer"],
 									url: data.datasource,
@@ -413,10 +497,13 @@
 								// window[_serviceId].show();
 							} else {
 								window[_serviceId].hide();
+								data.isinit = '0';
 							}
 							break;
 						case "DEM": //地形服务（DEM）
 							if (checked) {
+								data.isinit = '1';
+
 								//设置参数
 								let _options = {
 									url: data.datasource,
@@ -428,11 +515,15 @@
 								}
 								jt3d.layer.addTerrain(_options);
 							} else {
-								jt3d.layer.removeTerrain();
+								jt3d.layer.removeTerrain().then(res => {
+									data.isinit = '0';
+								});
 							}
 							break;
 						case "UrlTemplateImageryProvider": //加载URL模板服务
 							if (checked) {
+								data.isinit = '1';
+
 								//设置参数
 								let _options = {
 									id: _serviceId,
@@ -458,17 +549,17 @@
 									_self.setLayerNumber(serviceId)
 								});
 							} else {
-								let removeLayer = jt3d.layer.removeImageryProvider({
+								jt3d.layer.removeImageryProvider({
 									serviceId: _serviceId
-								});
-								removeLayer.then(function() {
-									console.log('成功移除')
+								}).then(res => {
+									data.isinit = '0';
 								});
 							}
 
 							break;
 						case "WebMapTileServiceImageryProvider": // WMTS地图服务
 							if (checked) {
+								data.isinit = '1';
 
 								//设置参数
 								let _options = {
@@ -520,11 +611,15 @@
 							} else {
 								jt3d.layer.removeImageryProvider({
 									serviceId: _serviceId
+								}).then(res => {
+									data.isinit = '0';
 								});
 							}
 							break;
 						case "WebMapServiceImageryProvider": //WMS地图服务
 							if (checked) {
+								data.isinit = '1';
+
 								//设置参数
 								let _options = {
 									id: _serviceId,
@@ -557,11 +652,15 @@
 							} else {
 								jt3d.layer.removeImageryProvider({
 									serviceId: _serviceId
+								}).then(res => {
+									data.isinit = '0';
 								});
 							}
 							break;
 						case "ArcGisMapServerImageryProvider": // ArcGIS Online和Server的相关服务
 							if (checked) {
+								data.isinit = '1';
+
 								//设置参数
 								let _options = {
 									id: _serviceId,
@@ -583,11 +682,15 @@
 							} else {
 								jt3d.layer.removeImageryProvider({
 									serviceId: _serviceId
+								}).then(res => {
+									data.isinit = '0';
 								});
 							}
 							break;
 						case "TileMapServiceImageryProvider": // 2.5维度地图
 							if (checked) {
+								data.isinit = '1';
+
 								//设置参数
 								let _options = {
 									id: _serviceId,
@@ -611,57 +714,86 @@
 							} else {
 								jt3d.layer.removeImageryProvider({
 									serviceId: _serviceId
+								}).then(res => {
+									data.isinit = '0';
 								});
 							}
 							break;
 						case "Cesium3DTileset": //加载3DTileset地图服务--实景
+
 							if (checked) {
-								//设置参数
-								let _options = {
-									id: _serviceId,
-									url: data.datasource,
-								}
-								if (parameterset) {
-									if (parameterset.height) {
-										_options.height = parameterset.height;
+								data.isinit = '1';
+
+								if (window[_serviceId]) {
+									window[_serviceId].show = true;
+								} else {
+									//设置参数
+									let _options = {
+										id: _serviceId,
+										url: data.datasource,
 									}
-									if (parameterset.alpha) {
-										_options.alpha = parameterset.alpha;
+									if (parameterset) {
+										if (parameterset.height) {
+											_options.height = parameterset.height;
+										}
+										if (parameterset.alpha) {
+											_options.alpha = parameterset.alpha;
+										}
 									}
+									//加载实景
+									jt3d.layer.addCesium3DTileset(_options, function(serviceId) {
+										window[_serviceId].show = true;
+									});
 								}
-								//加载实景
-								jt3d.layer.addCesium3DTileset(_options, function(serviceId) {
-								});
-
-
 							} else {
-								jt3d.layer.removeScenePrimitives({
-									serviceId: _serviceId
-								});
+								if (window[_serviceId]) {
+									//3DTileset数据量比较大，会报很多cesium错误
+									// jt3d.layer.removeScenePrimitives({
+									// 	serviceId: _serviceId
+									// }).then(res => {
+									// 	data.isinit = '0';
+									// });
+
+									window[_serviceId].show = false;
+									data.isinit = '0';
+								}
 							}
 
 							break;
 						case "Cesium3DTileset_BM": //加载3DTileset地图服务--白膜
 							if (checked) {
-								//设置参数
-								let _options = {
-									id: _serviceId,
-									url: data.datasource,
-								}
-								if (parameterset) {
-									if (parameterset.color) {
-										_options.color = parameterset.color;
-									}
-								}
+								data.isinit = '1';
 
-								//加载白膜
-								jt3d.layer.addCesium3DTilesetBm(_options, function(serviceId) {
+								if (window[_serviceId]) {
+									window[_serviceId].show = true;
+								} else {
+									//设置参数
+									let _options = {
+										id: _serviceId,
+										url: data.datasource,
+									}
+									if (parameterset) {
+										if (parameterset.color) {
+											_options.color = parameterset.color;
+										}
+									}
 
-								});
+									//加载白膜
+									jt3d.layer.addCesium3DTilesetBm(_options, function(serviceId) {
+										window[_serviceId].show = true;
+									});
+								}
 							} else {
-								jt3d.layer.removeScenePrimitives({
-									serviceId: _serviceId
-								});
+								if (window[_serviceId]) {
+									// jt3d.layer.removeScenePrimitives({
+									// 	serviceId: _serviceId
+									// }).then(res => {
+									// 	data.isinit = '0';
+									// });
+
+									window[_serviceId].show = false;
+									data.isinit = '0';
+								}
 							}
 							break;
 						default:
@@ -671,102 +803,10 @@
 			},
 
 			/**
-			 * el-slider 值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）
-			 * 地图服务的透明度调整
-			 */
-			handleSliderChange($event, data) {
-				let _serviceId = "service_" + data.layercode + data.layerorder;
-				if (data.loadtype === "Cesium3DTileset") {
-					//设置实景透明度
-					jt3d.layer.set3DTileStyle({
-						serviceId: _serviceId,
-						alpha: $event,
-					});
-				} else if (data.loadtype === "CrImageServerLayer") {
-					let floatLayer = window[_serviceId];
-					floatLayer.setOpacity($event)
-				} else if (data.loadtype === "PolygonImageMaterial") {
-					//设置透明度
-					jt3d.layer.setPolygonImageMaterial({
-						serviceId: _serviceId,
-						alpha: $event,
-					});
-				} else if (data.loadtype === "entitiesGltf") {
-					//设置透明度
-					jt3d.layer.setModelStyle({
-						serviceId: _serviceId,
-						alpha: $event,
-					});
-				} else {
-					jt3d.layer.setLayersStyle({
-						serviceId: _serviceId,
-						alpha: $event,
-					});
-				}
-			},
-
-			/**
-			 * el-checkbox 当绑定值变化时触发的事件
-			 * @param {Object} checked 复选框状态
-			 * @param {Object} data 对应于节点点击的节点对象
-			 * @param {Object} node TreeNode 的 node 属性
-			 */
-			handleCheckBoxChange(checked, data, node) {
-
-				let _node = this.$refs.treeRef.getNode(data);
-				if (_node.isLeaf) {
-					this.$refs.treeRef.setChecked(_node,
-						checked); //是否设置子节点，默认为false，利用tree组件渲染后带有的isLeaf(是否为叶子节点)属性，如果为叶子节点就选中。利用tree的API就实现了正确的回显效果	
-				}
-
-				//控制子节点
-				this.childNodesChange(node, checked);
-			},
-			/**
-			 * 控制子节点
-			 * @param {Object} node
-			 * @param {Object} checked
-			 */
-			childNodesChange(node, checked) {
-				let _self = this;
-				node.childNodes.forEach(item => {
-					_self.$refs.treeRef.setChecked(item, checked);
-					_self.childNodesChange(item, checked);
-				});
-			},
-
-			/**
-			 * 初始化复选框选中状态
-			 * @param {Object} datas
-			 */
-			setNodesChecked(datas) {
-				let _self = this;
-				console.log('datas', datas)
-				datas.forEach((data, index) => {
-					// 获取当前node节点
-					var node = _self.$refs.treeRef.getNode(data);
-					//node.isLeaf是否是叶子节点
-					if (node.isLeaf) {
-						if (data.isinit === '1') {
-							_self.checkedkeys.push(data.id)
-						}
-					}
-
-					if (data.children) {
-						_self.setNodesChecked(data.children);
-					}
-				});
-				_self.$nextTick(() => {
-					_self.$refs.treeRef.setCheckedKeys(_self.checkedkeys, true);
-				});
-			},
-
-			/**
 			 * 设置图层顺序
 			 * @param {Object} options
 			 */
 			setLayerNumber(serviceId) {
-				// let layerList = window["viewer"].imageryLayers._layers
 				var imageryLayers = window["viewer"].imageryLayers;
 				if (store.markID) {
 					console.log('标注id', store.markID)
@@ -792,8 +832,6 @@
 					}
 				})
 			},
-
-
 		},
 
 		mounted() {
@@ -817,34 +855,40 @@
 
 						//透明度
 						res.opacity = Number(res.opacity);
-						
+
 						//默认展开
 						if (res.isexpand === '1') {
 							_this.expandedKeys.push(res.id);
 						}
-						
+
+						// 复选框默认选中
+						if (res.isinit === '1') {
+							_this.checkedkeys.push(res.id);
+							_this.setLayerControl(res, true);
+						}
 					})
 					_this.treeData = deepTree(_this.inittree)
 					resolve(_this.treeData)
 				})
 			}
 
-
 			//获取图集
 			this.$http.get('/getTableList', {
 				tableName: 'sys_map_atlas_layers', //表名
-				sqlWhere: atlasLayersSqlWhere, //
-				orderByField: ''
+				sqlWhere: atlasLayersSqlWhere, //查询条件
+				orderByField: '' //排序字段
 			}).then(res => {
 				console.log('所有图层', res)
 				//初始图层列表
 				this.inittree = res.data
 				init(res.data).then(item => {
-					//图层初始化打开状态
-					_this.setNodesChecked(item);
 					console.log('图层控制树列表', _this.treeData)
-				})
 
+					//复选框初始化选中
+					_this.$nextTick(() => {
+						_this.$refs.treeRef.setCheckedKeys(_this.checkedkeys, true);
+					});
+				})
 			})
 		},
 	};

src/views/Map3d/components/toolbars.vue

@@ -73,7 +73,7 @@
 					<el-dropdown-item v-if="store.userport=='PC'" command="printmap"><i class="iconfont maxsize icon-svgdayin"></i>打印地图</el-dropdown-item>
 					<el-dropdown-item command="measure"><i class="iconfont minsize icon-icon_measureTool"></i>图上量算</el-dropdown-item>
 					<el-dropdown-item command="query-graphics"><i class="iconfont icon-search"></i>图形查询</el-dropdown-item>
-					<el-dropdown-item command="analysis-data"><i class="iconfont maxsize icon-svgjiexiwenjian"></i>文件解析</el-dropdown-item>
+					<!-- <el-dropdown-item command="analysis-data"><i class="iconfont maxsize icon-svgjiexiwenjian"></i>文件解析</el-dropdown-item> -->
 					<el-dropdown-item command="analysis-space"><i class="iconfont icon-duodiankeshiyu"></i>空间分析</el-dropdown-item>
 					<el-dropdown-item command="analysis-terrain"><i class="iconfont icon-iconfonttubiao_dixing"></i>地形分析</el-dropdown-item>
 					<el-dropdown-item command="special-effects"><i class="iconfont icon-yu"></i>特效效果</el-dropdown-item>