分屏对比

src/views/Map3d/components/ViewerSplitScreen.vue

@@ -16,13 +16,13 @@
 
 <template>
 	<div class="jt-layer">
-		<el-tree :data="treeData"  :default-expanded-keys="expandedKeys" node-key="id" class="tree-line"  :expand-on-click-node="false" ref="treeRef" @check-change="handleCheckChange" @node-click="handleClick">
+		<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">
+				<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" @click="handleClick(data)">
 					<!-- 字体、图标 -->
 					<!-- <span>
 						<img src="@/assets/images/logo16x16.ico" />
@@ -55,6 +55,7 @@
 				treeData: [],
 				inittree: [], //初始化图层数组
 				expandedKeys: [], //对应要展开的节点id
+				checkedkeys: [] //默认打开节点的id
 			}
 		},
 
@@ -142,7 +143,15 @@
 
 								break;
 							case "Cesium3DTileset": //加载3DTileset地图服务--实景
-
+								if (window[_serviceId]) {
+									jt3dLeft._viewer.flyTo(window[_serviceId], {
+										offset: {
+											heading: Cesium.Math.toRadians(20.0), //方向
+											pitch: Cesium.Math.toRadians(-90), //倾斜角度
+											range: 1000
+										}
+									});
+								}
 								break;
 							case "Cesium3DTileset_BM": //加载3DTileset地图服务--白膜
 
@@ -152,16 +161,82 @@
 						}
 					})
 				}
+			},
 
