JT-CIM-API/docs/theme-reco/jtmapcompare.md

---

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>