图层控制和分屏对比，图层加载、图层定位、透明度设置、图层排序，代码合并，减少后续维护工作量。

src/views/Map3d/components/ViewerSplitScreen.vue

@@ -22,7 +22,7 @@
 				<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" @click="handleClick(data)">
+				<span class="custom-tree-node" @click="handleClick(data)" style="width: 150rem;text-align: left;">
 					<!-- 字体、图标 -->
 					<!-- <span>
 						<img src="@/assets/images/logo16x16.ico" />
@@ -47,6 +47,7 @@
 	let store = undefined;
 	let jt3dRight = undefined;
 	let jt3dLeft = undefined;
+	
 	export default {
 
 		/* 数据 */
@@ -62,142 +63,22 @@
 		/* 方法 */
 		methods: {
 			/**
-			 * el-tree 当节点被点击的时候触发
-			 * 控制地图服务的显示及隐藏
+			 * 单击图层名称触发服务定位
 			 * @param {Object} data 传递给 data 属性的数组中该节点所对应的对象
 			 */
-			async handleClick(data) {
-				let _self = this;
-
-				let _serviceId = "serviceLeft_" + data.layercode + data.layerorder;
-				let layername = data.layername;
-
-				//透明度
-				let _opacity = null;
-				if (data.opacity == null) {
-					_opacity = 1;
-				} else {
-					_opacity = Number(data.opacity);
-					data.opacity = _opacity;
-
-					if (_opacity == 0) {
-						_opacity = 1;
-					}
-				}
-
-				//参数集
-				let parameterset = data.parameterset;
-				if (data.parameterset instanceof Object) {
-					parameterset = data.parameterset;
-				} else if (data.parameterset != "" && data.parameterset != null && data.parameterset != undefined) {
-					parameterset = JSON.parse(data.parameterset);
-				}
-
-				if (data.isinit === '1') {
-					await new Promise((resolve, reject) => {
-						switch (data.loadtype) {
-							case "GeoJsonPolyline": //GeoJsonPolyline
-
-								break;
-							case "entitiesGltf": //gltf/glb
-
-								if (parameterset) {
-									if (parameterset.points) { //模型位置
-										let flyToEntity = jt3dLeft.LocateUtil.flyToEntityByPoints([
-											parameterset.points,
-										], 'point', {
-											heading: 0,
-											pitch: -90,
-											range: 8880
-										});
-									} else {
-										ElMessage("请检测图层表parameterset字段是否设置points");
-									}
-								} else {
-									ElMessage("请检测图层表parameterset字段是否设置points");
-								}
-
-								break;
-							case "PolygonImageMaterial": //图片材质
-
-								break;
-							case "CrImageServerLayer": //地形服务（DEM）
-
-								break;
-							case "DEM": //地形服务（DEM）
-
-								break;
-							case "UrlTemplateImageryProvider": //加载URL模板服务
-
-								break;
-							case "WebMapTileServiceImageryProvider": // WMTS地图服务
-
-								break;
-							case "WebMapServiceImageryProvider": //WMS地图服务
-
-								break;
-							case "ArcGisMapServerImageryProvider": // ArcGIS Online和Server的相关服务
-
-								break;
-							case "TileMapServiceImageryProvider": // 2.5维度地图
-
-								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地图服务--白膜
-
-								break;
-							default:
-								break;
-						}
-					})
-				}
+			handleClick(data) {
+				this.$parent.$parent.$refs.refLayer.mark = "serviceLeft";
+				this.$parent.$parent.$refs.refLayer.setLayersLocation(jt3dLeft, data);
 			},
 
 			/**
-			 * el-slider 值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）
+			 * 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,
-					});
-				}
+				this.$parent.$parent.$refs.refLayer.mark = "serviceLeft";
+				this.$parent.$parent.$refs.refLayer.setLayersAlpha(jt3dLeft, $event, data)
 			},
-
 			/**
 			 * el-checkbox 当绑定值变化时触发的事件
 			 * @param {Object} checked 复选框状态
@@ -205,10 +86,10 @@
 			 * @param {Object} node TreeNode 的 node 属性
 			 */
 			handleCheckBoxChange(checked, data, node) {
-
+				this.$parent.$parent.$refs.refLayer.mark = "serviceLeft";
 				let _node = this.$refs.treeRef.getNode(data);
 				if (_node.isLeaf) {
-					this.setLayerControl(data, checked);
+					this.$parent.$parent.$refs.refLayer.setLayersControl(jt3dLeft, data, checked);
 					this.$refs.treeRef.setChecked(_node, checked); //是否设置子节点，默认为false，利用tree组件渲染后带有的isLeaf(是否为叶子节点)属性，如果为叶子节点就选中。利用tree的API就实现了正确的回显效果	
 				}
 
@@ -223,590 +104,13 @@
 			childNodesChange(node, checked) {
 				let _self = this;
 				node.childNodes.forEach(item => {
-					_self.setLayerControl(item.data, checked);
+					_self.$parent.$parent.$refs.refLayer.setLayersControl(jt3dLeft, item.data, checked);
 					_self.$refs.treeRef.setChecked(item, checked);
 					_self.childNodesChange(item, checked);
 				});
 			},
 
 			/**
-			 * 控制地图服务的显示及隐藏
-			 * @param {Object} data 传递给 data 属性的数组中该节点所对应的对象
-			 * @param {Object} checked 节点本身是否被选中
-			 */
-			async setLayerControl(data, checked) {
-				console.log('操作', '图层控制')
-
-				let _self = this;
-
-				let _serviceId = "serviceLeft_" + data.layercode + data.layerorder;
-				let layername = data.layername;
-				let layertype = data.layertype;
-
-				//透明度
-				let _opacity = null;
-				if (data.opacity == null) {
-					_opacity = 1;
-				} else {
-					_opacity = Number(data.opacity);
-					data.opacity = _opacity;
-
-					if (_opacity == 0) {
-						_opacity = 1;
-					}
-				}
-
-				//参数集
-				let parameterset = data.parameterset;
-				if (data.parameterset instanceof Object) {
-					parameterset = data.parameterset;
-				} else if (data.parameterset != "" && data.parameterset != null && data.parameterset != undefined) {
-					parameterset = JSON.parse(data.parameterset);
-				}
-
-				//在显示的图层中，如果图层配置可以查询，则进行查询
-				if (layertype === '矢量面' && data.querytable) {
-					if (checked) {
-						if (store.queryMapTables.indexOf(data.querytable) === -1) {
-							store.queryMapTables.push(data.querytable);
-						}
-					} else {
-						//过滤
-						store.queryMapTables = store.queryMapTables.filter(tableName => {
-							return tableName !== data.querytable
-						})
-					}
-				}
-
-				await new Promise((resolve, reject) => {
-					switch (data.loadtype) {
-						case "GeoJsonPoint": //GeoJsonPoint
-							if (checked) {
-								data.isinit = '1';
-
-								//设置参数
-								let _options = {
-									id: _serviceId,
-									url: data.datasource,
-								}
-
-								if (parameterset) {
-									if (parameterset.billboard instanceof Object) {
-										let billboard = parameterset.billboard;
-										_options.billboard = billboard;
-									}
-
-									if (parameterset.label instanceof Object) {
-										let label = parameterset.label;
-										_options.label = label;
-									}
-								}
-
-
-								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,
-									url: data.datasource,
-								}
-
-								if (parameterset) {
-
-									if (parameterset.clampToGround) { //是否贴地
-										_options.clampToGround = parameterset.clampToGround;
-									}
-									if (parameterset.isImageAlpha) { //是否采用图片颜色
-										_options.isImageAlpha = parameterset.isImageAlpha;
-									}
-									if (parameterset.imgUrl) { //精灵线图片
-										_options.imgUrl = parameterset.imgUrl;
-									}
-									if (parameterset.color) { //指定线的颜色
-										_options.color = parameterset.color;
-									}
-									if (parameterset.width) { //线宽
-										_options.width = parameterset.width;
-									}
-									if (parameterset.duration) { //持续时间 毫秒，越小越快
-										_options.duration = parameterset.duration;
-									}
-									if (parameterset.count) { //重复次数
-										_options.count = parameterset.count;
-									}
-									if (parameterset
-										.direction) { //direction=vertical 纵，order='-'(由下到上) , '+"(由上到下)
-										_options.direction = parameterset.direction;
-									}
-									if (parameterset
-										.order) { //direction=horizontal 横，order='-'(顺时针) , '+'(逆时针)
-										_options.order = parameterset.order;
-									}
-								}
-
-								jt3dLeft.layer.addPolylineByGeoJson(_options, function(serviceId) {
-
-								});
-							} 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,
-									url: data.datasource,
-									points: [],
-								}
-
-								if (parameterset) {
-									if (parameterset.points) { //模型位置
-										_options.points = parameterset.points;
-
-										if (parameterset.minimumPixelSize) { //模型最小刻度
-											_options.minimumPixelSize = parameterset.minimumPixelSize;
-										}
-										if (parameterset.maximumScale) { //模型的最大比例尺大小，设置模型最大放大大小
-											_options.maximumScale = parameterset.maximumScale;
-										}
-										if (parameterset.silhouetteColor) { //模型轮廓颜色
-											_options.silhouetteColor = parameterset.silhouetteColor;
-										}
-										if (parameterset.alpha) { //模型透明度
-											_options.alpha = parameterset.alpha;
-										}
-										if (parameterset.heading) { //以弧度为单位的航向分量
-											_options.heading = parameterset.heading;
-										}
-										if (parameterset.pitch) { //以弧度为单位的航向分量
-											_options.pitch = parameterset.pitch;
-										}
-										if (parameterset.roll) { //以弧度为单位的滚动分量
-											_options.roll = parameterset.roll;
-										}
-
-										jt3dLeft.layer.addEntitiesGltf(_options, function(serviceId) {
-											// let flyToEntity = jt3dLeft.LocateUtil.flyToEntityByPoints([
-											// 	parameterset.points,
-											// ], 'point');
-										});
-
-									} else {
-										ElMessage("请检测图层表parameterset字段是否设置points");
-									}
-								} else {
-									ElMessage("请检测图层表parameterset字段是否设置points");
-								}
-							} 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({
-											id: _serviceId,
-											points: parameterset.points,
-											url: data.datasource,
-											alpha: _opacity
-										}, function(serviceId) {
-
-										});
-									} else {
-										ElMessage("请检测图层表parameterset字段是否设置points");
-									}
-								} else {
-									ElMessage("请检测图层表parameterset字段是否设置points");
-								}
-							} 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: window["viewer"],
-									url: data.datasource,
-									opacity: _opacity,
-									show: true
-								});
-								window[_serviceId] = floatLayer;
-								//添加网格地图
-								// window[_serviceId].show();
-							} else {
-								window[_serviceId].hide();
-								data.isinit = '0';
-							}
-							break;
-						case "DEM": //地形服务（DEM）
-							if (checked) {
-								data.isinit = '1';
-
-								//设置参数
-								let _options = {
-									url: data.datasource,
-								}
-								if (parameterset) {
-									if (parameterset.terrainExaggeration) { //地形夸张系数
-										_options.terrainExaggeration = parameterset.terrainExaggeration;
-									}
-								}
-								jt3dLeft.layer.addTerrain(_options);
-							} else {
-								jt3dLeft.layer.removeTerrain().then(res => {
-									data.isinit = '0';
-								});
-							}
-							break;
-						case "UrlTemplateImageryProvider": //加载URL模板服务
-							if (checked) {
-								data.isinit = '1';
-
-								//设置参数
-								let _options = {
-									id: _serviceId,
-									url: data.datasource,
-									alpha: _opacity
-								}
-								if (parameterset) {
-									if (parameterset.CRS) { //坐标系
-										_options.CRS = parameterset.CRS;
-									}
-									if (parameterset.minimumLevel) { //最小层级
-										_options.minimumLevel = parameterset.minimumLevel;
-									}
-									if (parameterset.maximumLevel) { //最大层级
-										_options.maximumLevel = parameterset.maximumLevel;
-									}
-								}
-
-								//加载服务
-								jt3dLeft.layer.addUrlTemplateImagery(_options, function(serviceId) {
-
-									//重置图层顺序
-									_self.setLayerNumber(serviceId)
-								});
-							} else {
-								jt3dLeft.layer.removeImageryProvider({
-									serviceId: _serviceId
-								}).then(res => {
-									data.isinit = '0';
-								});
-							}
-
-							break;
-						case "WebMapTileServiceImageryProvider": // WMTS地图服务
-							if (checked) {
-								data.isinit = '1';
-
-								//设置参数
-								let _options = {
-									id: _serviceId,
-									url: data.datasource,
-									layers: 'cia',
-									style: 'default',
-									tileMatrixSetID: 'w',
-									alpha: _opacity
-								}
-								if (parameterset) {
-									if (parameterset.layers) { //WMTS请求的层名
-										_options.layers = parameterset.layers;
-
-										if (parameterset.style) { //WMTS请求的样式名
-											_options.style = parameterset.style;
-
-											if (parameterset.tileMatrixSetID) { //用于WMTS请求的TileMatrixSet的标识符
-												_options.tileMatrixSetID = parameterset.tileMatrixSetID;
-
-												if (parameterset.minimumLevel) { //最小层级
-													_options.minimumLevel = parameterset.minimumLevel;
-												}
-												if (parameterset.maximumLevel) { //最大层级
-													_options.maximumLevel = parameterset.maximumLevel;
-												}
-
-												jt3dLeft.layer.addWebMapTileService(_options, function(serviceId) {
-
-													//重置图层顺序
-													_self.setLayerNumber(serviceId)
-												});
-
-											} else {
-												ElMessage("请检测图层表parameterset字段是否设置tileMatrixSetID");
-											}
-
-										} else {
-											ElMessage("请检测图层表parameterset字段是否设置style");
-										}
-
-									} else {
-										ElMessage("请检测图层表parameterset字段是否设置layers");
-									}
-								} 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,
-									url: data.datasource,
-									layers: "SDYTMP:map_zrzy_water_polylon",
-									alpha: _opacity
-								}
-								if (parameterset) {
-									if (parameterset.layers) { //WMTS请求的层名
-										_options.layers = parameterset.layers;
-
-										if (parameterset.minimumLevel) { //最小层级
-											_options.minimumLevel = parameterset.minimumLevel;
-										}
-										if (parameterset.maximumLevel) { //最大层级
-											_options.maximumLevel = parameterset.maximumLevel;
-										}
-
-										jt3dLeft.layer.addWebMapService(_options, function(serviceId) {
-
-											//重置图层顺序
-											_self.setLayerNumber(serviceId)
-										});
-									} else {
-										ElMessage("请检测图层表parameterset字段是否设置layers");
-									}
-								} 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,
-									url: data.datasource,
-									alpha: _opacity
-								}
-								if (parameterset) {
-									if (parameterset.layers) {
-										_options.layers = parameterset.layers;
-									}
-								}
-
-								//加载服务
-								jt3dLeft.layer.addArcGisMapServer(_options, function(serviceId) {
-
-									//重置图层顺序
-									_self.setLayerNumber(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,
-									url: data.datasource,
-									alpha: _opacity
-								}
-								if (parameterset) {
-									if (parameterset.minimumLevel) { //最小层级
-										_options.minimumLevel = parameterset.minimumLevel;
-									}
-									if (parameterset.maximumLevel) { //最大层级
-										_options.maximumLevel = parameterset.maximumLevel;
-									}
-								}
-
-								jt3dLeft.layer.addTileMapServiceImagery(_options, function(serviceId) {
-
-									//重置图层顺序
-									_self.setLayerNumber(serviceId)
-								});
-							} else {
-								jt3dLeft.layer.removeImageryProvider({
-									serviceId: _serviceId
-								}).then(res => {
-									data.isinit = '0';
-								});
-							}
-							break;
-						case "Cesium3DTileset": //加载3DTileset地图服务--实景
-
-							if (checked) {
-								data.isinit = '1';
-
-								if (window[_serviceId]) {
-									window[_serviceId].show = true;
-								} else {
-									//设置参数
-									let _options = {
-										id: _serviceId,
-										url: data.datasource,
-									}
-									if (parameterset) {
-										if (parameterset.height) {
-											_options.height = parameterset.height;
-										}
-										if (parameterset.alpha) {
-											_options.alpha = parameterset.alpha;
-										}
-									}
-									//加载实景
-									jt3dLeft.layer.addCesium3DTileset(_options, function(serviceId) {
-										window[_serviceId].show = true;
-									});
-								}
-							} else {
-								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) {
-								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) {
-										window[_serviceId].show = true;
-									});
-								}
-							} else {
-								if (window[_serviceId]) {
-									// jt3dLeft.layer.removeScenePrimitives({
-									// 	serviceId: _serviceId
-									// }).then(res => {
-									// 	data.isinit = '0';
-									// });
-
-									window[_serviceId].show = false;
-									data.isinit = '0';
-								}
-							}
-							break;
-						default:
-							break;
-					}
-				})
-			},
-
-
-			/**
-			 * 设置图层顺序
-			 * @param {Object} options
-			 */
-			setLayerNumber(serviceId) {
-				var imageryLayers = jt3dLeft._viewer.imageryLayers;
-				if (store.markID) {
-					console.log('标注id', store.markID)
-					imageryLayers.raiseToTop(window[store.markID]); //标注层置顶
-				}
-
-				imageryLayers.lowerToBottom(window[serviceId]); //设置图层初始顺序
-				imageryLayers.raise(window[serviceId]);
-				imageryLayers.raise(window[serviceId]);
-				this.inittree.forEach(res => {
-					if (res.layercode && res.layerorder) {
-						let id = "service_" + res.layercode + res.layerorder
-						let startid = Number(res.layercode + res.layerorder)
-						let strid = Number(serviceId.substring(8))
-						if (imageryLayers.contains(window[id])) {
-							if (startid < strid) {
-								imageryLayers.raise(window[serviceId])
-							} else {
-								// imageryLayers.raiseToTop(window[store.markID]);
-								// break;
-							}
-						}
-					}
-				})
-			},
-
-			/**
 			 * 分屏对比初始化
 			 */
 			initSplitScreen() {
@@ -911,7 +215,7 @@
 				this.$parent.$parent.$refs.refMap3d.addSkybox(jt3dLeft);
 
 				//添加镇街边界线——精灵线
-				this.$parent.$parent.$refs.refMap3d.addBoundaryLine(jt3dLeft);
+				// this.$parent.$parent.$refs.refMap3d.addBoundaryLine(jt3dLeft);
 
 			},
 
