卷帘对比和图层控制结合

src/views/Map3d/components/ImageLayerSplit.vue

@@ -69,442 +69,50 @@
 		methods: {
 			/**
 			 * 左侧图层控制
-			 * @param {Object} data
+			 * @param {Object} item
 			 */
-			handleClickLeft(data) {
+			handleClickLeft(item) {
 				let _self = this;
 
-				let _serviceId = "service_" + 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);
-				}
+				this.$parent.$parent.$refs.refLayer.mark = "service";
 
-				//设置参数
-				let _options = {
-					id: _serviceId,
-					url: data.datasource,
-					alpha: _opacity
-				}
+				let _serviceId = this.$parent.$parent.$refs.refLayer.mark + "_" + item.layercode + item.layerorder;
 
+				//移除
 				this.removeSplitLayerLeft();
-
-				switch (data.loadtype) {
-					case "UrlTemplateImageryProvider": //加载URL模板服务
-
-						//设置参数
-						if (parameterset) {
-							if (parameterset.CRS) { //坐标系
-								_options.CRS = parameterset.CRS;
-							}
-							if (parameterset.minimumLevel) { //最小层级
-								_options.minimumLevel = parameterset.minimumLevel;
-							}
-							if (parameterset.maximumLevel) { //最大层级
-								_options.maximumLevel = parameterset.maximumLevel;
-							}
-						}
-
-						jt3d.layer.addUrlTemplateImagery(_options, function(serviceId) {
-							earthAtLeft = window[_serviceId];
-							earthAtLeft.splitDirection = Cesium.SplitDirection.LEFT;
-						});
-						break;
-					case "WebMapTileServiceImageryProvider": // WMTS地图服务
-
-						//设置参数
-						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;
-										}
-
-										jt3d.layer.addWebMapTileService(_options, function(serviceId) {
-											earthAtLeft = window[_serviceId];
-											earthAtLeft.splitDirection = Cesium.SplitDirection.LEFT;
-										});
-
-									} else {
-										ElMessage("请检测图层表parameterset字段是否设置tileMatrixSetID");
-									}
-
-								} else {
-									ElMessage("请检测图层表parameterset字段是否设置style");
-								}
-
-							} else {
-								ElMessage("请检测图层表parameterset字段是否设置layers");
-							}
-						} else {
-							ElMessage("请检测图层表parameterset字段是否设置layers,style,tileMatrixSetID");
-						}
-						break;
-					case "WebMapServiceImageryProvider": //WMS地图服务
-
-						//设置参数
-						if (parameterset) {
-							if (parameterset.layers) { //WMTS请求的层名
-								_options.layers = parameterset.layers;
-
-								if (parameterset.minimumLevel) { //最小层级
-									_options.minimumLevel = parameterset.minimumLevel;
-								}
-								if (parameterset.maximumLevel) { //最大层级
-									_options.maximumLevel = parameterset.maximumLevel;
-								}
-
-								jt3d.layer.addWebMapService(_options, function(serviceId) {
-									earthAtLeft = window[_serviceId];
-									earthAtLeft.splitDirection = Cesium.SplitDirection.LEFT;
-								});
-							} else {
-								ElMessage("请检测图层表parameterset字段是否设置layers");
-							}
-						} else {
-							ElMessage("请检测图层表parameterset字段是否设置layers");
-						}
-
-						break;
-					case "ArcGisMapServerImageryProvider": // ArcGIS Online和Server的相关服务
-
-						//设置参数
-						if (parameterset) {
-							if (parameterset.layers) {
-								_options.layers = parameterset.layers;
-							}
-						}
-
-						//加载服务
-						jt3d.layer.addArcGisMapServer(_options, function(serviceId) {
-							earthAtLeft = window[_serviceId];
-							earthAtLeft.splitDirection = Cesium.SplitDirection.LEFT;
-						})
-
-						break;
-					case "TileMapServiceImageryProvider": // 2.5维度地图
-
-						//设置参数
-						if (parameterset) {
-							if (parameterset.minimumLevel) { //最小层级
-								_options.minimumLevel = parameterset.minimumLevel;
-							}
-							if (parameterset.maximumLevel) { //最大层级
-								_options.maximumLevel = parameterset.maximumLevel;
-							}
-						}
-
-						jt3d.layer.addTileMapServiceImagery(_options, function(serviceId) {
-							earthAtLeft = window[_serviceId];
-							earthAtLeft.splitDirection = Cesium.SplitDirection.LEFT;
-						});
-
-						break;
-					case "Cesium3DTileset": //加载3DTileset地图服务--实景
-
-						//设置参数
-						if (parameterset) {
-							if (parameterset.height) {
-								_options.height = parameterset.height;
-							}
-							if (parameterset.alpha) {
-								_options.alpha = parameterset.alpha;
-							}
-						}
-						//加载实景
-						jt3d.layer.addCesium3DTileset(_options, function(serviceId) {
-							earthAtLeft = window[_serviceId];
-							earthAtLeft.splitDirection = Cesium.SplitDirection.LEFT;
-						});
-
-						break;
-					case "Cesium3DTileset_BM": //加载3DTileset地图服务--白膜
-
-						//设置参数
-						if (parameterset) {
-							if (parameterset.color) {
-								_options.color = parameterset.color;
-							}
-						}
-
-						//加载白膜
-						jt3d.layer.addCesium3DTilesetBm(_options, function(serviceId) {
-							earthAtLeft = window[_serviceId];
-							earthAtLeft.splitDirection = Cesium.SplitDirection.LEFT;
-						});
-
-						break;
-					default:
-						break;
-				}
-
-				//图层定位
-				this.$parent.$parent.$refs.refLayer.mark = "service";
-				this.$parent.$parent.$refs.refLayer.setLayersLocation(jt3d, data);
+				//添加
+				this.$parent.$parent.$refs.refLayer.setLayersControl(jt3d, item, true).then(res => {
+					//定位
+					_self.$parent.$parent.$refs.refLayer.setLayersLocation(jt3d, item);
+
+					earthAtLeft = window[_serviceId];
+					earthAtLeft.splitDirection = Cesium.SplitDirection.LEFT;
+				});
 			},
 			/**
 			 * 
 			 * 
 			 * 右侧图层控制
-			 * @param {Object} data
+			 * @param {Object} item
 			 */
