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

<script setup>
	/**
	 * element-plus组件
	 */
	import {
		ElMessage
	} from 'element-plus';

	import {
		inject
	} from "vue";

	const getMapInstance = inject("getMapInstance");
	jt3d = getMapInstance();
</script>
<template>
	<div class="jt-coordsTool">
		<el-collapse v-model="activeName" accordion>
			<el-collapse-item name="坐标定位">
				<template #title>
					<i class='iconfont icon-dituzuobiao' />坐标定位
				</template>
				<div class="el-collapse-item__content">
					<div style="line-height: 2em; table-layout: fixed; word-wrap: break-word; word-break: normal; text-align:justify; text-justify: inter-ideograph;color: #ffffff60;">
						提示: 填写格式：x1,y1,z1;x2,y2,z2;x3,y3,z3;......;标点符号必须采用英文半角。
					</div>
					<el-form label-width="80rem">
						<el-form-item label="定位类型:">
							<el-radio-group v-model="position.locationType">
								<el-radio label="point">点</el-radio>
								<el-radio label="polyline">线</el-radio>
								<el-radio label="polygon">多边形</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-form>
					<el-input v-model="position.locationCoords" type="textarea" :autosize="{ minRows: 6, maxRows: 6 }" />
					<div class="jt-btn" style="margin-top: 10rem;">
						<el-button color="rgb(20 136 255)" @click="Position">坐标定位</el-button>
						<el-button color="rgb(255 100 100)" @click="empty"><span style="color: #fff;">清除定位</span></el-button>
					</div>
				</div>
			</el-collapse-item>
			<el-collapse-item name="坐标拾取">
				<template #title>
					<i class='iconfont icon-chaxunzuobiaozhi' />坐标拾取
				</template>
				<div class="el-collapse-item__content">
					<div style="line-height: 2em; table-layout: fixed; word-wrap: break-word; word-break: normal; text-align:justify; text-justify: inter-ideograph;color: #ffffff60;">
						提示:点击【坐标拾取】按钮，在地图上点击获取坐标。
					</div>
					<el-input v-model="pickCoords" type="textarea" :autosize="{ minRows: 6, maxRows: 6 }" />
					<div class="jt-btn" style="margin-top: 10rem;">
						<el-button color="rgb(20 136 255)" @click="pickUp">坐标拾取</el-button>
						<el-button color="rgb(20 136 255)" @click="undo">撤销</el-button>
						<el-button color="rgb(255 100 100)" @click="empty"><span style="color: #fff;">清空</span></el-button>
					</div>
				</div>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>
