---
title: 区域导航组件
date: 2023-07-18
---
[[toc]]

## 1. jt-locationRegion 简介
- 用于多级区域定位，支持多级联动

## 2.Warning 

::: warning 注意
- 头部标题切换时，需要注意contentList的改变!
- 使用ref标记组件时，同时需要定义标记名称！具体可参考CIM平台区域导航组件写法！
:::


## 3. jt-locationRegion API
| 属性名   | 说明 |     类型 |    是否必须  |
| :----- | :-------: | :-------: | :-------: |
| viewer |  从jtMap3d实例获取视图  | obj |   是 |
| editTabs |  头部tabs  | array |   是 |
| contentList |  内容展示，市县镇列表  | array |   是 |
| activeName |  默认选中的tab  | num |   是 |


## 4. jt-locationRegion methods API
| 方法名   | 说明 |     类型 |    是否必须  |
| :----- | :-------: | :-------: | :-------: |
| addTabs |  添加头部tab对象，传入值obj对象，用于请求数据  | methods |   是 |
| changeTabs |  头部标题点击事件  | methods |   是 |


## 5. 代码示例
```
<template>
	<jt-popup title="区域导航">
		<jt-locationRegion ref="locationregionRef" :viewer="viewer" :editTabs="editTabs" :contentList="contentList" :activeName="activeName" @addTabs="addTab" @changeTabs="changeTabs"></jt-locationRegion>
	</jt-popup>
</template>

<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 getMapInstance = inject("getMapInstance");
	let jtMap3d = getMapInstance();
	let viewer = jtMap3d._viewer;

	//定义属性
	let locateUtilObj;
	const editTabs = ref([{
		title: '牟平',
		name: 0,
	}])
	const contentList = ref([]); //内容
	const activeName = ref(0); //目前选中-tab

	let tabIndex = 0;

	//定义子组件实例，名称要和上面的ref相同
	const locationregionRef = ref(null)

	onMounted(() => {
		initTabContent({
			tableName: 'map_region', //表名
			sqlWhere: "dj = 1", //查询条件
			orderByField: '' //排序字段
		});
	});

	/**
	 * 初始化内容
	 * @param {Object} options
	 */
	function initTabContent(options) {
		getTabContent(options).then(res => {
			tabIndex++;
			contentList.value = []
			res.map(item => {

				item.title = item.regionname;
				item.name = tabIndex;

				contentList.value.push(item)
			})
		});
	}


	/**
	 * 添加tab
	 */
	function addTab(item) {
		
		//定位
		getGeoJson({
			tableName: 'map_region', //
			sqlWhere: "dj = " + item.dj + " and regioncode like '" + item.regioncode + "%'",
			orderByField: ''
		}).then(res => {
			locationregionRef.value.locHighlight(res)
		});

		let tabIndex = 0
		if (item.dj === 1) {

			tabIndex++;
			const newTabName = tabIndex;
			editTabs.value.push({
				title: item.regionname,
				name: newTabName,
			})
			activeName.value = newTabName

			//内容
			getTabContent({
				tableName: 'map_region', //表名
				sqlWhere: "dj = 2 and regioncode like '" + item.regioncode.slice(0, 9) + "%'", //查询条件
				orderByField: '' //排序字段
			}).then(res => {
				tabIndex++;
				contentList.value = []
				res.map(item => {

					item.title = item.regionname;
					item.name = tabIndex;

					contentList.value.push(item)
				})
			});
		}
	}

	//头部标题点击事件
	function changeTabs() {
		initTabContent({
			tableName: 'map_region', //表名
			sqlWhere: "dj = 1", //查询条件
			orderByField: '' //排序字段
		});

		editTabs.value = editTabs.value.slice(0, 1)
		activeName.value = 0;

		//全图事件
		fullMap(store.map3dStore.center);

	}

	/**
	 * 全图-飞行到项目区域范围视角
	 */
	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);
		});
	}

	/**
	 * 调用查询地图坐标接口
	 * @param {Object} options
	 */
	function getGeoJson(options) {
		return new Promise((resolve, reject) => {
			$http.get('/getGeoJson', options).then(res => {
				if (res.success) {
					resolve(res.data)
				}
			});
		});
	}

	/**
	 * 调用数据查询接口
	 * @param {Object} options
	 */
	function getTabContent(options) {

		return new Promise((resolve, reject) => {
			$http.get('/getTableList', options).then(res => {
				if (res.data.length > 0) {
					resolve(res.data)
				}
			});
		});
	}

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