-			handleClickRight(data) {
+			handleClickRight(item) {
 				let _self = this;
 
-				let _serviceId = "service_" + 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);
-				}
+				this.$parent.$parent.$refs.refLayer.mark = "service";
 
-				//设置参数
-				let _options = {
-					id: _serviceId,
-					url: data.datasource,
-					alpha: _opacity
-				}
+				let _serviceId = this.$parent.$parent.$refs.refLayer.mark + "_" + item.layercode + item.layerorder;
 
+				//移除
 				this.removeSplitLayerRight();
-				switch (data.loadtype) {
-					case "UrlTemplateImageryProvider": //加载URL模板服务
-
-						//设置参数
-						if (parameterset) {
-							if (parameterset.CRS) { //坐标系
-								_options.CRS = parameterset.CRS;
-							}
-							if (parameterset.minimumLevel) { //最小层级
-								_options.minimumLevel = parameterset.minimumLevel;
-							}
-							if (parameterset.maximumLevel) { //最大层级
-								_options.maximumLevel = parameterset.maximumLevel;
-							}
-						}
+				//添加
+				this.$parent.$parent.$refs.refLayer.setLayersControl(jt3d, item, true).then(res => {
+					//定位
+					_self.$parent.$parent.$refs.refLayer.setLayersLocation(jt3d, item);
 
-						jt3d.layer.addUrlTemplateImagery(_options, function(serviceId) {
-							//设置透明度
-							jt3d.layer.setLayersStyle({
-								serviceId: serviceId,
-								alpha: _opacity
-							});
-
-							earthAtRight = window[_serviceId];
-							earthAtRight.splitDirection = Cesium.SplitDirection.RIGHT;
-						});
-						break;
-					case "WebMapTileServiceImageryProvider": // WMTS地图服务
-
-						//设置参数
-						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;
-										}
-
-										jt3d.layer.addWebMapTileService(_options, function(serviceId) {
-											//设置透明度
-											jt3d.layer.setLayersStyle({
-												serviceId: serviceId,
-												alpha: _opacity
-											});
-
-											earthAtRight = window[_serviceId];
-											earthAtRight.splitDirection = Cesium.SplitDirection.RIGHT;
-										});
-
-									} else {
-										ElMessage("请检测图层表parameterset字段是否设置tileMatrixSetID");
-									}
-
-								} else {
-									ElMessage("请检测图层表parameterset字段是否设置style");
-								}
-
-							} else {
-								ElMessage("请检测图层表parameterset字段是否设置layers");
-							}
-						} else {
-							ElMessage("请检测图层表parameterset字段是否设置layers,style,tileMatrixSetID");
-						}
-						break;
-					case "WebMapServiceImageryProvider": //WMS地图服务
-
-						//设置参数
-						if (parameterset) {
-							if (parameterset.layers) { //WMTS请求的层名
-								_options.layers = parameterset.layers;
-
-								if (parameterset.minimumLevel) { //最小层级
-									_options.minimumLevel = parameterset.minimumLevel;
-								}
-								if (parameterset.maximumLevel) { //最大层级
-									_options.maximumLevel = parameterset.maximumLevel;
-								}
-
-								jt3d.layer.addWebMapService(_options, function(serviceId) {
-									//设置透明度
-									jt3d.layer.setLayersStyle({
-										serviceId: serviceId,
-										alpha: _opacity
-									});
-
-									earthAtRight = window[_serviceId];
-									earthAtRight.splitDirection = Cesium.SplitDirection.RIGHT;
-								});
-							} else {
-								ElMessage("请检测图层表parameterset字段是否设置layers");
-							}
-						} else {
-							ElMessage("请检测图层表parameterset字段是否设置layers");
-						}
-
-						break;
-					case "ArcGisMapServerImageryProvider": // ArcGIS Online和Server的相关服务
-
-						//设置参数
-						if (parameterset) {
-							if (parameterset.layers) {
-								_options.layers = parameterset.layers;
-							}
-						}
+					earthAtRight = window[_serviceId];
+					earthAtRight.splitDirection = Cesium.SplitDirection.RIGHT;
+				});
 