<script>
	let jt3d = undefined;

	export default {
		props: {

		},
		watch: {
			pickCoordsLable: function(val) {
				this.setPickCoordsLable(val);
			},

		},

		/* 数据 */
		data() {
			return {
				activeName: "坐标定位",

				position: {
					locationType: "point", //定位类型
					locationCoords: "", //定位坐标
				},

				pickCoords: "", //坐标拾取
				pickCoordsArray: [],
				pickCoordsLable: 1,

				pointEntities: []
			}
		},

		/* 方法 */
		methods: {
			/**
			 * 设置点的lable
			 */
			setPickCoordsLable(val) {
				jt3d.CommonTools._sketchViewModel._lineLabel = val.toString();
			},

			/**
			 * 坐标拾取
			 */
			pickUp() {
				let _self = this;

				//移除左键单击事件
				if (jt3d.handlerLeftClick) {
					jt3d.handlerLeftClick.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
				}

				jt3d.CommonTools._sketchViewModel._lineLabel = _self.pickCoordsLable.toString();
				jt3d.CommonTools._sketchViewModel.sketchTools('point', {
					onComplete(cPoint, gPoint) {
						_self.pickCoordsArray.push(gPoint.lng.toFixed(6) + ',' + gPoint.lat.toFixed(6) + ',' + gPoint.height.toFixed(2)) + ";";
						_self.pickCoords = _self.pickCoordsArray.join(";\n");
						_self.pickCoordsLable++;

						//还原左键单击事件
						_self.$parent.$parent.$refs.refMap3d.clickEntity(jt3d);
					},
					onError(message) {
						
					}
				});
			},

			/**
			 * 坐标拾取 - 撤销
			 */
			undo() {
				this.pickCoordsArray.pop();
				this.pickCoords = this.pickCoordsArray.join(";\n");
				this.pickCoordsLable--;

				//移除最后一个元素
				let lastPointEntity = jt3d.CommonTools._sketchViewModel._pointEntitys[jt3d.CommonTools._sketchViewModel._pointEntitys.length - 1];
				jt3d._entities.remove(lastPointEntity);
				jt3d.CommonTools._sketchViewModel._pointEntitys.pop();
			},

			/**
			 * 坐标拾取 - 清空
			 */
			empty() {
				this.pickCoords = "";
				this.pickCoordsArray = [];
				this.pickCoordsLable = 1;
				jt3d.CommonTools._sketchViewModel.sketchClear();
				jt3d.CommonTools._sketchViewModel._clearEvent();
				jt3d.CommonTools._sketchViewModel._clearEvent(jt3d.CommonTools._sketchViewModel._sketchEventHandler);

				this.position.locationCoords = "";
				jt3d._viewer.entities.remove(jt3d.LocateUtil._locationEntity);

				for (let i = 0; i < this.pointEntities.length; i++) {
					jt3d._viewer.entities.remove(this.pointEntities[i]);
				}
				this.pointEntities = []; //脏数据,存储entities
			},

			/**
			 * 坐标定位
			 */
			Position() {
				let _self = this;

				let endstring = _self.position.locationCoords.substring(_self.position.locationCoords.length - 1);
				if (endstring != ";") {
					ElMessage("最后一位请用;结束！");
					return false;
				}

				let coords = _self.position.locationCoords.substr(0, _self.position.locationCoords.length - 1);
				let coordArray = coords.split(';');
				let pointArray = [];
				coordArray.forEach((coordinate, index) => {
					let xyArray = coordinate.split(',');
					if (xyArray.length != 2 && xyArray.length != 3) {
						ElMessage("坐标不是成对出现，请检查！");
						throw Error(); //forEach()本身无法跳出循环，所以，这里使用了抛异常的方法来终止它。
					} else {
						let longitude = xyArray[0];
						let latitude = xyArray[1];

						if (xyArray[2]) {
							let height = xyArray[2];
							let point = [Number(longitude), Number(latitude), Number(height)];

							pointArray.push(point);
							//点标记
							jt3d.CommonTools._sketchViewModel._lineLabel = (index + 1).toString();
							jt3d.CommonTools._sketchViewModel.sketchDrawFeacture(point, 'drawPoint');

							if (index === (coordArray.length - 1)) {
								loc();
							}
						} else {

							let terrainAltitude = _self.jt3dSDK.common.getHeigthByPointsMostDetailed(jt3d._viewer, [
								[Number(longitude), Number(latitude)]
							]);
							terrainAltitude.then(function(updatedPositions) {
								let point = [Number(longitude), Number(latitude), Number(updatedPositions[0].height)];
								pointArray.push(point);
								//点标记
								jt3d.CommonTools._sketchViewModel._lineLabel = (index + 1).toString();
								jt3d.CommonTools._sketchViewModel.sketchDrawFeacture(point, 'drawPoint');

								if (index === (coordArray.length - 1)) {
									loc();
								}
							});
						}
					}
				});

				function loc() {
					switch (_self.position.locationType) {
						case "point":
							if (coordArray.length === 1) {

								let point = jt3d.PointObject.generatePoint(
									pointArray[0]
								);
								point.then(function(entity) {
									_self.flyToEntity(entity);
								});
							} else {
								let line = jt3d.PolylineObject.drawSpecifyColorLine(pointArray, {
									color: [255, 0, 0, 0]
								});
								line.then(function(entity) {
									_self.flyToEntity(entity);
								});
							}
							break;
						case "polyline":
							let line = jt3d.PolylineObject.drawSpecifyColorLine(pointArray, {
								color: [255, 255, 0, 0.8]
							});
							line.then(function(entity) {
								_self.flyToEntity(entity);
							});

							break;
						case "polygon":
							let polygon = jt3d.PolygonObject.generatePolygonByPoints(pointArray, {
								color: [255, 255, 0, 0.8]
							});
							polygon.then(function(entity) {
								_self.flyToEntity(entity);
							});
							break;
					}

				}

			},

			flyToEntity(entity) {
				let flyToEntity = jt3d.LocateUtil.flyToEntity(entity, {
					duration: 3,
					heading: 200,
					pitch: -80,
					range: 1000
				});
				flyToEntity.then(function(entity) {
					if (entity.point) {
						jt3d._viewer.entities.remove(entity);
					}
				});
			},
		},

		mounted() {

		}
	};
</script>

<style lang="scss" scoped>
	.el-radio-group {
		height: 32rem;
		line-height: 32rem;
		flex-wrap: nowrap;
	}

	::v-deep .el-radio__label {
		font-size: 14rem !important;
		padding-left: 8rem !important;
	}

	.jt-coordsTool {
		position: relative;

		.iconfont {
			padding: 0 10rem;
		}

		.el-collapse {
			--el-collapse-border-color: rgb(0 44 126 / 0%);

			--el-collapse-header-text-color: #ffffff;
			--el-collapse-header-font-size: 13rem;
			--el-collapse-content-bg-color: rgb(0 44 126 / 0%);
			--el-collapse-content-font-size: 13rem;
			--el-collapse-content-text-color: rgb(216 240 255);

			--el-collapse-header-height: 40rem;
			--el-collapse-header-bg-color: rgb(30 130 255);

			--el-fill-color-blank: rgb(0 44 126 / 68%);
			--el-text-color-regular: rgb(216 240 255);
			--el-border-color: rgb(35 135 255);

			.el-collapse-item__content {
				padding: 10rem;
				// padding-bottom: 0rem;
			}
		}
	}

	::v-deep .el-collapse-item__content {
		padding: 10rem;
		// padding-bottom: 0rem;
		overflow-y: hidden;
	}

	::v-deep .el-collapse-item__header {
		background: url(@/assets/images/bg_collapse_title.png) no-repeat;
		background-size: 350rem 40rem;
		// background-color: rgb(22 90 190);
		// background-color: rgb(5 45 100 /60%);
		background-color: rgb(30 130 255);
		border-bottom: 0;
	}

	::v-deep .el-form-item {
		margin-bottom: 10rem;
	}

	::v-deep .el-radio {
		margin-right: 10rem;
	}
</style>