Browse Source

图层控制,复选两次bug解决

DESKTOP-CRQ4N2U\jintian 1 year ago
parent
commit
a9c7a457ff
1 changed files with 129 additions and 129 deletions
  1. 129 129
      src/views/Map3d/components/layer.vue

+ 129 - 129
src/views/Map3d/components/layer.vue

@@ -26,16 +26,12 @@
 		<!-- :default-checked-keys="checkedkeys"  默认勾选的节点的 key 的数组-->
 		<!-- :default-checked-keys="checkedkeys"  默认勾选的节点的 key 的数组-->
 		<!-- :default-expanded-keys="expandedKeys" 默认展开的节点的 key 的数组-->
 		<!-- :default-expanded-keys="expandedKeys" 默认展开的节点的 key 的数组-->
 		<!-- @node-click 节点单击事件 -->
 		<!-- @node-click 节点单击事件 -->
-		<el-tree :data="treeData" :default-expanded-keys="expandedKeys" :default-checked-keys="checkedkeys"
-			node-key="id" class="tree-line" ref="treeRef">
+		<el-tree :data="treeData" :default-expanded-keys="expandedKeys" :default-checked-keys="checkedkeys" node-key="id" class="tree-line" ref="treeRef">
 			<template #default="{ node, data }">
 			<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-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" @click="handleClick(data)" style="width: 150rem;text-align: left;">
 				<span class="custom-tree-node" @click="handleClick(data)" style="width: 150rem;text-align: left;">
 					<!-- 字体、图标 -->
 					<!-- 字体、图标 -->
 					<!-- <span>
 					<!-- <span>
@@ -58,8 +54,7 @@
 				<!-- 透明度 -->
 				<!-- 透明度 -->
 				<template v-if="node.checked && data.opacity >0">
 				<template v-if="node.checked && data.opacity >0">
 					<div style="width: 80rem; padding: 0 20rem; position: absolute; right: 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>
 					</div>
 				</template>
 				</template>
 			</template>
 			</template>