-						//加载服务
-						jt3d.layer.addArcGisMapServer(_options, function(serviceId) {
-							//设置透明度
-							jt3d.layer.setLayersStyle({
-								serviceId: serviceId,
-								alpha: _opacity
-							});
-
-							earthAtRight = window[_serviceId];
-							earthAtRight.splitDirection = Cesium.SplitDirection.RIGHT;
-						})
-
-						break;
-					case "TileMapServiceImageryProvider": // 2.5维度地图
-
-						//设置参数
-						if (parameterset) {
-							if (parameterset.minimumLevel) { //最小层级
-								_options.minimumLevel = parameterset.minimumLevel;
-							}
-							if (parameterset.maximumLevel) { //最大层级
-								_options.maximumLevel = parameterset.maximumLevel;
-							}
-						}
-
-						jt3d.layer.addTileMapServiceImagery(_options, function(serviceId) {
-							//设置透明度
-							jt3d.layer.setLayersStyle({
-								serviceId: serviceId,
-								alpha: _opacity
-							});
-
-							earthAtRight = window[_serviceId];
-							earthAtRight.splitDirection = Cesium.SplitDirection.RIGHT;
-						});
-
-						break;
-					case "Cesium3DTileset": //加载3DTileset地图服务--实景
-
-						//设置参数
-						if (parameterset) {
-							if (parameterset.height) {
-								_options.height = parameterset.height;
-							}
-							if (parameterset.alpha) {
-								_options.alpha = parameterset.alpha;
-							}
-						}
-						//加载实景
-						jt3d.layer.addCesium3DTileset(_options, function(serviceId) {
-							earthAtRight = window[_serviceId];
-							earthAtRight.splitDirection = Cesium.SplitDirection.RIGHT;
-						});
-
-						break;
-					case "Cesium3DTileset_BM": //加载3DTileset地图服务--白膜
-
-						//设置参数
-						if (parameterset) {
-							if (parameterset.color) {
-								_options.color = parameterset.color;
-							}
-						}
-
-						//加载白膜
-						jt3d.layer.addCesium3DTilesetBm(_options, function(serviceId) {
-							earthAtRight = window[_serviceId];
-							earthAtRight.splitDirection = Cesium.SplitDirection.RIGHT;
-						});
-
-						break;
-					default:
-						break;
-				}
-
-				//图层定位
-				this.$parent.$parent.$refs.refLayer.mark = "service";
-				this.$parent.$parent.$refs.refLayer.setLayersLocation(jt3d, data);
 			},
 
 			/**
@@ -691,8 +299,7 @@
 			}).then(res => {
 				//初始图层列表
 				this.initData = res.data
-				init().then(item => {
-				})
+				init().then(item => {})
 			})
 		},
 

src/views/Map3d/components/layer.vue

@@ -136,7 +136,7 @@
 			 * @param {Object} data 传递给 data 属性的数组中该节点所对应的对象
 			 * @param {Object} checked 节点本身是否被选中
 			 */
