JT-CIM/src/views/Map3d/components/ViewerSplitScreen.vue

<script setup>
	import {
		inject
	} from "vue";
	const getMapInstance = inject("getMapInstance");
	jt3dRight = getMapInstance();

	import {
		Store
	} from '@/store/index'
	store = Store()
	import {
		deepTree
	} from "@/utils/deepTree.js";
</script>

<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">
			<template #default="{ node, data }">
				<!-- 复选框 -->
				<el-checkbox v-if="data.ischeck === '1' && store.userport == 'PC'" v-model="node.checked" :indeterminate="node.indeterminate" :disabled="!!node.disabled" @change="handleCheckBoxChange($event, data, node)">
				</el-checkbox>
				<el-switch  v-else-if="data.ischeck == 1 && store.userport == 'APP'" width="30rem" size="small" v-model="node.checked" @change="handleCheckBoxChange($event, data, node)" />
				<span class="custom-tree-node">
					<!-- 字体、图标 -->
					<!-- <span>
						<img src="@/assets/images/logo16x16.ico" />
					</span> -->
					<span class="overflowtext">
						{{ data.layername }}
					</span>
				</span>

				<!-- 透明度 -->
				<template v-if="node.checked && data.opacity >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" />
					</div>
				</template>
			</template>
		</el-tree>
	</div>
</template>

