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

<script setup>
	import {
		inject
	} from "vue";
	const getMapInstance = inject("getMapInstance");
	jt3d = getMapInstance();
</script>

<template>
	<div id="main5">
		<div class="chushuikou">
			<div class="chushuikou1">
				<div class="chushuikou1-1">
					<label>区域</label>
					<label>水泵电流</label>
					<label>机井压力</label>
					<label>实时流量</label>
					<label>运行状态</label>
				</div>
			</div>
			<div class="chushuikou2">
				<div class="chushuikou2-1">
					<label>1号机井</label>
					<label style="color:'#ecec66';">200A</label>
					<label>150kpa</label>
					<label>80m³/h</label>
					<button @click="flyto(1)"
						style="background-color: rgb(40,170,230);width: 50rem;height: 20rem;color: #fff;font-size: 14rem;border: 0;font-weight:500;margin-top:-4rem ">正常</button>
				</div>
			</div>
			<div class="chushuikou3">
				<div class="chushuikou2-1">
					<label>2号机井</label>
					<label style="color:'#ecec66';">10A</label>
					<label>100kpa</label>
					<label>10m³/h</label>
					<button @click="flyto(2)"
						style="background-color:  rgb(238,80,80);width: 50rem;height: 20rem;color: #fff;font-size: 14rem;border: 0;font-weight:500; margin-top:-4rem">异常</button>
				</div>
			</div>
			<div class="chushuikou4">
				<div class="chushuikou2-1">
					<label>3号机井</label>
					<label style="color:'#ecec66';">200A</label>
					<label>150kpa</label>
					<label>80m³/h</label>
					<button @click="flyto(3)"
						style="background-color: rgb(40,170,230);width: 50rem;height: 20rem;color: #fff;font-size: 14rem;border: 0;font-weight:500; margin-top:-4rem">正常</button>
				</div>
			</div>
			<div class="chushuikou5">
				<div class="chushuikou2-1">
					<label>4号机井</label>
					<label style="color:'#ecec66';">200A</label>
					<label>150kpa</label>
					<label>80m³/h</label>
					<button @click="flyto(4)"
						style="background-color: rgb(40,170,230);width: 50rem;height: 20rem;color: #fff;font-size: 14rem;border: 0;font-weight:500; margin-top:-4rem">正常</button>
				</div>
			</div>
			<div class="chushuikou4">
				<div class="chushuikou2-1">
					<label>5号机井</label>
					<label style="color:'#ecec66';">200A</label>
					<label>150kpa</label>
					<label>80m³/h</label>
					<button @click="flyto(5)"
						style="background-color: rgb(40,170,230);width: 50rem;height: 20rem;color: #fff;font-size: 14rem;border: 0;font-weight:500; margin-top:-4rem">正常</button>
				</div>
			</div>
			<div class="chushuikou5">
				<div class="chushuikou2-1">
					<label>6号机井</label>
					<label style="color:'#ecec66';">200A</label>
					<label>150kpa</label>
					<label>80m³/h</label>
					<button @click="flyto(6)"
						style="background-color: rgb(40,170,230);width: 50rem;height: 20rem;color: #fff;font-size: 14rem;border: 0;font-weight:500;margin-top:-4rem ">正常</button>
				</div>
			</div>
			<div class="chushuikou4">
				<div class="chushuikou2-1">
					<label>7号机井</label>
					<label style="color:'#ecec66';">200A</label>
					<label>150kpa</label>
					<label>80m³/h</label>
					<button @click="flyto(7)"
						style="background-color: rgb(40,170,230);width: 50rem;height: 20rem;color: #fff;font-size: 14rem;border: 0;font-weight:500;margin-top:-4rem ">正常</button>
				</div>
			</div>
			<div class="chushuikou5">
				<div class="chushuikou2-1">
					<label>8号机井</label>
					<label style="color:'#ecec66';">20A</label>
					<label>10kpa</label>
					<label>10m³/h</label>
					<button @click="flyto(8)"
						style="background-color: rgb(238,80,80);width: 50rem;height: 20rem;color: #fff;font-size: 14rem;border: 0;font-weight:500;margin-top:-4rem ">异常</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	let jt3d = undefined;
	import map_xzqh_zj from '@/assets/dataFile/map_xzqh_zj.json';
	export default {
		data() {
			return {
				// viewersName: '', //视角标签名称
				// ImgurlList: [], //截图地址列表
				entity: '',
			}
		},
		methods: {
			flyto(num) {
				let terrainProvider = jt3d._viewer.terrainProvider;
				//异步函数
				let lon = 116.30
				let lat = 36.88
				let that = this
				return new Promise((resolve, reject) => {
					let promise = new Cesium.sampleTerrainMostDetailed(terrainProvider, [Cesium
						.Cartographic.fromDegrees(lon, lat)
					]);
					promise.then(function(updatedPositions) {
						if (that.entity) {
							jt3d._viewer.entities.remove(that.entity)
						}
						// if that.entity && jt3d._viewer.entities.remove(that.entity)
						console.log('高度', updatedPositions)
						let height = 1000

						that.entity = new Cesium.Entity({
							name: "add billboard",
							//位置
							position: Cesium.Cartesian3.fromDegrees(lon, lat, height),
							//图片标签
							billboard: {
								image: 'jt3dSDK/imgs/point/point.png',
								horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //水平
								verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直位置
								// scale: billboard.scale, //尺寸
								// pixelOffset: new Cesium.Cartesian2(0, billboard.pixelOffset),
								disableDepthTestDistance: Number.POSITIVE_INFINITY,
								scale: 1,
								scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1, 2400,
									0) //按距离缩放，即距离大于180米时，图标不显示  Cesium.NearFarScalar(near, nearValue, far, farValue)相机范围的下界。相机范围下界的值。相机范围的上限。该值位于摄像机范围的上界。
							}
						});
						jt3d._viewer.entities.add(that.entity, {
							range: 1000
						});
						jt3d.LocateUtil.flyToEntity(that.entity)
					})
					resolve(true)
				})
				// let lng = Number(114.22) + Number(num)
				// this.entity = new Cesium.Entity({
				// 	name: "add billboard",
				// 	//位置
				// 	position: Cesium.Cartesian3.fromDegrees(116.33, 37.66, 500),
				// 	//图片标签
				// 	billboard: {
				// 		image: 'jt3dSDK/imgs/point/point.png',
				// 		horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //水平
				// 		verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直位置
				// 		// scale: billboard.scale, //尺寸
				// 		// pixelOffset: new Cesium.Cartesian2(0, billboard.pixelOffset),
				// 		disableDepthTestDistance: Number.POSITIVE_INFINITY,
				// 		scale: 1,
				// 		scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1, 2400, 0) //按距离缩放，即距离大于180米时，图标不显示  Cesium.NearFarScalar(near, nearValue, far, farValue)相机范围的下界。相机范围下界的值。相机范围的上限。该值位于摄像机范围的上界。
				// 	}
				// });
				console.log('实体', this.entity)
				// jt3d._viewer.entities.add(this.entity, {
				// 	range: 1000
				// });
				
			}
		},
		mounted() {
			// jt3d.PolylineObject.drawPolylineByGeoJson(map_xzqh_zj, {
			// 	width: 5,
			// 	color: '#04FFFF',
			// 	isImageAlpha: true, //用图片自带颜色
			// 	duration: 3000,
			// 	imgUrl: "/jt3dSDK/imgs/polylinematerial/spriteline1.png"
			// });
		}
	}