-			async setLayersControl(jt3d, data, checked) {
+			setLayersControl(jt3d, data, checked) {
 				console.log('操作', '图层控制')
 
 				let _self = this;
@@ -181,7 +181,7 @@
 					}
 				}
 
-				await new Promise((resolve, reject) => {
+				return new Promise((resolve, reject) => {
 					switch (data.loadtype) {
 						case "GeoJsonPoint": //GeoJsonPoint
 							if (checked) {
@@ -207,7 +207,7 @@
 
 
 								jt3d.layer.addBillboardByGeoJson(_options, function(serviceId) {
-
+									resolve(true);
 								});
 
 							} else {
@@ -215,6 +215,7 @@
 									serviceId: _serviceId,
 								}).then(res => {
 									data.isinit = '0';
+									resolve(true);
 								});
 							}
 							break;
@@ -262,13 +263,14 @@
 								}
 
 								jt3d.layer.addPolylineByGeoJson(_options, function(serviceId) {
-
+									resolve(true);
 								});
 							} else {
 								jt3d.layer.removeDataSources({
 									serviceId: _serviceId,
 								}).then(res => {
 									data.isinit = '0';
+									resolve(true);
 								});
 							}
 							break;
@@ -313,6 +315,7 @@
 											// let flyToEntity = jt3d.LocateUtil.flyToEntityByPoints([
 											// 	parameterset.points,
 											// ], 'point');
+											resolve(true);
 										});
 
 									} else {
@@ -326,6 +329,7 @@
 									serviceId: _serviceId,
 								}).then(res => {
 									data.isinit = '0';
+									resolve(true);
 								});
 							}
 							break;
@@ -341,7 +345,7 @@
 											url: data.datasource,
 											alpha: _opacity
 										}, function(serviceId) {
-
+											resolve(true);
 										});
 									} else {
 										ElMessage("请检测图层表parameterset字段是否设置points");
@@ -354,6 +358,7 @@
 									serviceId: _serviceId,
 								}).then(res => {
 									data.isinit = '0';
+									resolve(true);
 								});
 							}
 							break;
@@ -371,9 +376,11 @@
 								window[_serviceId] = floatLayer;
 								//添加网格地图
 								// window[_serviceId].show();
+								resolve(true);
 							} else {
 								window[_serviceId].hide();
 								data.isinit = '0';
+								resolve(true);
 							}
 							break;
 						case "DEM": //地形服务（DEM）
@@ -390,9 +397,11 @@
 									}
 								}
 								jt3d.layer.addTerrain(_options);
+								resolve(true);
 							} else {
 								jt3d.layer.removeTerrain().then(res => {
 									data.isinit = '0';
+									resolve(true);
 								});
 							}
 							break;
@@ -432,12 +441,15 @@
 											imageryLayers.raiseToTop(window[serviceId]);
 										}
 									}
