JT-CIM/src/views/Map3d/components/mapNavigate.vue

<script setup>
	import {
		ref
	} from 'vue';
	import {
		inject
	} from "vue";
	import selshi from '@/assets/images/selshi.png';
	import selcun from '@/assets/images/selcun.png';
	import cun from '@/assets/images/cun.png';
	import shi from '@/assets/images/shi.png';
	import xian from '@/assets/images/xian.png';
	import selxian from '@/assets/images/selxian.png';
	const getMapInstance = inject("getMapInstance");
	jt3d = getMapInstance();
</script>

<template>
	<div class="tabs">
		<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
			<i v-for="(item,index) in cityList">
				<el-tab-pane :name="item.number">
					<template #label>
						<span class="custom-tabs-label">
							<img v-if="index==0" :src="isindex==0?selshi:shi">
							<img v-if="index==1" :src="isindex==1?selxian:xian">
							<img v-if="index==2" :src="isindex==2?selcun:cun">
							<span>{{item.label}}</span>
						</span>
					</template>
					<template #default>
						<div class="content">
							<div :class="dj == 1?'item':'item2'" v-for="(res,num) in ALLlist" @click="selectCity(res.label,index+1,res.regioncode,res.dj)">
								<div :class="addcolor(num)" @click="currentidx(num)">
									<span>{{res.label}}</span>
								</div>
							</div>
						</div>
					</template>
				</el-tab-pane>
			</i>
		</el-tabs>
	</div>
	<div class="Ficons">
		<!-- <span>遮罩</span> -->
		<!-- <el-icon color="#ffffff" class="icons" @click="hide" :size="20">
			<View v-show="!hideicon" />
			<Hide v-show="hideicon" />
		</el-icon> -->
	</div>
</template>

<script>
	let jt3d = undefined;
	let entities = undefined;
	export default {
		data() {
			return {
				currentIndex: -1,
				isindex: 0, //判断选中第几个标题
				cityList: [{
					label: '牟平',
					number: 0,
					dj: 1
				}], //tab数组展示列表
				activeName: 0, //选中的下标牵引
				ALLlist: [], //所有子集城市
				downlist: [], //村集
				dj: 1, //控制列表样式
				entities: undefined,
				hideicon: false, //控制遮罩层显示
				acolor: true, //是否展示颜色
			}
		},
		watch: {
			//改变高度值
			activeName() {
				this.acolor = false
			}
		},
		methods: {
			currentidx(index) {
				this.currentIndex = index
				this.acolor = true
			},

			//添加颜色样式
			addcolor(index) {
				if (this.currentIndex == index) {
					return {
						active: this.acolor
					}
				}
			},

			/**
			 *控制遮罩层
			 */
			hide() {
				this.hideicon = !this.hideicon
				if (this.hideicon) {
					entities[0].polygon.material = Cesium.Color.fromBytes(50, 160, 255, 1)
				} else {
					entities[0].polygon.material = Cesium.Color.fromBytes(50, 160, 255, 77)
				}
			},
			/**
			 * 移除定位样式
			 */
			remove() {
				if (window["viewer"].dataSources.getByName('标绘区')) {
					window["viewer"].dataSources.remove(window["viewer"].dataSources.getByName('标绘区')[0])
				}
			},

			//头部标题点击事件
			handleClick(data) {
				let index = Number(data.index)
				//判断点击的是否是第一个标题
				if (index == 0) {
					this.getcityList()
					this.cityList = this.cityList.slice(0, index + 1)
					this.isindex = index
					this.activeName = index

					//全图事件
					this.$parent.$parent.$refs.refMap3d.fullMap(jt3d);
				}
			},

			/* 
			 *** label  城镇村庄名字
			 * * index  选中下标
			 * * regioncode  编号
			 * * dj  村镇等级
			 */
			selectCity(label, index, regioncode, dj) {
				let _this = this

				if (!regioncode) {
					return
				}

				//如果等级为1，代表点击的乡镇，需要重新设置ALLlist为村庄列表，并在头部添加乡镇名称
				if (dj == 1) {
					this.cityList.push({
						label: label,
						number: index,
						dj: 2
					})
					var id = regioncode.slice(0, 9)
					this.isindex = index
					this.activeName = index
					this.$http.get('/getTableList', {
						tableName: 'map_region', //
						sqlWhere: "dj = 2 and regioncode like '" + id + "%'",
						orderByField: ''
					}).then(res => {
						if(res.data.length == 0) return
						this.dj = 2
						this.ALLlist = []
						res.data.forEach(
							item => {
								this.ALLlist.push({
									label: item.regionname,
									regioncode: item.regioncode,
									dj: item.dj
								})
							}
						)
					})
				}

				//根据等级与id获取乡镇或者村庄的面坐标
				this.$http.get('/getGeoJson', {
					tableName: 'map_region', //
					sqlWhere: "dj = " + dj + " and regioncode like '" + regioncode + "%'",
					orderByField: ''
				}).then(res => {
					if (window["viewer"].dataSources.getByName('标绘区')) {
						window["viewer"].dataSources.remove(window["viewer"].dataSources.getByName('标绘区')[0])
					}
					let promise = Cesium.GeoJsonDataSource.load(res.data, {
						clampToGround: true
					});
					promise.then((dataSource) => {
						window["viewer"].dataSources.add(dataSource); // 加载这个geojson资源 
						dataSource.name = '标绘区'
						entities = dataSource.entities.values;
						const entity = entities[0];
						entity.polygon.material = Cesium.Color.fromBytes(50, 160, 255, 77)
						entity.polygon.outlineWidth = 3;
						entity.polygon.outline = false;
						entity.polygon.outlineColor = Cesium.Color.RED;
						entity.polyline = {
							positions: entity.polygon.hierarchy._value.positions,
							width: entity.polygon.outlineWidth,
							material: Cesium.Color.fromBytes(0, 255, 180, 255),
							clampToGround: true
						}

						_this.hideicon = false;

						let options = {};
						// 初始化参数默认值
						options.duration = Cesium.defaultValue(options.duration, 2);
						options.heading = Cesium.defaultValue(options.heading, 0);
						options.pitch = Cesium.defaultValue(options.pitch, -60);
						options.range = Cesium.defaultValue(options.range, 0.0);

						let colorList = [
							[90, 120, 255, 153],
							[150, 255, 90, 153],
							[255, 150, 50, 153],
							[50, 160, 255, 77]
						]

						let flyPromise = window["viewer"].flyTo(entities, {
							duration: options.duration,
							offset: {
								heading: Cesium.Math.toRadians(options.heading),
								pitch: Cesium.Math.toRadians(options.pitch),
								range: options.range
							}
						});
						flyPromise.then(res => {
							let isremove = true

							//面首次加载颜色
							const entity = entities[0];
							entity.polygon.material = Cesium.Color.fromBytes(colorList[0][0],
								colorList[0][1], colorList[0][2], colorList[0][3])

							let idx = 1
							let timer = setInterval(res => {
								const entity = entities[0];
								entity.polygon.material = Cesium.Color.fromBytes(
									colorList[idx][0], colorList[idx][1],
									colorList[idx][2], colorList[idx][3])
								idx++
							}, 500)
							setTimeout(res => {
								clearInterval(timer)
								
								_this.hide();
								
							}, 2100)
						})
					});
				})

			},

			getcityList() {
				this.dj = 1
				this.ALLlist = []
				this.$http.get('/getTableList', {
					tableName: 'map_region',
					sqlWhere: 'dj = 1',
					orderByField: ''
				}).then(res => {
					if(res.data.length == 0) return
					res.data.forEach(
						item => {
							console.log('城镇信息', item)
							this.ALLlist.push({
								label: item.regionname,
								regioncode: item.regioncode,
								dj: item.dj
							})
						}
					)
				})

			}
		},
		mounted() {
			this.getcityList()
		}
	}