@@ -114,8 +109,7 @@
 				let _node = this.$refs.treeRef.getNode(data);
 				let _node = this.$refs.treeRef.getNode(data);
 				if (_node.isLeaf) {
 				if (_node.isLeaf) {
 					this.setLayersControl(jt3d, data, checked);
 					this.setLayersControl(jt3d, data, checked);
-					this.$refs.treeRef.setChecked(_node,
-						checked); //是否设置子节点,默认为false,利用tree组件渲染后带有的isLeaf(是否为叶子节点)属性,如果为叶子节点就选中。利用tree的API就实现了正确的回显效果	
+					this.$refs.treeRef.setChecked(_node, checked); //是否设置子节点,默认为false,利用tree组件渲染后带有的isLeaf(是否为叶子节点)属性,如果为叶子节点就选中。利用tree的API就实现了正确的回显效果	
 
 
 				} else {
 				} else {
 					//控制子节点
 					//控制子节点
@@ -341,14 +335,17 @@
 
 
 								if (parameterset) {
 								if (parameterset) {
 									if (parameterset.points) {
 									if (parameterset.points) {
-										jt3d.layer.addPolygonImageMaterial({
-											id: _serviceId,
-											points: parameterset.points,
-											url: data.datasource,
-											alpha: _opacity
-										}, function(serviceId) {
 
 
-										});
+										if (!window[_serviceId]) {
+											jt3d.layer.addPolygonImageMaterial({
+												id: _serviceId,
+												points: parameterset.points,
+												url: data.datasource,
+												alpha: _opacity
+											}, function(serviceId) {
+
+											});
+										}
 									} else {
 									} else {
 										ElMessage("请检测图层表parameterset字段是否设置points");
 										ElMessage("请检测图层表parameterset字段是否设置points");
 									}
 									}
@@ -368,15 +365,17 @@
 							if (checked) {
 							if (checked) {
 								data.isinit = '1';
 								data.isinit = '1';
 
 
-								let floatLayer = new this.jt3dSDK.CrImageServerLayer({
-									viewer: jt3d._viewer,
-									url: data.datasource,
-									opacity: _opacity,
-									show: true
-								});
-								window[_serviceId] = floatLayer;
-								//添加网格地图
-								// window[_serviceId].show();
+								if (!window[_serviceId]) {
+									let floatLayer = new this.jt3dSDK.CrImageServerLayer({
+										viewer: jt3d._viewer,
+										url: data.datasource,
+										opacity: _opacity,
+										show: true
+									});
+									window[_serviceId] = floatLayer;
+									//添加网格地图
+									// window[_serviceId].show();
+								}
 							} else {
 							} else {
 								window[_serviceId].hide();
 								window[_serviceId].hide();
 								data.isinit = '0';
 								data.isinit = '0';
@@ -424,21 +423,23 @@
 									}
 									}
 								}
 								}
 
 
-								//加载服务
-								jt3d.layer.addUrlTemplateImagery(_options, function(serviceId) {
+								if (!window[_serviceId]) {
+									//加载服务
+									jt3d.layer.addUrlTemplateImagery(_options, function(serviceId) {
 
 
-									//重置图层顺序
-									_self.setLayerNumber(jt3d, serviceId)
-									if (atlastype === "底图") {
-										var imageryLayers = jt3d._viewer.imageryLayers;
-										imageryLayers.lowerToBottom(window[serviceId]);
-										imageryLayers.raise(window[serviceId]);
-										if (layertype === '标注') {
+										//重置图层顺序
+										_self.setLayerNumber(jt3d, serviceId)
+										if (atlastype === "底图") {
 											var imageryLayers = jt3d._viewer.imageryLayers;
 											var imageryLayers = jt3d._viewer.imageryLayers;
-											imageryLayers.raiseToTop(window[serviceId]);
+											imageryLayers.lowerToBottom(window[serviceId]);
+											imageryLayers.raise(window[serviceId]);
+											if (layertype === '标注') {
+												var imageryLayers = jt3d._viewer.imageryLayers;
+												imageryLayers.raiseToTop(window[serviceId]);
+											}
 										}
 										}
-									}
-								});
+									});
+								}
 							} else {
 							} else {
 								jt3d.layer.removeImageryProvider({
 								jt3d.layer.removeImageryProvider({
 									serviceId: _serviceId
 									serviceId: _serviceId
@@ -478,22 +479,22 @@
 													_options.maximumLevel = parameterset.maximumLevel;
 													_options.maximumLevel = parameterset.maximumLevel;
 												}
 												}
 
 
-												jt3d.layer.addWebMapTileService(_options, function(serviceId) {
-
-													//重置图层顺序
-													_self.setLayerNumber(jt3d, serviceId)
-													if (atlastype === "底图") {
-														var imageryLayers = jt3d._viewer.imageryLayers;
-														imageryLayers.lowerToBottom(window[serviceId]);
-														imageryLayers.raise(window[serviceId]);
-														if (layertype === '标注') {
-															var imageryLayers = jt3d._viewer
-																.imageryLayers;
-															imageryLayers.raiseToTop(window[
-																serviceId]);
+												if (!window[_serviceId]) {
+													jt3d.layer.addWebMapTileService(_options, function(serviceId) {
+
+														//重置图层顺序
+														_self.setLayerNumber(jt3d, serviceId)
+														if (atlastype === "底图") {
+															var imageryLayers = jt3d._viewer.imageryLayers;
+															imageryLayers.lowerToBottom(window[serviceId]);
+															imageryLayers.raise(window[serviceId]);
+															if (layertype === '标注') {
+																var imageryLayers = jt3d._viewer.imageryLayers;
+																imageryLayers.raiseToTop(window[serviceId]);
+															}
 														}
 														}
-													}
-												});
+													});
+												}
 
 
 											} else {
 											} else {
 												ElMessage("请检测图层表parameterset字段是否设置tileMatrixSetID");
 												ElMessage("请检测图层表parameterset字段是否设置tileMatrixSetID");
@@ -521,43 +522,41 @@
 						case "WebMapServiceImageryProvider": //WMS地图服务
 						case "WebMapServiceImageryProvider": //WMS地图服务
 							if (checked) {
 							if (checked) {
 								data.isinit = '1';
 								data.isinit = '1';
-								console.log('参数配置', data.datasource)
-								// http://10.88.88.9:6080/arcgis/services/LYBQZ_YX_102100_202201/MapServer/WMSServer?request=GetCapabilities&service=WMS
+
 								//设置参数
 								//设置参数
 								let _options = {
 								let _options = {
 									id: _serviceId,
 									id: _serviceId,
 									url: data.datasource,
 									url: data.datasource,
 									alpha: _opacity
 									alpha: _opacity
 								}
 								}
+
 								if (parameterset) {
 								if (parameterset) {
 									if (parameterset.layers) { //WMTS请求的层名
 									if (parameterset.layers) { //WMTS请求的层名
 										_options.layers = parameterset.layers;
 										_options.layers = parameterset.layers;
 										_options.parameters = parameterset.parameters
 										_options.parameters = parameterset.parameters
-										
 										if (parameterset.minimumLevel) { //最小层级
 										if (parameterset.minimumLevel) { //最小层级
 											_options.minimumLevel = parameterset.minimumLevel;
 											_options.minimumLevel = parameterset.minimumLevel;
 										}
 										}
 										if (parameterset.maximumLevel) { //最大层级
 										if (parameterset.maximumLevel) { //最大层级
 											_options.maximumLevel = parameterset.maximumLevel;
 											_options.maximumLevel = parameterset.maximumLevel;
 										}
 										}
-										// console.log('option')
-										jt3d.layer.addWebMapService(_options, function(serviceId) {
-											console.log('添加成功')
-											//重置图层顺序
-											// _self.setLayerNumber(jt3d, serviceId)
-											var imageryLayers = jt3d._viewer.imageryLayers;
-											console.log('添加成功', imageryLayers)
-											imageryLayers.raiseToTop(window[serviceId]);
-											// if (atlastype === "底图") {
-											// 	var imageryLayers = jt3d._viewer.imageryLayers;
-											// 	imageryLayers.lowerToBottom(window[serviceId]);
-											// 	imageryLayers.raise(window[serviceId]);
-											// 	if (layertype === '标注') {
-											// 		var imageryLayers = jt3d._viewer.imageryLayers;
-											// 		imageryLayers.raiseToTop(window[serviceId]);
-											// 	}
-											// }
-										});
+
+										if (!window[_serviceId]) {
+											jt3d.layer.addWebMapService(_options, function(serviceId) {
+
+												//重置图层顺序
+												_self.setLayerNumber(jt3d, serviceId)
+												if (atlastype === "底图") {
+													var imageryLayers = jt3d._viewer.imageryLayers;
+													imageryLayers.lowerToBottom(window[serviceId]);
+													imageryLayers.raise(window[serviceId]);
+													if (layertype === '标注') {
+														var imageryLayers = jt3d._viewer.imageryLayers;
+														imageryLayers.raiseToTop(window[serviceId]);
+													}
+												}
+											});
+										}
 									} else {
 									} else {
 										ElMessage("请检测图层表parameterset字段是否设置layers");
 										ElMessage("请检测图层表parameterset字段是否设置layers");
 									}
 									}
@@ -588,21 +587,24 @@
 									}
 									}
 								}
 								}
 
 
-								//加载服务
-								jt3d.layer.addArcGisMapServer(_options, function(serviceId) {
+								if (!window[_serviceId]) {
+
+									//加载服务
+									jt3d.layer.addArcGisMapServer(_options, function(serviceId) {
 
 
-									//重置图层顺序
-									_self.setLayerNumber(jt3d, serviceId)
-									if (atlastype === "底图") {
-										var imageryLayers = jt3d._viewer.imageryLayers;
-										imageryLayers.lowerToBottom(window[serviceId]);
-										imageryLayers.raise(window[serviceId]);
-										if (layertype === '标注') {
+										//重置图层顺序
+										_self.setLayerNumber(jt3d, serviceId)
+										if (atlastype === "底图") {
 											var imageryLayers = jt3d._viewer.imageryLayers;
 											var imageryLayers = jt3d._viewer.imageryLayers;
-											imageryLayers.raiseToTop(window[serviceId]);
+											imageryLayers.lowerToBottom(window[serviceId]);
+											imageryLayers.raise(window[serviceId]);
+											if (layertype === '标注') {
+												var imageryLayers = jt3d._viewer.imageryLayers;
+												imageryLayers.raiseToTop(window[serviceId]);
+											}
 										}
 										}
-									}
-								})
+									})
+								}
 							} else {
 							} else {
 								jt3d.layer.removeImageryProvider({
 								jt3d.layer.removeImageryProvider({
 									serviceId: _serviceId
 									serviceId: _serviceId
@@ -630,20 +632,22 @@
 									}
 									}
 								}
 								}
 
 
-								jt3d.layer.addTileMapServiceImagery(_options, function(serviceId) {
+								if (!window[_serviceId]) {
+									jt3d.layer.addTileMapServiceImagery(_options, function(serviceId) {
 
 
-									//重置图层顺序
-									_self.setLayerNumber(jt3d, serviceId)
-									if (atlastype === "底图") {
-										var imageryLayers = jt3d._viewer.imageryLayers;
-										imageryLayers.lowerToBottom(window[serviceId]);
-										imageryLayers.raise(window[serviceId]);
-										if (layertype === '标注') {
+										//重置图层顺序
+										_self.setLayerNumber(jt3d, serviceId)
+										if (atlastype === "底图") {
 											var imageryLayers = jt3d._viewer.imageryLayers;
 											var imageryLayers = jt3d._viewer.imageryLayers;
-											imageryLayers.raiseToTop(window[serviceId]);
+											imageryLayers.lowerToBottom(window[serviceId]);
+											imageryLayers.raise(window[serviceId]);
+											if (layertype === '标注') {
+												var imageryLayers = jt3d._viewer.imageryLayers;
+												imageryLayers.raiseToTop(window[serviceId]);
+											}
 										}
 										}
-									}
-								});
+									});
+								}
 							} else {
 							} else {
 								jt3d.layer.removeImageryProvider({
 								jt3d.layer.removeImageryProvider({
 									serviceId: _serviceId
 									serviceId: _serviceId
@@ -657,9 +661,7 @@
 							if (checked) {
 							if (checked) {
 								data.isinit = '1';
 								data.isinit = '1';
 
 
-								if (window[_serviceId]) {
-									window[_serviceId].show = true;
-								} else {
+								if (!window[_serviceId]) {
 									//设置参数
 									//设置参数
 									let _options = {
 									let _options = {
 										id: _serviceId,
 										id: _serviceId,
@@ -679,17 +681,17 @@
 									});
 									});
 								}
 								}
 							} else {
 							} else {
-								if (window[_serviceId]) {
-									//3DTileset数据量比较大,会报很多cesium错误
-									// jt3d.layer.removeScenePrimitives({
-									// 	serviceId: _serviceId
-									// }).then(res => {
-									// 	data.isinit = '0';
-									// });
-
-									window[_serviceId].show = false;
+								// 3DTileset数据量比较大,会报很多cesium错误
+								jt3d.layer.removeScenePrimitives({
+									serviceId: _serviceId
+								}).then(res => {
 									data.isinit = '0';
 									data.isinit = '0';
-								}
+								});
+
+								// if (window[_serviceId]) {
+								// 	window[_serviceId].show = false;
+								// 	data.isinit = '0';
+								// }
 							}
 							}
 
 
 							break;
 							break;
@@ -697,9 +699,7 @@
 							if (checked) {
 							if (checked) {
 								data.isinit = '1';
 								data.isinit = '1';
 
 
-								if (window[_serviceId]) {
-									window[_serviceId].show = true;
-								} else {
+								if (!window[_serviceId]) {
 									//设置参数
 									//设置参数
 									let _options = {
 									let _options = {
 										id: _serviceId,
 										id: _serviceId,
@@ -717,16 +717,16 @@
 									});
 									});
 								}
 								}
 							} else {
 							} else {
-								if (window[_serviceId]) {
-									// jt3d.layer.removeScenePrimitives({
-									// 	serviceId: _serviceId
-									// }).then(res => {
-									// 	data.isinit = '0';
-									// });
-
-									window[_serviceId].show = false;
+								jt3d.layer.removeScenePrimitives({
+									serviceId: _serviceId
+								}).then(res => {
 									data.isinit = '0';
 									data.isinit = '0';
-								}
+								});
+
+								// if (window[_serviceId]) {
+								// 	window[_serviceId].show = false;
+								// 	data.isinit = '0';
+								// }
 							}
 							}
 							break;
 							break;
 						default:
 						default:
@@ -795,7 +795,7 @@
 							case "PolygonImageMaterial": //图片材质
 							case "PolygonImageMaterial": //图片材质
 
 
 								break;
 								break;
-							case "CrImageServerLayer": //地形服务(DEM)
+							case "CrImageServerLayer": //规划图
 
 
 								break;
 								break;
 							case "DEM": //地形服务(DEM)
 							case "DEM": //地形服务(DEM)
@@ -895,11 +895,11 @@
 
 
 				var imageryLayers = jt3d._viewer.imageryLayers;
 				var imageryLayers = jt3d._viewer.imageryLayers;
 
 
-				//标注层置顶
-				if (store.markID) {
-					console.log('标注id', store.markID)
-					imageryLayers.raiseToTop(window[store.markID]);
-				}
+				// //标注层置顶
+				// if (store.markID) {
+				// 	console.log('标注id', store.markID)
+				// 	imageryLayers.raiseToTop(window[store.markID]);
+				// }
 
 
 				//设置图层初始顺序
 				//设置图层初始顺序
 				imageryLayers.lowerToBottom(window[serviceId]);
 				imageryLayers.lowerToBottom(window[serviceId]);