</script>

<style lang="scss" scoped>
	#main5 {
		width: calc(100% - 20rem);
		height: calc(100% - 20rem);
		margin: 10rem;

		.chushuikou {
			width: 100%;
			height: 175rem;
			margin-top: 10rem;
			// margin-left: 5rem;
		}

		.chushuikou1 {
			width: 100%;
			height: 35rem;
			background-color: rgba(61, 198, 255, 0.4);
			display: flex;
			align-items: center;
		}

		.chushuikou1-1 {
			font-family: SimHei;
			font-size: 14rem;
			color: #C8daf5;
			width: 100%;
			height: 13rem;
			display: flex;
			justify-content: space-around;
			margin: auto;
		}

		.chushuikou2-1 {
			font-family: SimHei;
			font-size: 13rem;
			color: #C8daf5;
			width: 100%;
			height: 13rem;
			display: flex;
			justify-content: space-around;
			margin: auto;
			// margin-left: 30rem;
		}

		.chushuikou2-2 {
			font-family: SimHei;
			font-size: 13rem;
			color: #C8daf5;
			width: 100%;
			height: 13rem;
			display: flex;
			justify-content: space-between;
			margin: auto;
			// margin-left: 30rem;
		}

		.chushuikou2 {
			width: 100%;
			height: 35rem;
			display: flex;
			align-items: center;
		}

		.chushuikou3 {
			width: 100%;
			height: 35rem;
			background-color: rgba(0, 37, 98, 0.4);
			display: flex;
			align-items: center;
		}

		.chushuikou4 {
			width: 100%;
			height: 35rem;
			display: flex;
			align-items: center;
		}

		.chushuikou5 {
			width: 100%;
			height: 35rem;
			background-color: rgba(0, 37, 98, 0.4);
			display: flex;
			align-items: center;
		}

	}
</style>