---
title: 图层控制组件
date: 2023-07-17
---
[[toc]]

## 1. jt-layers-ztree 简介
- 用于图层控制的显隐，及复杂的业务逻辑

## 2.Warning 

::: warning 注意
- 获取底图与标注、地形数据的js接口写在Map3DMain.vue页面中，因为加载大球时需要加载默认底图等图层！！！
- 大部分数据需要从store内获取！详情参照CIM平台组件代码！
:::


## 3. jt-layers-ztree API
| 属性名   | 说明 |     类型 |    是否必须  |
| :----- | :-------: | :-------: | :-------: |
| viewer |  视图  | array |   是 |
| nodes |  组装数据的数据结构  | obj |   是 |
| expandedKeys |  展开的节点id集合  | arr |   是 |
| checkedkeys |  默认打开节点的id  | arr |   是 |
| queryMapTables |  配置可查询数据的表名集合  | arr |   是 |
| runtimeEnvironment |  运行环境(pc/app)  | string |   是 |

## 4. 代码示例
```
<template>
	<template v-if="isDataOnload">
		<jt-popup title="图层控制">
			<jt-layers-ztree :viewer="viewer" :nodes="nodes" :expandedKeys="expandedKeys" :checkedkeys="checkedkeys" :queryMapTables="queryMapTables" :runtimeEnvironment="runtimeEnvironment"></jt-layers-ztree>
		</jt-popup>
	</template>
</template>

<script setup>
	import {
		onMounted,
		onBeforeUnmount,
		ref,
		inject,
		computed
	} from "vue";

	import {
		useWidget
	} from "@/common/store/widget"
	const {
		disable,
		currentWidget
	} = useWidget();

	import store from '@/store/index';

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

	let expandedKeys = ref([]); //对应要展开的节点id
	let checkedkeys = ref([]); //默认打开节点的id
	let queryMapTables = ref([]); //查询表名
	let runtimeEnvironment = ref(""); //运行环境
	let isDataOnload = ref(false);

	const nodes = ref([])
	const tempDate = computed(() => store.map3dStore.layerData);

	onMounted(() => {

		var treeNodes = new Array();
		for (var i = 0; i < tempDate.value.length; i++) {

			var treeNode = {
				id: tempDate.value[i].id,
				pId: tempDate.value[i].parentid,
				name: "<font class='crui-map-layer-name'>" + tempDate.value[i].layername + "</font>",	
			
				// isHidden: tempDate.value[i].treenode.charAt(1) == "N", //是否显示节点
				open: tempDate.value[i].isexpand === "1", //节点默认是否展开
				nocheck: tempDate.value[i].ischeck != '1', //节点是否显示复选框
				checked: tempDate.value[i].isinit === '1', //节点是否勾选
				
				serviceId: tempDate.value[i].serviceId,//服务id
				loadtype: tempDate.value[i].loadtype,//服务类型
				parameterset:tempDate.value[i].parameterset,//服务加载参数
				querytable:tempDate.value[i].querytable,//查询表名
			};

			var node = $.extend({}, treeNode, tempDate.value[i]);
			
			treeNodes.push(node);
		}
		nodes.value = treeNodes;

		expandedKeys.value = store.map3dStore.expandedKeys; //对应要展开的节点id
		checkedkeys.value = store.map3dStore.checkedkeys; //默认打开节点的id
		queryMapTables.value = store.map3dStore.queryMapTables; //查询表名
		runtimeEnvironment.value = store.appStore.runtimeEnvironment; //运行环境
		isDataOnload.value = true;
		// console.log('默认展开的id', expandedKeys.value, checkedkeys.value,queryMapTables.value)
	});

	/**
	 * 即将销毁
	 */
	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>