---
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>
```

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