<script>
	let store = undefined;
	let jt3dRight = undefined;
	let jt3dLeft = undefined;
	export default {

		/* 数据 */
		data() {
			return {
				treeData: [],
				inittree: [], //初始化图层数组
				expandedKeys: [], //对应要展开的节点id
			}
		},

		/* 方法 */
		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地图服务--实景

								break;
							case "Cesium3DTileset_BM": //加载3DTileset地图服务--白膜

								break;
							default:
								break;
						}
					})
				}

			},

			/**
			 * el-tree 当复选框被点击的时候触发
			 * 控制地图服务的显示及隐藏
			 * @param {Object} data 传递给 data 属性的数组中该节点所对应的对象
			 * @param {Object} checked 节点本身是否被选中
			 */
			async handleCheckChange(data, checked) {
				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) {
								//设置参数
								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,
								});
							}
							break;
						case "GeoJsonPolyline": //GeoJsonPolyline
							if (checked) {
								//设置参数
								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,
								});
							}
							break;
						case "entitiesGltf": //gltf/glb
							if (checked) {
								//设置参数
								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,
								});
							}
							break;
						case "PolygonImageMaterial": //图片材质
							if (checked) {
								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,
								});
							}
							break;
						case "CrImageServerLayer": //贴地所有地形、模型的规划图、网格地图
							if (checked) {
								let floatLayer = new this.jt3dSDK.CrImageServerLayer({
									viewer: jt3dLeft._viewer,
									url: data.datasource,
									opacity: _opacity,
									show: true
								});
								window[_serviceId] = floatLayer;
								//添加网格地图
								// window[_serviceId].show();
							} else {
								window[_serviceId].hide();
							}
							break;
						case "DEM": //地形服务（DEM）
							if (checked) {
								//设置参数
								let _options = {
									url: data.datasource,
								}
								if (parameterset) {
									if (parameterset.terrainExaggeration) { //地形夸张系数
										_options.terrainExaggeration = parameterset.terrainExaggeration;
									}
								}

								jt3dLeft.layer.addTerrain(_options);
							} else {
								jt3dLeft.layer.removeTerrain();
							}
							break;
						case "UrlTemplateImageryProvider": //加载URL模板服务
							if (checked) {
								//设置参数
								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)
									if (layertype === '标注') {
										var imageryLayers = jt3dLeft._viewer.imageryLayers;
										imageryLayers.raiseToTop(window[serviceId]);
									}

								});
							} else {
								let removeLayer = jt3dLeft.layer.removeImageryProvider({
									serviceId: _serviceId
								});
								removeLayer.then(function() {
									console.log('成功移除')
								});
							}

							break;
						case "WebMapTileServiceImageryProvider": // WMTS地图服务
							if (checked) {

								//设置参数
								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.tileMatrixLabels) { //TileMatrix中用于WMTS请求的标识符列表，每个TileMatrix级别一个标识符。
													_options.tileMatrixLabels = parameterset.tileMatrixLabels;
												}
												if (parameterset.minimumLevel) { //最小层级
													_options.minimumLevel = parameterset.minimumLevel;
												}
												if (parameterset.maximumLevel) { //最大层级
													_options.maximumLevel = parameterset.maximumLevel;
												}

												jt3dLeft.layer.addWebMapTileService(_options, function(serviceId) {

													//重置图层顺序
													_self.setLayerNumber(serviceId)
													if (layertype === '标注') {
														var imageryLayers = jt3dLeft._viewer.imageryLayers;
														imageryLayers.raiseToTop(window[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
								});
							}
							break;
						case "WebMapServiceImageryProvider": //WMS地图服务
							if (checked) {
								//设置参数
								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)
											if (layertype === '标注') {
												var imageryLayers = jt3dLeft._viewer.imageryLayers;
												imageryLayers.raiseToTop(window[serviceId]);
											}
										});
									} else {
										ElMessage("请检测图层表parameterset字段是否设置layers");
									}
								} else {
									ElMessage("请检测图层表parameterset字段是否设置layers");
								}

							} else {
								jt3dLeft.layer.removeImageryProvider({
									serviceId: _serviceId
								});
							}
							break;
						case "ArcGisMapServerImageryProvider": // ArcGIS Online和Server的相关服务
							if (checked) {
								//设置参数
								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)
									if (layertype === '标注') {
										var imageryLayers = jt3dLeft._viewer.imageryLayers;
										imageryLayers.raiseToTop(window[serviceId]);
									}
								})
							} else {
								jt3dLeft.layer.removeImageryProvider({
									serviceId: _serviceId
								});
							}
							break;
						case "TileMapServiceImageryProvider": // 2.5维度地图
							if (checked) {
								//设置参数
								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)
									if (layertype === '标注') {
										var imageryLayers = jt3dLeft._viewer.imageryLayers;
										imageryLayers.raiseToTop(window[serviceId]);
									}

								});
							} else {
								jt3dLeft.layer.removeImageryProvider({
									serviceId: _serviceId
								});
							}
							break;
						case "Cesium3DTileset": //加载3DTileset地图服务--实景
							let datasource = data.datasource.split("#")
							console.log('datasource', datasource)
							if (checked) {
								//加载实景
								datasource.forEach((res, index) => {
									//设置参数
									let _options = {
										id: _serviceId + index,
										url: res,
									}
									if (parameterset) {
										if (parameterset.height) {
											_options.height = parameterset.height;
										}
										if (parameterset.alpha) {
											_options.alpha = parameterset.alpha;
										}
									}

									jt3dLeft.layer.addCesium3DTileset(_options, function(serviceId) {

										window[_serviceId + index] = window[serviceId];

									});
								})
							} else {
								datasource.forEach((res, index) => {
									jt3dLeft.layer.removeScenePrimitives({
										serviceId: _serviceId + index
									});
								})
							}

							break;
						case "Cesium3DTileset_BM": //加载3DTileset地图服务--白膜
							if (checked) {
								//设置参数
								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);
								});
							} else {
								jt3dLeft.layer.removeScenePrimitives({
									serviceId: _serviceId
								});
							}
							break;
						default:
							break;
					}
				})
			},

			/**
			 * 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)
					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() {
				let _self = this;

				//这样做会跑偏
				// let cesiumContainerDiv = document.getElementById("cesiumContainer2");
				// if (cesiumContainerDiv == null) {
				// 	cesiumContainerDiv = document.createElement('div');
				// 	cesiumContainerDiv.id = "cesiumContainer2";
				// 	cesiumContainerDiv.classList.add("ViewerSplitScreen");
				// 	cesiumContainerDiv.style.float = "left";
				// 	cesiumContainerDiv.style.width = "calc(50% - 1rem)";
				// 	cesiumContainerDiv.style.height = "100vh";
				// 	cesiumContainerDiv.style.margin = "0";
				// 	cesiumContainerDiv.style.borderRight = "2rem solid red";

				// 	/* 加入到页面 */
				// 	document.body.appendChild(cesiumContainerDiv);
				// }

				let mapView1 = document.getElementById("cesiumContainer");
				let mapView2 = document.getElementById("cesiumContainer2");
				mapView1.className = "ViewerSplitScreen";
				mapView2.style.display = "block";
				//加载分屏左侧大球
				this.initMap3d();
				//同步相机状态
				this.syncViewer();
				//绑定图层控制
				this.initTree();

			},

			/**
			 * 移除分屏对比
			 */
			removeSplitScreen() {
				let mapView1 = document.getElementById("cesiumContainer");
				let mapView2 = document.getElementById("cesiumContainer2");

				mapView1.className = "jt-map";
				mapView2.style.display = "none";
				mapView2.innerHTML = "";

				if (jt3dLeft) {
					jt3dLeft._viewer.entities.removeAll(); // 删除全部
					jt3dLeft._viewer.imageryLayers.removeAll();
					jt3dLeft._viewer.scene.primitives.removeAll(); //谨慎使用，可能删除不必要的primitive
					// jt3dLeft._viewer.destroy();
					jt3dLeft = undefined;
				}
			},

			/**
			 * 加载分屏左侧大球
			 */
			initMap3d() {
				jt3dLeft = new this.jt3dSDK.jtMap3d({
					container: "cesiumContainer2",
				});

				//底部工具
				jt3dLeft.statusBar.show = true;
				//图层
				jt3dLeft.layer = new this.jt3dSDK.layer(jt3dLeft._viewer);

				//测量工具
				jt3dLeft.CommonTools = new this.jt3dSDK.CommonTools(jt3dLeft._viewer);
				//绘图工具
				jt3dLeft.SketchViewModel = new this.jt3dSDK.SketchViewModel(jt3dLeft._viewer, {
					isClear: false,
					isDrawPoint: true,
					isRetainDrawPoint: true,
					iconType: 'blue',
				});
				//定位工具
				jt3dLeft.LocateUtil = new this.jt3dSDK.LocateUtil(jt3dLeft._viewer);

				//二三维标绘
				jt3dLeft.DrawTools = new this.jt3dSDK.DrawTools(jt3dLeft._viewer);
				//军事标绘
				jt3dLeft.DrawMilitaryPlot = new this.jt3dSDK.DrawMilitaryPlot(jt3dLeft._viewer);

				//天空盒子
				jt3dLeft.SceneEffects = {};
				jt3dLeft.SceneEffects.SkyBox = new this.jt3dSDK.SceneEffects.SkyBox(jt3dLeft._viewer);

				//线对象
				jt3dLeft.PolylineObject = new this.jt3dSDK.PolylineObject(jt3dLeft._viewer);

				//比例尺、指南针
				this.$parent.$parent.$refs.queryword.initNavigation(jt3dLeft);

				//设置默认视图
				this.$parent.$parent.$refs.refMap3d.setView(jt3dLeft);

				// 初始化项目区域范围视角
				this.$parent.$parent.$refs.refMap3d.fullMap(jt3dLeft);

				//加载天空盒子
				this.$parent.$parent.$refs.refMap3d.addSkybox(jt3dLeft);

				//添加镇街边界线——精灵线
				this.$parent.$parent.$refs.refMap3d.addBoundaryLine(jt3dLeft);

			},

			/**
			 * 同步相机状态
			 */
			syncViewer() {
				let _self = this;

				let viewerL = jt3dLeft._viewer;
				let viewerR = jt3dRight._viewer;

				var sceneL = viewerL.scene;
				var sceneR = viewerR.scene;

				var handlerL = new Cesium.ScreenSpaceEventHandler(sceneL.canvas);
				var ellipsoidL = sceneL.globe.ellipsoid;
				var handlerR = new Cesium.ScreenSpaceEventHandler(sceneR.canvas);
				var ellipsoidR = sceneR.globe.ellipsoid;

				handlerL.setInputAction((movement) => {
					this.isLeftTrigger = true;
					this.isRightTrigger = false;
				}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

				handlerR.setInputAction((movement) => {
					this.isLeftTrigger = false;
					this.isRightTrigger = true;
				}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

				var syncViewerL = function() {
					if (_self.isLeftTrigger) {
						viewerR.camera.flyTo({
							destination: viewerL.camera.position,
							orientation: {
								heading: viewerL.camera.heading,
								pitch: viewerL.camera.pitch,
								roll: viewerL.camera.roll
							},
							duration: 0.0
						});
					}
				}
				viewerR.camera.changed.addEventListener(syncViewerL);
				viewerR.scene.preRender.addEventListener(syncViewerL);

				var syncViewerR = function() {
					if (_self.isRightTrigger) {
						viewerL.camera.flyTo({
							destination: viewerR.camera.position,
							orientation: {
								heading: viewerR.camera.heading,
								pitch: viewerR.camera.pitch,
								roll: viewerR.camera.roll
							},
							duration: 0.0
						});
					}
				}
				viewerR.camera.changed.addEventListener(syncViewerR);
				viewerR.scene.preRender.addEventListener(syncViewerR);
			},

			/**
			 * 加载图层控制树
			 */
			initTree() {
				//在这获取图层列表
				let _this = this
				//权限查询条件语句
				let atlasLayersSqlWhere = undefined

				//获取地图图集id
				let roleId = store.roleId
				atlasLayersSqlWhere = '"roleid"' + " = " + roleId + " "

				//Promise回调
				function init(data) {
					return new Promise((resolve, reject) => {
						_this.inittree.forEach(res => {
							let num = Number(res.layerorder)
							if (num < 10) {
								res.layerorder = '0' + res.layerorder
							}
							
							//显示2级
							if (res.parentid === null) {
								_this.expandedKeys.push(res.id);
							}
							
							//其它级别展开
							if (res.isExpand === '1') {
								_this.expandedKeys.push(res.id);
							}
						})

						_this.treeData = deepTree(_this.inittree)
						resolve(_this.treeData)
					})
				}


				//获取图集
				this.$http.get('/getTableList', {
					tableName: 'sys_map_atlas_layers', //表名
					sqlWhere: atlasLayersSqlWhere, //
					orderByField: ''
				}).then(res => {
					console.log('所有图层', res.data)
					//初始图层列表
					this.inittree = res.data
					init(res.data).then(item => {
						//图层初始化打开状态
						_this.setNodesChecked(item);
						console.log('图层控制树列表', _this.treeData)
					})

				})
			}
		},

		mounted() {

		},
	};