+
+									resolve(true);
 								});
 							} else {
 								jt3d.layer.removeImageryProvider({
 									serviceId: _serviceId
 								}).then(res => {
 									data.isinit = '0';
+									resolve(true);
 								});
 							}
 
@@ -485,6 +497,7 @@
 															imageryLayers.raiseToTop(window[serviceId]);
 														}
 													}
+													resolve(true);
 												});
 
 											} else {
@@ -507,6 +520,7 @@
 									serviceId: _serviceId
 								}).then(res => {
 									data.isinit = '0';
+									resolve(true);
 								});
 							}
 							break;
@@ -518,7 +532,6 @@
 								let _options = {
 									id: _serviceId,
 									url: data.datasource,
-									layers: "SDYTMP:map_zrzy_water_polylon",
 									alpha: _opacity
 								}
 								if (parameterset) {
@@ -545,6 +558,7 @@
 													imageryLayers.raiseToTop(window[serviceId]);
 												}
 											}
+											resolve(true);
 										});
 									} else {
 										ElMessage("请检测图层表parameterset字段是否设置layers");
@@ -557,6 +571,7 @@
 									serviceId: _serviceId
 								}).then(res => {
 									data.isinit = '0';
+									resolve(true);
 								});
 							}
 							break;
@@ -590,12 +605,14 @@
 											imageryLayers.raiseToTop(window[serviceId]);
 										}
 									}
+									resolve(true);
 								})
 							} else {
 								jt3d.layer.removeImageryProvider({
 									serviceId: _serviceId
 								}).then(res => {
 									data.isinit = '0';
+									resolve(true);
 								});
 							}
 							break;
@@ -631,12 +648,14 @@
 											imageryLayers.raiseToTop(window[serviceId]);
 										}
 									}
+									resolve(true);
 								});
 							} else {
 								jt3d.layer.removeImageryProvider({
 									serviceId: _serviceId
 								}).then(res => {
 									data.isinit = '0';
+									resolve(true);
 								});
 							}
 							break;
@@ -664,6 +683,7 @@
 									//加载实景
 									jt3d.layer.addCesium3DTileset(_options, function(serviceId) {
 										window[_serviceId].show = true;
+										resolve(true);
 									});
 								}
 							} else {
@@ -677,6 +697,7 @@
 
 									window[_serviceId].show = false;
 									data.isinit = '0';
+									resolve(true);
 								}
 							}
 
@@ -702,6 +723,7 @@
 									//加载白膜
 									jt3d.layer.addCesium3DTilesetBm(_options, function(serviceId) {
 										window[_serviceId].show = true;
+										resolve(true);
 									});
 								}
 							} else {
@@ -714,6 +736,7 @@
 
 									window[_serviceId].show = false;
 									data.isinit = '0';
+									resolve(true);
 								}
 							}
 							break;
@@ -727,7 +750,7 @@
 			 * 服务定位
 			 * @param {Object} data
 			 */
-			async setLayersLocation(jt3d, data) {
+			 setLayersLocation(jt3d, data) {
 				console.log('操作', '单击定位')
 				let _self = this;
 
@@ -756,7 +779,7 @@
 				}
 
 				if (data.isinit === '1') {
-					await new Promise((resolve, reject) => {
+					return new Promise((resolve, reject) => {
 						switch (data.loadtype) {
 							case "GeoJsonPolyline": //GeoJsonPolyline
 
@@ -772,6 +795,8 @@
 											pitch: -90,
 											range: 8880
 										});
+										
+										resolve(true);
 									} else {
 										ElMessage("请检测图层表parameterset字段是否设置points");
 									}
@@ -827,6 +852,8 @@
 									// jt3d.LocateUtil.flyToTileset(window[_serviceId],options);
 
 									// jt3d.LocateUtil.zoomToTilesets(window[_serviceId], options);
+									
+									resolve(true);
 								}
 								break;
 							case "Cesium3DTileset_BM": //加载3DTileset地图服务--白膜
@@ -900,7 +927,7 @@
 								imageryLayers.raise(window[serviceId])
 								console.log('aaa', serviceId)
 
-							} 
+							}
 						}
 					}
 				})