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

---

title: 工具栏组件

date: 2023-07-17

[[toc]]

1. jt-toolbars 简介

• 工具栏组件

2.Warning

::: warning 注意

• toolsData是工具栏配置项，需要从数据库获取并通过deepTree方法处理后传给toolbars组件
• 使用ref标记组件时，同时需要定义标记名称！具体可参考CIM平台工具栏组件写法！ :::

3. jt-toolbars API

属性名	说明	类型	是否必须
isDataOnload	控制工具栏显示隐藏	boolean	是
toolsData	工具栏配置项	array	是
toolsClick	工具单击事件	methods	是

4. 代码示例

<template>
	<transition enter-active-class="animate__animated animate__bounceInRight" leave-active-class="animate__animated animate__bounceOutRight">
		<jt-toolbars v-if="isDataOnload" :toolsData="toolsData" @toolsClick="handleClickTools" width='700rem'></jt-toolbars>
	</transition>
</template>

<script setup>
	/**
	 * element-plus组件
	 */
	import {
		ElMessage
	} from 'element-plus';

	import {
		onMounted,
		onBeforeUnmount,
		ref,
		inject
	} from "vue";

	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 = jtMap3d._viewer;

	import {
		useWidget
	} from "@/common/store/widget"
	const {
		activate,
		isActivate,
		disable,
		disableAll,
		currentWidget,
		updateWidget,
		getWidget
	} = useWidget();

	let isDataOnload = ref(false);
	const toolsData = ref([]);
	let locateUtilObj;

	onMounted(() => {
		//获取工具菜单
		getToolbars();
	});

	//工具单击事件
	const handleClickTools = (widget) => {
		if (widget === "fullMap") { //全图
			fullMap(store.map3dStore.center);
		} else if (widget === "rotateCamera") { //绕点自旋
			ElMessage.warning('在地图上单击进行自旋，再次单击停止自旋')
			setMapSpin();
		} else if (widget === "mapNorth") { //地图指北
			setMapNorth();
		} else if (widget === "clear") { //清除所有
			// disableAll(true);
		} 
		// else if (widget === "manage-layer") { //清除所有
		// 	activate("manage-layer-ztree");
		// } 
		else {
			activate(widget)
			if (widget === "map-compare") { //分屏对比
				if (!isActivate("manage-layer")) {
					activate("manage-layer");
				}
			}
		}
	}

	/**
	 * 全图-飞行到项目区域范围视角
	 */
	const fullMap = (options) => {

		// 初始化项目区域范围视角
		let optionsS = {
			west: options.west, //西
			south: options.south, //南
			east: options.east, //东
			north: options.north, //北
			isRemove: false, //定位完成后是否删除
			duration: 3, //飞行时间
			heading: 0,
			pitch: -90,
			range: 60000
		};

		let optionsE = {
			west: options.west, //西
			south: options.south, //南
			east: options.east, //东
			north: options.north, //北
			isRemove: true, //定位完成后是否删除
			duration: options.duration, //飞行时间
			heading: options.heading,
			pitch: options.pitch,
			range: options.range
		};

		if (!locateUtilObj) {
			locateUtilObj = new jtMap3dSDK.LocateUtil(viewer);
		}

		var fullMapPromise = locateUtilObj.fullMap(optionsS);
		fullMapPromise.then(function(flyPromise) {
			locateUtilObj.fullMap(optionsE);
		});
	}

	/**
	 * 地图绕点自旋
	 */
	const setMapSpin = () => {

		let SketchViewModel = new jtMap3dSDK.SketchViewModel(viewer, {
			isClear: true,
			isDrawPoint: false, //是否标记参考点
			isRetainDrawPoint: false, //绘制完成是否保留绘制点
			iconType: 'blue',
		});

		SketchViewModel.sketchTools('point', {
			onComplete(cPoint, gPoint) {
				if (!locateUtilObj) {
					locateUtilObj = new jtMap3dSDK.LocateUtil(viewer);
				}
				locateUtilObj.setMapSpinByPoint(cPoint, {
					// height: 100000
				});
			},
			onError(message) {}
		});
	}

	/**
	 * 地图指北
	 */
	const setMapNorth = () => {
		if (!locateUtilObj) {
			locateUtilObj = new jtMap3dSDK.LocateUtil(viewer);
		}
		locateUtilObj.setMapNorth();
	}

	//获取工具菜单并存储
	const getToolbars = () => {
		let sqlWhere = '"roleId"' + " = " + roleId + " "

		//存储用户权限id
		$http.get("/getTableList", {
			tableName: "sys_role_tool",
			sqlWhere: sqlWhere,
			orderByField: 'orderNum'
		}).then(res => {
			if (res.data.length > 0) {
				toolsData.value = deepTree(res.data);
				isDataOnload.value = true;
			}
		})
	}

</script>