</script>

<style lang="scss" scoped>
	.Ficons {
		position: absolute;
		top: 10rem;
		left: 20rem;
	}

	.active {
		color: #409eff;
	}

	//整体样式
	.tabs {
		width: 90%;
		margin-left: 5%;
		text-align: left;

		--el-font-size-base: 16rem;

		.item {
			// width: 135rem;
			width: 80rem;
			display: inline-block;
			height: 42rem;
			margin-right: 15rem;
			color: #ffffff;
			font-size: 16rem;
			cursor: pointer;
			white-space: nowrap;
			/*显示的行数；如果要设置2行加...则设置为2*/
			overflow: hidden;
			/*超出的文本隐藏*/
			text-overflow: ellipsis;
			/* 溢出用省略号*/

			font-style: normal;
		}

		.item2 {
			width: 65rem;
			display: inline-block;
			height: 35rem;
			margin-right: 10rem;
			color: #ffffff;
			font-size: 16rem;
			cursor: pointer;
			white-space: nowrap;
			/*显示的行数；如果要设置2行加...则设置为2*/
			overflow: hidden;
			/*超出的文本隐藏*/
			text-overflow: ellipsis;
			/* 溢出用省略号*/

			font-style: normal;
		}

		.content {
			width: 100%;
			margin: 10rem 0;
			overflow-y: auto;
		}

		img {
			width: 18rem;
			height: 18rem;
			vertical-align: -10%;
			margin-right: 2rem;
		}
	}



	.demo-tabs>.el-tabs__content {
		padding: 32rem;
		color: #6b778c;
		font-size: 32rem;
		font-weight: 600;
	}

	//未选择tabs标题样式
	::v-deep .el-tabs__item {
		color: #ffffff !important;
	}

	//选中tabs标签样式
	::v-deep .el-tabs__item.is-active {
		color: var(--el-color-primary) !important;
	}

	//选中下划线样式
	::v-deep .el-tabs__active-bar {
		bottom: -1rem !important;
		height: 4rem !important;
	}

	//下横线样式
	::v-deep .el-tabs__nav-wrap::after {
		height: 1rem !important;
		background-color: darkgrey;
	}
</style>