</script>

<style lang="scss">
	.el-switch--small .el-switch__core .el-switch__action{
		width: 12rem;
		height: 12rem;
	}
	.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-slider__button{
		width: 20rem;
		height: 20rem;
	}
	.el-tree-node__content{
		height: 26rem;
	}
	
	.el-switch--small .el-switch__core{
		height: 16rem;
	}
	
	.el-switch--small{
		padding: 0 5rem;
	}
	
	.jt-layer {
		padding-left: 10rem;

		.el-tree {
			background: none;
			color: #fff;
			--el-tree-node-hover-bg-color: #2a67c3;

			.overflowtext {
				width: auto !important;
				padding: 0;
			}
		}

		.tree-line {
			.el-tree-node {
				position: relative;
				// padding-left: 16rem; // 缩进量
			}

			.el-tree-node__children {
				padding-left: 16rem !important; // 缩进量

				.el-tree-node__content {
					padding-left: 18rem !important;
				}
			}

			// 竖线
			.el-tree-node::before {
				content: "";
				height: 100%;
				width: 1rem;
				position: absolute;
				left: -3rem;
				top: -26rem;
				border-width: 1rem;
				border-left: 1rem dashed rgba(255, 255, 255, .8);
			}

			// 当前层最后一个节点的竖线高度固定
			.el-tree-node:last-child::before {
				height: 38rem; // 可以自己调节到合适数值
			}

			// 横线
			.el-tree-node::after {
				content: "";
				width: 24rem;
				height: 20rem;
				position: absolute;
				left: -3rem;
				top: 12rem;
				border-width: 1rem;
				border-top: 1rem dashed rgba(255, 255, 255, .8);
			}

			// 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
			&>.el-tree-node::after {
				border-top: none;
			}

			&>.el-tree-node::before {
				border-left: none;
			}

			// 展开关闭的icon
			.el-tree-node__expand-icon {
				font-size: 16rem;

				// 叶子节点（无子节点）
				&.is-leaf {
					color: transparent;
					display: none; // 也可以去掉
				}
			}
		}
	}
</style>