@@ -979,6 +283,8 @@
 			 * 加载图层控制树
 			 */
 			initTree() {
+				this.$parent.$parent.$refs.refLayer.mark = "serviceLeft";
+
 				//在这获取图层列表
 				let _this = this
 				//权限查询条件语句
@@ -1008,7 +314,7 @@
 							// 复选框默认选中
 							if (res.isinit === '1') {
 								_this.checkedkeys.push(res.id);
-								_this.setLayerControl(res, true);
+								_this.$parent.$parent.$refs.refLayer.setLayersControl(jt3dLeft, res, true);
 							}
 						})
 

src/views/Map3d/components/layer.vue

@@ -70,6 +70,7 @@
 		/* 数据 */
 		data() {
 			return {
+				mark: 'service',
 				treeData: [],
 				inittree: [], //初始化图层数组
 				expandedKeys: [], //对应要展开的节点id
@@ -80,120 +81,12 @@
 		/* 方法 */
 		methods: {
 			/**
-			 * el-tree 当节点被点击的时候触发
-			 * 控制地图服务的显示及隐藏
+			 * 单击图层名称触发服务定位
 			 * @param {Object} data 传递给 data 属性的数组中该节点所对应的对象
 			 */
-			async handleClick(data) {
-				console.log('操作', '单击定位')
-				let _self = this;
-
-				let _serviceId = "service_" + data.layercode + data.layerorder;
-				let layername = data.layername;
-
-				//透明度
-				let _opacity = null;
-				if (data.opacity == null) {
-					_opacity = 1;
-				} else {
-					_opacity = Number(data.opacity);
-					data.opacity = _opacity;
-
-					if (_opacity == 0) {
-						_opacity = 1;
-					}
-				}
-
-				//参数集
-				let parameterset = data.parameterset;
-				if (data.parameterset instanceof Object) {
-					parameterset = data.parameterset;
-				} else if (data.parameterset != "" && data.parameterset != null && data.parameterset != undefined) {
-					parameterset = JSON.parse(data.parameterset);
-				}
-
-				if (data.isinit === '1') {
-					await new Promise((resolve, reject) => {
-						switch (data.loadtype) {
-							case "GeoJsonPolyline": //GeoJsonPolyline
-
-								break;
-							case "entitiesGltf": //gltf/glb
-
-								if (parameterset) {
-									if (parameterset.points) { //模型位置
-										let flyToEntity = jt3d.LocateUtil.flyToEntityByPoints([
-											parameterset.points,
-										], 'point', {
-											heading: 0,
-											pitch: -90,
-											range: 8880
-										});
-									} else {
-										ElMessage("请检测图层表parameterset字段是否设置points");
-									}
-								} else {
-									ElMessage("请检测图层表parameterset字段是否设置points");
-								}
-
-								break;
-							case "PolygonImageMaterial": //图片材质
-
-								break;
-							case "CrImageServerLayer": //地形服务（DEM）
-
-								break;
-							case "DEM": //地形服务（DEM）
-
-								break;
-							case "UrlTemplateImageryProvider": //加载URL模板服务
-
-								break;
-							case "WebMapTileServiceImageryProvider": // WMTS地图服务
-
-								break;
-							case "WebMapServiceImageryProvider": //WMS地图服务
-
-								break;
-							case "ArcGisMapServerImageryProvider": // ArcGIS Online和Server的相关服务
-
-								break;
-							case "TileMapServiceImageryProvider": // 2.5维度地图
-
-								break;
-							case "Cesium3DTileset": //加载3DTileset地图服务--实景
-
-								if (window[_serviceId]) {
-									// jt3d._viewer.flyTo(window[_serviceId], {
-									// 	offset: {
-									// 		heading: Cesium.Math.toRadians(20.0), //方向
-									// 		pitch: Cesium.Math.toRadians(-90), //倾斜角度
-									// 		range: 1000
-									// 	}
-									// });
-
-									jt3d._viewer.flyTo(window[_serviceId]);
-
-									// // 初始化参数默认值
-									// let options = {};
-									// options.heading = Cesium.defaultValue(options.heading, 5200);//方向
-									// options.pitch = Cesium.defaultValue(options.pitch, -10);//倾斜角度
-									// options.range = Cesium.defaultValue(options.range, 450.0);
-									// options.duration = Cesium.defaultValue(options.duration, 2);
-
-									// jt3d.LocateUtil.flyToTileset(window[_serviceId],options);
-
-									// jt3d.LocateUtil.zoomToTilesets(window[_serviceId], options);
-								}
-								break;
-							case "Cesium3DTileset_BM": //加载3DTileset地图服务--白膜
-
-								break;
-							default:
-								break;
-						}
-					})
-				}
+			handleClick(data) {
+				this.mark = 'service';
+				this.setLayersLocation(jt3d, data);
 			},
 
 			/**
@@ -201,34 +94,8 @@
 			 * 地图服务的透明度调整
 			 */
 			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,
-					});
-				}
+				this.mark = 'service';
+				this.setLayersAlpha(jt3d, $event, data)
 			},
 
 			/**
@@ -238,10 +105,10 @@
 			 * @param {Object} node TreeNode 的 node 属性
 			 */
 			handleCheckBoxChange(checked, data, node) {
-
+				this.mark = 'service';
 				let _node = this.$refs.treeRef.getNode(data);
 				if (_node.isLeaf) {
-					this.setLayerControl(data, checked);
+					this.setLayersControl(jt3d, data, checked);
 					this.$refs.treeRef.setChecked(_node, checked); //是否设置子节点，默认为false，利用tree组件渲染后带有的isLeaf(是否为叶子节点)属性，如果为叶子节点就选中。利用tree的API就实现了正确的回显效果	
 
 				} else {
@@ -258,7 +125,7 @@
 			childNodesChange(node, checked) {
 				let _self = this;
 				node.childNodes.forEach(item => {
-					_self.setLayerControl(item.data, checked);
+					_self.setLayersControl(jt3d, item.data, checked);
 					_self.$refs.treeRef.setChecked(item, checked);
 					_self.childNodesChange(item, checked);
 				});
@@ -269,22 +136,15 @@
 			 * @param {Object} data 传递给 data 属性的数组中该节点所对应的对象
 			 * @param {Object} checked 节点本身是否被选中
 			 */
-			async setLayerControl(data, checked) {
+			async setLayersControl(jt3d, data, checked) {
 				console.log('操作', '图层控制')
 
 				let _self = this;
 
-				let _serviceId = "service_" + data.layercode + data.layerorder;
+				let _serviceId = this.mark + "_" + data.layercode + data.layerorder;
 				let layername = data.layername;
 				let layertype = data.layertype;
 
-				// //修改默认选中参数，用于单击定位
-				// if (checked) {
-				// 	data.isinit = '1';
-				// } else {
-				// 	data.isinit = '0';
-				// }
-
 				//透明度
 				let _opacity = null;
 				if (data.opacity == null) {
@@ -501,7 +361,7 @@
 								data.isinit = '1';
 
 								let floatLayer = new this.jt3dSDK.CrImageServerLayer({
-									viewer: window["viewer"],
+									viewer: jt3d._viewer,
 									url: data.datasource,
 									opacity: _opacity,
 									show: true
@@ -560,7 +420,7 @@
 								jt3d.layer.addUrlTemplateImagery(_options, function(serviceId) {
 
 									//重置图层顺序
-									_self.setLayerNumber(serviceId)
+									_self.setLayerNumber(jt3d, serviceId)
 								});
 							} else {
 								jt3d.layer.removeImageryProvider({
@@ -604,7 +464,7 @@
 												jt3d.layer.addWebMapTileService(_options, function(serviceId) {
 
 													//重置图层顺序
-													_self.setLayerNumber(serviceId)
+													_self.setLayerNumber(jt3d, serviceId)
 												});
 
 											} else {
@@ -655,7 +515,7 @@
 										jt3d.layer.addWebMapService(_options, function(serviceId) {
 
 											//重置图层顺序
-											_self.setLayerNumber(serviceId)
+											_self.setLayerNumber(jt3d, serviceId)
 										});
 									} else {
 										ElMessage("请检测图层表parameterset字段是否设置layers");
@@ -691,7 +551,7 @@
 								jt3d.layer.addArcGisMapServer(_options, function(serviceId) {
 
 									//重置图层顺序
-									_self.setLayerNumber(serviceId)
+									_self.setLayerNumber(jt3d, serviceId)
 								})
 							} else {
 								jt3d.layer.removeImageryProvider({
@@ -723,7 +583,7 @@
 								jt3d.layer.addTileMapServiceImagery(_options, function(serviceId) {
 
 									//重置图层顺序
-									_self.setLayerNumber(serviceId)
+									_self.setLayerNumber(jt3d, serviceId)
 								});
 							} else {
 								jt3d.layer.removeImageryProvider({
@@ -817,11 +677,162 @@
 			},
 
 			/**
+			 * 服务定位
+			 * @param {Object} data
+			 */
+			async setLayersLocation(jt3d, data) {
+				console.log('操作', '单击定位')
+				let _self = this;
+
+				let _serviceId = this.mark + "_" + data.layercode + data.layerorder;
+				let layername = data.layername;
+
+				//透明度
+				let _opacity = null;
+				if (data.opacity == null) {
+					_opacity = 1;
+				} else {
+					_opacity = Number(data.opacity);
+					data.opacity = _opacity;
+
+					if (_opacity == 0) {
+						_opacity = 1;
+					}
+				}
+
+				//参数集
+				let parameterset = data.parameterset;
+				if (data.parameterset instanceof Object) {
+					parameterset = data.parameterset;
+				} else if (data.parameterset != "" && data.parameterset != null && data.parameterset != undefined) {
+					parameterset = JSON.parse(data.parameterset);
+				}
+
+				if (data.isinit === '1') {
+					await new Promise((resolve, reject) => {
+						switch (data.loadtype) {
+							case "GeoJsonPolyline": //GeoJsonPolyline
+
+								break;
+							case "entitiesGltf": //gltf/glb
+
+								if (parameterset) {
+									if (parameterset.points) { //模型位置
+										let flyToEntity = jt3d.LocateUtil.flyToEntityByPoints([
+											parameterset.points,
+										], 'point', {
+											heading: 0,
+											pitch: -90,
+											range: 8880
+										});
+									} else {
+										ElMessage("请检测图层表parameterset字段是否设置points");
+									}
+								} else {
+									ElMessage("请检测图层表parameterset字段是否设置points");
+								}
+
+								break;
+							case "PolygonImageMaterial": //图片材质
+
+								break;
+							case "CrImageServerLayer": //地形服务（DEM）
+
+								break;
+							case "DEM": //地形服务（DEM）
+
+								break;
+							case "UrlTemplateImageryProvider": //加载URL模板服务
+
+								break;
+							case "WebMapTileServiceImageryProvider": // WMTS地图服务
+
+								break;
+							case "WebMapServiceImageryProvider": //WMS地图服务
+
+								break;
+							case "ArcGisMapServerImageryProvider": // ArcGIS Online和Server的相关服务
+
+								break;
+							case "TileMapServiceImageryProvider": // 2.5维度地图
+
+								break;
+							case "Cesium3DTileset": //加载3DTileset地图服务--实景
+
+								if (window[_serviceId]) {
+									// jt3d._viewer.flyTo(window[_serviceId], {
+									// 	offset: {
+									// 		heading: Cesium.Math.toRadians(20.0), //方向
+									// 		pitch: Cesium.Math.toRadians(-90), //倾斜角度
+									// 		range: 1000
+									// 	}
+									// });
+
+									jt3d._viewer.flyTo(window[_serviceId]);
+
+									// // 初始化参数默认值
+									// let options = {};
+									// options.heading = Cesium.defaultValue(options.heading, 5200);//方向
+									// options.pitch = Cesium.defaultValue(options.pitch, -10);//倾斜角度
+									// options.range = Cesium.defaultValue(options.range, 450.0);
+									// options.duration = Cesium.defaultValue(options.duration, 2);
+
+									// jt3d.LocateUtil.flyToTileset(window[_serviceId],options);
+
+									// jt3d.LocateUtil.zoomToTilesets(window[_serviceId], options);
+								}
+								break;
+							case "Cesium3DTileset_BM": //加载3DTileset地图服务--白膜
+
+								break;
+							default:
+								break;
+						}
+					})
+				}
+			},
+
+			/**
+			 * 设置服务透明度
+			 * @param {Object} alpha
+			 * @param {Object} data
+			 */
+			setLayersAlpha(jt3d, alpha, data) {
+				let _serviceId = this.mark + "_" + data.layercode + data.layerorder;
+				if (data.loadtype === "Cesium3DTileset") {
+					//设置实景透明度
+					jt3d.layer.set3DTileStyle({
+						serviceId: _serviceId,
+						alpha: alpha,
+					});
+				} else if (data.loadtype === "CrImageServerLayer") {
+					let floatLayer = window[_serviceId];
+					floatLayer.setOpacity(alpha)
+				} else if (data.loadtype === "PolygonImageMaterial") {
+					//设置透明度
+					jt3d.layer.setPolygonImageMaterial({
+						serviceId: _serviceId,
+						alpha: alpha,
+					});
+				} else if (data.loadtype === "entitiesGltf") {
+					//设置透明度
+					jt3d.layer.setModelStyle({
+						serviceId: _serviceId,
+						alpha: alpha,
+					});
+				} else {
+					jt3d.layer.setLayersStyle({
+						serviceId: _serviceId,
+						alpha: alpha,
+					});
+				}
+			},
+			/**
 			 * 设置图层顺序
 			 * @param {Object} options
 			 */
-			setLayerNumber(serviceId) {
-				var imageryLayers = window["viewer"].imageryLayers;
+			setLayerNumber(jt3d, serviceId) {
+				var imageryLayers = jt3d._viewer.imageryLayers;
 				if (store.markID) {
 					console.log('标注id', store.markID)
 					imageryLayers.raiseToTop(window[store.markID]); //标注层置顶
@@ -832,7 +843,7 @@
 				imageryLayers.raise(window[serviceId]);
 				this.inittree.forEach(res => {
 					if (res.layercode && res.layerorder) {
-						let id = "service_" + res.layercode + res.layerorder
+						let id = this.mark + "_" + res.layercode + res.layerorder
 						let startid = Number(res.layercode + res.layerorder)
 						let strid = Number(serviceId.substring(8))
 						if (imageryLayers.contains(window[id])) {
@@ -878,7 +889,7 @@
 						// 复选框默认选中
 						if (res.isinit === '1') {
 							_this.checkedkeys.push(res.id);
-							_this.setLayerControl(res, true);
+							_this.setLayersControl(jt3d, res, true);
 						}
 					})
 					_this.treeData = deepTree(_this.inittree)