+			/**
+			 * el-slider 值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）
+			 * 地图服务的透明度调整
+			 */
+			handleSliderChange($event, data) {
+				let _serviceId = "serviceLeft_" + data.layercode + data.layerorder;
+				if (data.loadtype === "Cesium3DTileset") {
+					//设置实景透明度
+					jt3dLeft.layer.set3DTileStyle({
+						serviceId: _serviceId,
+						alpha: $event,
+					});
+				} else if (data.loadtype === "CrImageServerLayer") {
+					let floatLayer = window[_serviceId];
+					floatLayer.setOpacity($event)
+				} else if (data.loadtype === "PolygonImageMaterial") {
+					//设置透明度
+					jt3dLeft.layer.setPolygonImageMaterial({
+						serviceId: _serviceId,
+						alpha: $event,
+					});
+				} else if (data.loadtype === "entitiesGltf") {
+					//设置透明度
+					jt3dLeft.layer.setModelStyle({
+						serviceId: _serviceId,
+						alpha: $event,
+					});
+				} else {
+					jt3dLeft.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就实现了正确的回显效果	
+				}
+
+				//控制子节点
+				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) {
+			async setLayerControl(data, checked) {
+				console.log('操作', '图层控制')
+
 				let _self = this;
 
 				let _serviceId = "serviceLeft_" + data.layercode + data.layerorder;
@@ -207,6 +282,8 @@
 					switch (data.loadtype) {
 						case "GeoJsonPoint": //GeoJsonPoint
 							if (checked) {
+								data.isinit = '1';
+
 								//设置参数
 								let _options = {
 									id: _serviceId,
@@ -214,7 +291,6 @@
 								}
 
 								if (parameterset) {
-
 									if (parameterset.billboard instanceof Object) {
 										let billboard = parameterset.billboard;
 										_options.billboard = billboard;
@@ -226,17 +302,23 @@
 									}
 								}
 
+
 								jt3dLeft.layer.addBillboardByGeoJson(_options, function(serviceId) {
 
 								});
+
 							} else {
 								jt3dLeft.layer.removeDataSources({
 									serviceId: _serviceId,
+								}).then(res => {
+									data.isinit = '0';
 								});
 							}
 							break;
 						case "GeoJsonPolyline": //GeoJsonPolyline
 							if (checked) {
+								data.isinit = '1';
+
 								//设置参数
 								let _options = {
 									id: _serviceId,
@@ -266,10 +348,12 @@
 									if (parameterset.count) { //重复次数
 										_options.count = parameterset.count;
 									}
-									if (parameterset.direction) { //direction=vertical 纵，order='-'(由下到上) , '+"(由上到下)
+									if (parameterset
+										.direction) { //direction=vertical 纵，order='-'(由下到上) , '+"(由上到下)
 										_options.direction = parameterset.direction;
 									}
-									if (parameterset.order) { //direction=horizontal 横，order='-'(顺时针) , '+'(逆时针)
+									if (parameterset
+										.order) { //direction=horizontal 横，order='-'(顺时针) , '+'(逆时针)
 										_options.order = parameterset.order;
 									}
 								}
@@ -280,11 +364,15 @@
 							} else {
 								jt3dLeft.layer.removeDataSources({
 									serviceId: _serviceId,
+								}).then(res => {
+									data.isinit = '0';
 								});
 							}
 							break;
 						case "entitiesGltf": //gltf/glb
 							if (checked) {
+								data.isinit = '1';
+
 								//设置参数
 								let _options = {
 									id: _serviceId,
@@ -333,11 +421,15 @@
 							} else {
 								jt3dLeft.layer.removeEntity({
 									serviceId: _serviceId,
+								}).then(res => {
+									data.isinit = '0';
 								});
 							}
 							break;
 						case "PolygonImageMaterial": //图片材质
 							if (checked) {
+								data.isinit = '1';
+
 								if (parameterset) {
 									if (parameterset.points) {
 										jt3dLeft.layer.addPolygonImageMaterial({
@@ -357,13 +449,17 @@
 							} else {
 								jt3dLeft.layer.removeEntity({
 									serviceId: _serviceId,
+								}).then(res => {
+									data.isinit = '0';
 								});
 							}
 							break;
 						case "CrImageServerLayer": //贴地所有地形、模型的规划图、网格地图
 							if (checked) {
+								data.isinit = '1';
+
 								let floatLayer = new this.jt3dSDK.CrImageServerLayer({
-									viewer: jt3dLeft._viewer,
+									viewer: window["viewer"],
 									url: data.datasource,
 									opacity: _opacity,
 									show: true
@@ -373,10 +469,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,
@@ -386,14 +485,17 @@
 										_options.terrainExaggeration = parameterset.terrainExaggeration;
 									}
 								}
-
 								jt3dLeft.layer.addTerrain(_options);
 							} else {
-								jt3dLeft.layer.removeTerrain();
+								jt3dLeft.layer.removeTerrain().then(res => {
+									data.isinit = '0';
+								});
 							}
 							break;
 						case "UrlTemplateImageryProvider": //加载URL模板服务
 							if (checked) {
+								data.isinit = '1';
+
 								//设置参数
 								let _options = {
 									id: _serviceId,
@@ -417,24 +519,19 @@
 
 									//重置图层顺序
 									_self.setLayerNumber(serviceId)
-									if (layertype === '标注') {
-										var imageryLayers = jt3dLeft._viewer.imageryLayers;
-										imageryLayers.raiseToTop(window[serviceId]);
-									}
-
 								});
 							} else {
-								let removeLayer = jt3dLeft.layer.removeImageryProvider({
+								jt3dLeft.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 = {
@@ -455,9 +552,6 @@
 											if (parameterset.tileMatrixSetID) { //用于WMTS请求的TileMatrixSet的标识符
 												_options.tileMatrixSetID = parameterset.tileMatrixSetID;
 
-												if (parameterset.tileMatrixLabels) { //TileMatrix中用于WMTS请求的标识符列表，每个TileMatrix级别一个标识符。
-													_options.tileMatrixLabels = parameterset.tileMatrixLabels;
-												}
 												if (parameterset.minimumLevel) { //最小层级
 													_options.minimumLevel = parameterset.minimumLevel;
 												}
@@ -469,10 +563,6 @@
 
 													//重置图层顺序
 													_self.setLayerNumber(serviceId)
-													if (layertype === '标注') {
-														var imageryLayers = jt3dLeft._viewer.imageryLayers;
-														imageryLayers.raiseToTop(window[serviceId]);
-													}
 												});
 
 											} else {
@@ -489,14 +579,19 @@
 								} else {
 									ElMessage("请检测图层表parameterset字段是否设置layers,style,tileMatrixSetID");
 								}
+
 							} else {
 								jt3dLeft.layer.removeImageryProvider({
 									serviceId: _serviceId
+								}).then(res => {
+									data.isinit = '0';
 								});
 							}
 							break;
 						case "WebMapServiceImageryProvider": //WMS地图服务
 							if (checked) {
+								data.isinit = '1';
+
 								//设置参数
 								let _options = {
 									id: _serviceId,
@@ -519,10 +614,6 @@
 
 											//重置图层顺序
 											_self.setLayerNumber(serviceId)
-											if (layertype === '标注') {
-												var imageryLayers = jt3dLeft._viewer.imageryLayers;
-												imageryLayers.raiseToTop(window[serviceId]);
-											}
 										});
 									} else {
 										ElMessage("请检测图层表parameterset字段是否设置layers");
@@ -530,15 +621,18 @@
 								} else {
 									ElMessage("请检测图层表parameterset字段是否设置layers");
 								}
-
 							} else {
 								jt3dLeft.layer.removeImageryProvider({
 									serviceId: _serviceId
+								}).then(res => {
+									data.isinit = '0';
 								});
 							}
 							break;
 						case "ArcGisMapServerImageryProvider": // ArcGIS Online和Server的相关服务
 							if (checked) {
+								data.isinit = '1';
+
 								//设置参数
 								let _options = {
 									id: _serviceId,
@@ -556,19 +650,19 @@
 
 									//重置图层顺序
 									_self.setLayerNumber(serviceId)
-									if (layertype === '标注') {
-										var imageryLayers = jt3dLeft._viewer.imageryLayers;
-										imageryLayers.raiseToTop(window[serviceId]);
-									}
 								})
 							} else {
 								jt3dLeft.layer.removeImageryProvider({
 									serviceId: _serviceId
+								}).then(res => {
+									data.isinit = '0';
 								});
 							}
 							break;
 						case "TileMapServiceImageryProvider": // 2.5维度地图
 							if (checked) {
+								data.isinit = '1';
+
 								//设置参数
 								let _options = {
 									id: _serviceId,
@@ -588,28 +682,27 @@
 
 									//重置图层顺序
 									_self.setLayerNumber(serviceId)
-									if (layertype === '标注') {
-										var imageryLayers = jt3dLeft._viewer.imageryLayers;
-										imageryLayers.raiseToTop(window[serviceId]);
-									}
-
 								});
 							} else {
 								jt3dLeft.layer.removeImageryProvider({
 									serviceId: _serviceId
+								}).then(res => {
+									data.isinit = '0';
 								});
 							}
 							break;
 						case "Cesium3DTileset": //加载3DTileset地图服务--实景
-							let datasource = data.datasource.split("#")
-							console.log('datasource', datasource)
+
 							if (checked) {
-								//加载实景
-								datasource.forEach((res, index) => {
+								data.isinit = '1';
+
+								if (window[_serviceId]) {
+									window[_serviceId].show = true;
+								} else {
 									//设置参数
 									let _options = {
-										id: _serviceId + index,
-										url: res,
+										id: _serviceId,
+										url: data.datasource,
 									}
 									if (parameterset) {
 										if (parameterset.height) {
@@ -619,43 +712,60 @@
 											_options.alpha = parameterset.alpha;
 										}
 									}
-
+									//加载实景
 									jt3dLeft.layer.addCesium3DTileset(_options, function(serviceId) {
-
-										window[_serviceId + index] = window[serviceId];
-
+										window[_serviceId].show = true;
 									});
-								})
+								}
 							} else {
-								datasource.forEach((res, index) => {
-									jt3dLeft.layer.removeScenePrimitives({
-										serviceId: _serviceId + index
-									});
-								})
+								if (window[_serviceId]) {
+									//3DTileset数据量比较大，会报很多cesium错误
+									// jt3dLeft.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';
+
+								if (window[_serviceId]) {
+									window[_serviceId].show = true;
+								} else {
+									//设置参数
+									let _options = {
+										id: _serviceId,
+										url: data.datasource,
+									}
+									if (parameterset) {
+										if (parameterset.color) {
+											_options.color = parameterset.color;
+										}
 									}
-								}
 
-								//加载白膜
-								jt3dLeft.layer.addCesium3DTilesetBm(_options, function(serviceId) {
-									jt3dLeft.layer.set3DTileBMStyle(_options);
-								});
+									//加载白膜
+									jt3dLeft.layer.addCesium3DTilesetBm(_options, function(serviceId) {
+										window[_serviceId].show = true;
+									});
+								}
 							} else {
-								jt3dLeft.layer.removeScenePrimitives({
-									serviceId: _serviceId
-								});
+								if (window[_serviceId]) {
+									// jt3dLeft.layer.removeScenePrimitives({
+									// 	serviceId: _serviceId
+									// }).then(res => {
+									// 	data.isinit = '0';
+									// });
+
+									window[_serviceId].show = false;
+									data.isinit = '0';
+								}
 							}
 							break;
 						default:
@@ -664,105 +774,12 @@
 				})
 			},
 
-			/**
-			 * el-slider 值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）
-			 * 地图服务的透明度调整
-			 */
-			handleSliderChange($event, data) {
-				let _serviceId = "serviceLeft_" + data.layercode + data.layerorder;
-				if (data.loadtype === "Cesium3DTileset") {
-					let datasource = data.datasource.split("#")
-					datasource.forEach((res, index) => {
-						//设置实景透明度
-						jt3d.layer.set3DTileStyle({
-							serviceId: _serviceId + index,
-							alpha: $event,
-						});
-					})
-				} else if (data.loadtype === "CrImageServerLayer") {
-					let floatLayer = window[_serviceId];
-					floatLayer.setOpacity($event)
-				} else if (data.loadtype === "PolygonImageMaterial") {
-					//设置透明度
-					jt3dLeft.layer.setPolygonImageMaterial({
-						serviceId: _serviceId,
-						alpha: $event,
-					});
-				} else if (data.loadtype === "entitiesGltf") {
-					//设置透明度
-					jt3dLeft.layer.setModelStyle({
-						serviceId: _serviceId,
-						alpha: $event,
-					});
-				} else {
-					jt3dLeft.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;
-				datas.forEach((data, index) => {
-					_self.$nextTick(() => {
-						var node = _self.$refs.treeRef.getNode(data);
-						//node.isLeaf是否是叶子节点
-						if (node.isLeaf) {
-							let checked = false;
-							if (data.isinit === '1') {
-								checked = true;
-							}
-							data.opacity = Number(data.opacity)
-							_self.$refs.treeRef.setChecked(node, checked);
-						}
-					});
-					if (data.children != undefined) {
-						_self.setNodesChecked(data.children);
-					}
-				});
-			},
 
 			/**
 			 * 设置图层顺序
 			 * @param {Object} options
 			 */
 			setLayerNumber(serviceId) {
-				// let layerList = jt3dLeft._viewer.imageryLayers._layers
 				var imageryLayers = jt3dLeft._viewer.imageryLayers;
 				if (store.markID) {
 					console.log('标注id', store.markID)
@@ -882,7 +899,7 @@
 				jt3dLeft.PolylineObject = new this.jt3dSDK.PolylineObject(jt3dLeft._viewer);
 
 				//比例尺、指南针
-				this.$parent.$parent.$refs.queryword.initNavigation(jt3dLeft);
+				this.$parent.$parent.$refs.refNavigation.initNavigation(jt3dLeft);
 
 				//设置默认视图
 				this.$parent.$parent.$refs.refMap3d.setView(jt3dLeft);
@@ -969,7 +986,7 @@
 
 				//获取地图图集id
 				let roleId = store.roleId
-				atlasLayersSqlWhere = '"roleid"' + " = " + roleId + " "
+				atlasLayersSqlWhere = '"roleId"' + " = " + roleId + " "
 
 				//Promise回调
 				function init(data) {
@@ -979,15 +996,19 @@
 							if (num < 10) {
 								res.layerorder = '0' + res.layerorder
 							}
-							
-							//显示2级
-							if (res.parentid === null) {
+
+							//透明度
+							res.opacity = Number(res.opacity);
+
+							//默认展开
+							if (res.isexpand === '1') {
 								_this.expandedKeys.push(res.id);
 							}
-							
-							//其它级别展开
-							if (res.isExpand === '1') {
-								_this.expandedKeys.push(res.id);
+
+							// 复选框默认选中
+							if (res.isinit === '1') {
+								_this.checkedkeys.push(res.id);
+								_this.setLayerControl(res, true);
 							}
 						})
 
@@ -1007,11 +1028,13 @@
 					//初始图层列表
 					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);
+						});
+					})
 				})
 			}
 		},
@@ -1023,32 +1046,36 @@
 </script>
 
 <style lang="scss">
-	.el-switch--small .el-switch__core .el-switch__action{
+	.el-switch--small .el-switch__core .el-switch__action {
 		width: 12rem;
 		height: 12rem;
 	}
-	.el-switch--small.is-checked .el-switch__core .el-switch__action{
+
+	.el-switch--small.is-checked .el-switch__core .el-switch__action {
 		margin-left: calc(-1rem - 12rem);
 	}
-	.el-switch__core .el-switch__action{
-		top:0;
+
+	.el-switch__core .el-switch__action {
+		top: 0;
 	}
-	.el-slider__button{
+
+	.el-slider__button {
 		width: 20rem;
 		height: 20rem;
 	}
-	.el-tree-node__content{
+
+	.el-tree-node__content {
 		height: 26rem;
 	}
-	
-	.el-switch--small .el-switch__core{
+
+	.el-switch--small .el-switch__core {
 		height: 16rem;
 	}
-	
-	.el-switch--small{
+
+	.el-switch--small {
 		padding: 0 5rem;
 	}
-	
+
 	.jt-layer {
 		padding-left: 10rem;