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

---

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>