---
title: 分屏对比组件
date: 2023-07-17
---
[[toc]]

## 1. jt-toolbars 简介
- 加载两个大球，可以控制两个图层控制进行同区域不同图层的对比！

## 2.Warning 

::: warning 注意
- 获取图层数据代码参考CIM平台
- 使用ref标记组件时，同时需要定义标记名称！具体可参考CIM平台分屏对比组件写法！
:::


## 3. jt-toolbars API
| 属性名   | 说明 |     类型 |    是否必须  |
| :----- | :-------: | :-------: | :-------: |
| viewer |  从jtMap3d实例获取  | obj |   是 |
| layerData |  默认图层  | obj |   是 |
| treeData | 图层列表  | obj |   是 |
| expandedKeys | 默认展开节点集合  | array |   是 |
| checkedkeys | 默认打开节点的  | array |   是 |


## 4. 代码示例
```
<jt-popup title="分屏对比" animationClass="fadein-left" >
	<jt-mapCompare ref="mapCompareRef" :viewer="viewer" :layerData="layerData" :treeData="treeData" :expandedKeys="expandedKeys" :checkedkeys="checkedkeys" :runtimeEnvironment="runtimeEnvironment"></jt-mapCompare>
</jt-popup>

<script setup>
	import {
		onMounted,
		onBeforeUnmount,
		ref,
		inject
	} from "vue";
	
	import {
		useWidget
	} from "@/common/store/widget"
	const {
		disable,
		currentWidget
	} = useWidget();

	import {
		deepTree
	} from "@/utils/deepTree.js";
	import $http from '@/utils/http.js';

	import store from '@/store/index';
	const roleId = store.userStore.user.roleId

	/**
	 * 获取地图对象
	 */
	const getMapInstance = inject("getMapInstance");
	let jtMap3d = getMapInstance();

	let viewer = ref({});
	let layerData = ref([]); //图层
	const treeData = ref([]); //图层控制树
	const expandedKeys = ref([]); //对应要展开的节点id
	const checkedkeys = ref([]); //默认打开节点的id
	let isDataOnload = ref(false);

	const treeRef = ref(null); // 定义一个对象关联上子组件的 ref 值（注意：这里的属性名必须跟子组件定义的 ref 值一模一treeRef样，否者会关联失效
	//定义子组件实例，名称要和上面的ref相同
	const mapCompareRef = ref(null);

	onMounted(() => {
		initLayerTree();
		viewer.value = jtMap3d._viewer
	});

	/**
	 * 初始化图层控制树
	 * 如果想要等数据返回后再执行后面的代码，那么就要使用 async/await
	 */
	async function initLayerTree() {

		// 这时layers会等到异步请求的结果回来后才进行赋值，同时不会执行之后的代码
		const layers = await getLayers();

		layers.map((item) => {
			//排序号
			let num = Number(item.layerorder)
			if (num < 10) {
				item.layerorder = '0' + item.layerorder
			}

			//图层ID
			let serviceId = "serviceLeft_" + item.layercode + item.layerorder;
			item.serviceId = serviceId;

			//透明度
			if (item.opacity) {
				item.opacity = Number(item.opacity);
			}

			// 复选框选中
			if (item.isinit === '1') {
				checkedkeys.value.push(item.id);
			}

			//默认展开
			if (item.isexpand === '1') {
				expandedKeys.value.push(item.id);
			}
		})

		layerData.value = layers;
		treeData.value = deepTree(layers);

		isDataOnload.value = true;
	}

	/**
	 * 获取图层
	 */
	const getLayers = () => {
		return new Promise((resolve, reject) => {
			//获取地图图集id
			let atlasLayersSqlWhere = '"roleId"' + " = " + roleId;
			//获取图集
			$http.get('/getTableList', {
				tableName: 'sys_map_atlas_layers', //表名
				sqlWhere: atlasLayersSqlWhere, //查询条件
				orderByField: '' //排序字段
			}).then(res => {
				resolve(res.data)
			});
		});
	}

	/**
	 * 即将销毁
	 */
	onBeforeUnmount(() => {
		// 释放当前的widget
		disable(currentWidget.name);
	});
</script>
```

<style>
    blockquote {
  line-height: 22px;
  border-radius: 5px;
  display: block;
  margin-bottom: 0.8em;
  font-family: "黑体";
  background: rgba(230,162,60,.1) !important;
  border-color: #f56c6c;
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 85%;
  color: #000;
  padding-left: 1em;
}


blockquote p {
  padding-left: 3px; 
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 85%;
  color: #000;
}

blockquote code {
  background: rgba(230,162,60,.1) !important;
  font-weight: bold;
}
</style>