图层控制组件

• 1. jt-layers-ztree 简介
• 2.Warning
• 3. jt-layers-ztree API
• 4. 代码示例

1. jt-layers-ztree 简介

• 用于图层控制的显隐，及复杂的业务逻辑

2.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>