jtBaseApp/src/pages/tab-cmap.vue

<template>
	<CrMap ref="cmap"></CrMap>
	<view class="cr-tools-left">
		<ToolButton v-for="(item, index) in leftTools" :id="item.id" :title="item.title" :describe="item.describe" :icon="item.icon" @onclick="onToolsClick" />
	</view>
	<view class="cr-tools-right">
		<ToolButton v-for="(item, index) in rightTools" :id="item.id" :title="item.title" :describe="item.describe" :icon="item.icon" @onclick="onToolsClick" />
	</view>
	<van-popup v-model:show="showRightPopup" position="right" :style="{ width: '300px', height: 'calc(100% - 51px)', top: 'calc(50% - 25px)' }" :overlay="showOverlay">
		<div class="cr-popup-content">
			<div class="cr-poput-nav" @click="showRightPopup = false">
				<span class="cr-poput-nav-title">{{ poputNavTitle }}</span>
			</div>
			<div class="cr-popup-child-content">
				<div class="cr-color-label">R分量 {{ color.red }}</div>
				<van-slider v-model="color.red" :min="0" :max="255" bar-height="4px" active-color="#ee0a24">
					<template #button>
						<div class="jt-slider-button"></div>
					</template>
				</van-slider>
				<div class="cr-color-label">G分量 {{ color.green }}</div>
				<van-slider v-model="color.green" :min="0" :max="255" bar-height="4px" active-color="#ee0a24">
					<template #button>
						<div class="jt-slider-button"></div>
					</template>
				</van-slider>
				<div class="cr-color-label">B分量 {{ color.blue }}</div>
				<van-slider v-model="color.blue" :min="0" :max="255" bar-height="4px" active-color="#ee0a24">
					<template #button>
						<div class="jt-slider-button"></div>
					</template>
				</van-slider>
				<div class="cr-color-label">A分量 {{ color.alpha / 10 }}</div>
				<van-slider v-model="color.alpha" :min="0" :max="10" bar-height="4px" active-color="#ee0a24">
					<template #button>
						<div class="jt-slider-button"></div>
					</template>
				</van-slider>
				<van-field v-model="height" type="digit" label="高度" />
				<div class="cr-edit-buttons">
					<van-button type="success" @click="submitEdit()">提交修改</van-button>
					<van-button type="danger" @click="remove()">删除实体</van-button>
				</div>
			</div>
		</div>
	</van-popup>
	<jtDialog class="jt-tools-dialog" :showDialog="showDialog" title="图形编辑" height="500px" width="300px" @closeJTDialog="closeDialog">
		<el-row :gutter="20">
			<el-col :span="8" @click="this.$refs['cmap'].onMouseDrawEditLine()">
				<el-avatar shape="circle" :size="50" style="background-color: bisque;"><i class="app-icon app-icon-map-measurelength" /></el-avatar>
				<cite>绘制贴地线</cite>
			</el-col>
			<el-col :span="8" @click="this.$refs['cmap'].onMouseDrawEditPolygon()">
				<el-avatar shape="circle" :size="50" style="background-color: azure;"><i class="app-icon app-icon-map-measurelength" /></el-avatar>
				<cite>绘制贴地面</cite>
			</el-col>
			<el-col :span="8">
				<el-avatar shape="circle" :size="50" style="background-color: bisque;"><i class="app-icon app-icon-map-measurelength" /></el-avatar>
				<cite>绘制空间线</cite>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="8" @click="this.$refs['cmap'].onMouseDrawEditRectangle()">
				<el-avatar shape="circle" :size="50" style="background-color: bisque;"><i class="app-icon app-icon-map-measurelength" /></el-avatar>
				<cite>绘制矩形</cite>
			</el-col>
			<el-col :span="8" @click="this.$refs['cmap'].onMouseDrawEditCircle()">
				<el-avatar shape="circle" :size="50" style="background-color: azure;"><i class="app-icon app-icon-map-measurelength" /></el-avatar>
				<cite>绘制圆</cite>
			</el-col>
			<el-col :span="8" @click="this.$refs['cmap'].onMouseDrawEditWall()">
				<el-avatar shape="circle" :size="50" style="background-color: bisque;"><i class="app-icon app-icon-map-measurelength" /></el-avatar>
				<cite>绘制墙</cite>
			</el-col>
		</el-row>

		<el-row :gutter="20">
			<el-col :span="8">
				<el-avatar shape="circle" :size="50" style="background-color: bisque;"><i class="app-icon app-icon-map-measurelength" /></el-avatar>
				<cite>不规则体</cite>
			</el-col>
			<el-col :span="8">
				<el-avatar shape="circle" :size="50" style="background-color: azure;"><i class="app-icon app-icon-map-measurelength" /></el-avatar>
				<cite>绘制圆</cite>
			</el-col>
			<el-col :span="8" @click="this.$refs['cmap'].onClearDraw()">
				<el-avatar shape="circle" :size="50" style="background-color: bisque;"><i class="app-icon app-icon-map-clean" /></el-avatar>
				<cite>清除绘制</cite>
			</el-col>
		</el-row>
	</jtDialog>

	<!-- 墙的编辑框 -->
	<jtWallDialog></jtWallDialog>
</template>
<script setup>
import { Dialog } from 'vant';
/* 引入弹出对话框 */
import jtDialog from '../components/jt-dialog/dialog.vue';
/* 引入墙的编辑对话框 */
import jtWallDialog from '../components/jt-dialog/dialog-wall-edit.vue';
</script>
<script>
/* 引入三维地图控件 */
import CrMap from '../components/CrMap/CrMap.vue';
import { ref } from 'vue';
/* 引入工具按钮 */
import ToolButtom from '../components/ToolButton/ToolButton.vue';
export default {
	components: {
		CrMap
	},
	/* 返回数据 */
	data() {
		return {
			leftTools: [],
			rightTools: [],
			showRightPopup: false,
			showOverlay: false,
			poputNavTitle: '物体样式调整',
			color: {
				red: 0,
				green: 100,
				blue: 255,
				alpha: 6
			},
			height: 120,
			dialogVisible: false,
			showDialog: false
		};
	},
	/* 创建 */
	created() {
		/* 工具标题初始化 */
		this.leftTools.push({
			title: '长度量测',
			describe: '在地图上点击需要测量对象的特征位置,即可实时计算长度并展示',
			icon: 'app-icon-map-measurelength',
			id: 'length'
		});
		this.leftTools.push({
			title: '面积量测',
			describe: '在地图上点击需要测量的对象特征位置,即可实时计算面积并展示',
			icon: 'app-icon-map-measurearea',
			id: 'area'
		});
		this.leftTools.push({
			title: '高度测量',
			describe: '在地图上点击需要测量的对象特征位置,即可实时计算高度并展示',
			icon: 'app-icon-map-measureheight',
			id: 'height'
		});
		this.leftTools.push({
			title: '空间测量',
			describe: '在地图上点击需要测量的对象特征位置,即可实时计算空间距离并展示',
			icon: 'app-icon-map-measurespace',
			id: 'space'
		});
		this.leftTools.push({
			title: '三角测量',
			describe: '在地图上点击需要测量对象的特征位置,即可实时计算长度并展示',
			icon: 'app-icon-map-measuretriangle',
			id: 'triangle'
		});
		this.leftTools.push({
			title: '绘制房屋',
			describe: '在地图上单击绘制底部，右键结束绘制拉伸',
			icon: 'app-icon-map-house',
			id: 'house'
		});
		this.leftTools.push({
			title: '重置地图',
			describe: '点击即可重置地图范围为初始显示范围',
			icon: 'app-icon-map-initlocation',
			id: 'initMapExtent'
		});
		this.leftTools.push({
			title: '坐标查询',
			describe: '在地图上需要查询坐标的位置上点击,即可查询该位置的地理坐标',
			icon: 'app-icon-map-querycoord',
			id: 'coordQuery'
		});
		this.leftTools.push({
			title: '坐标定位',
			describe: '点击后,弹出坐标输入框,输入正确的位置坐标后点击定位,即可在地图上展示坐标位置',
			icon: 'app-icon-map-inputcoord-location',
			id: 'inputLocation'
		});
		this.leftTools.push({
			title: '相机视角',
			describe: '点击后,弹出坐标输入框,输入正确的位置坐标后点击定位,即可在地图上展示坐标位置',
			icon: 'app-icon-map-camera-view',
			id: 'cameraView'
		});
		this.leftTools.push({
			title: '物体拾取',
			describe: '点击后,在地图上的实体上单击，即可拾取该实体',
			icon: 'app-icon-map-pick',
			id: 'pick'
		});

		this.rightTools.push({
			title: '图层管理',
			describe: '点击即可打开图层控制窗口,进行图层及标注的显示/隐藏',
			icon: 'app-icon-map-layer',
			id: 'layerControl'
		});
		this.rightTools.push({
			title: '点击查询',
			describe: '点击后，在需要查询的位置单击，即可查询该位置的全部可见图层数据',
			icon: 'app-icon-map-query-point',
			id: 'queryByPoint'
		});
		this.rightTools.push({
			title: '多点查询',
			describe: '点击后，在需要查询的位置单击，即可查询该位置的全部可见图层数据',
			icon: 'app-icon-map-query-multiple-point',
			id: 'queryByMultiplePoint'
		});
		this.rightTools.push({
			title: '线查询',
			describe: '点击后，在需要查询的位置单击，即可查询该位置的全部可见图层数据',
			icon: 'app-icon-map-query-point',
			id: 'queryByLine'
		});
		this.rightTools.push({
			title: '圆查询',
			describe: '点击后，在需要查询的位置单击，即可查询该位置的全部可见图层数据',
			icon: 'app-icon-map-query-point',
			id: 'queryByCircle'
		});
		this.rightTools.push({
			title: '矩形查询',
			describe: '点击后，在需要查询的位置单击，即可查询该位置的全部可见图层数据',
			icon: 'app-icon-map-query-point',
			id: 'queryByRectangle'
		});
		this.rightTools.push({
			title: '区域查询',
			describe: '点击后，在地图上绘制查询区域，单击开始查询，即可查询该区域内的全部可见图层数据',
			icon: 'app-icon-map-query-polygon',
			id: 'queryByPolygon'
		});
		this.rightTools.push({
			title: '清扫工具',
			describe: '清除地图上的各类绘制内容',
			icon: 'app-icon-map-clean',
			id: 'clear'
		});
	},

	methods: {
		/**
		 * 工具点击事件
		 * @param {String} toolsId 工具Id
		 */
		onToolsClick(toolsId) {
			let _self = this;
			switch (toolsId) {
				case 'length':
					_self.$refs['cmap'].onMeasureLength();
					break;
				case 'area':
					_self.$refs['cmap'].onMeasureArea();
					break;
				case 'height':
					_self.$refs['cmap'].onMeasureHeight();
					break;
				case 'space':
					_self.$refs['cmap'].onMeasureSpatialLength();
					break;
				case 'triangle':
					_self.$refs['cmap'].onMeasureTriangle();
					break;
				case 'clear':
					_self.$refs['cmap'].onClear();
					break;
				case 'queryByPolygon':
					_self.$refs['cmap'].onQueryByPolygon();
					break;
				case 'queryByPoint':
					_self.$refs['cmap'].onQueryByPoint();
					break;
				case 'queryByMultiplePoint':
					_self.$refs['cmap'].onQueryByMultiplePoint();
					break;
				case 'queryByLine':
					_self.$refs['cmap'].onQueryByLine();
					break;
				case 'queryByCircle':
					_self.$refs['cmap'].onQueryByCircle();
					break;
				case 'queryByRectangle':
					_self.$refs['cmap'].onQueryByRectangle();
					break;
				case 'layerControl':
					// _self.$refs['cmap'].onTestDemo();
					this.showDialog = true;
					break;
				case 'cameraView':
					_self.$refs['cmap'].onGetCameraViewer();
					break;
				case 'house':
					_self.$refs['cmap'].onDrawPolygonBody();
					break;
				case 'pick':
					_self.$refs['cmap'].onPickPolygonBody(function(res) {
						if (res != undefined) {
							_self.showRightPopup = true;
							_self.color.red = res.color[0];
							_self.color.green = res.color[1];
							_self.color.blue = res.color[2];
							_self.color.alpha = res.color[3] * 10;
							_self.height = res.height;
						}
					});
					break;
				case 'inputLocation':
					// this.showRightPopup = true;
					let points = [118.163976, 35.01653, 118.164976, 35.01453, 118.162976, 35.01453];
					_self.$refs['cmap'].onDrawFeacture(points);
					break;
				default:
					// Dialog.alert({
					// 	title: '点击了',
					// 	message: toolsId
					// });
					this.dialogVisible = true;
					break;
			}
		},

		/**
		 * 提交更改
		 */
		submitEdit() {
			let _self = this;
			let color = [];
			color.push(this.color.red);
			color.push(this.color.green);
			color.push(this.color.blue);
			color.push(this.color.alpha / 10);
			this.$refs['cmap'].onSetPolygonBody({
				color: color,
				height: parseFloat(_self.height),
				onComplete: function(message) {
					if (message == undefined) _self.showRightPopup = false;
					else console.log('设置错误', message);
				}
			});
		},

		/**
		 * 移除
		 */
		remove() {
			let _self = this;
			this.$refs['cmap'].onRemovePolygonBody(function(message) {
				if (message == undefined) _self.showRightPopup = false;
				else console.log('移除错误', message);
			});
		},

		closeDialog() {
			this.showDialog = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.cr-color-label {
	padding-left: 15px;
	height: 30px;
	line-height: 30px;
	color: rgb(144, 225, 255);
	font-weight: bold;
	text-align: left;
	background-color: rgb(29, 99, 248);
}

/* 弹框子内容容器样式 */
.cr-popup-content .cr-popup-child-content {
	padding: 10px;
	display: flex;
	flex-direction: column;
	width: calc(100% - 20px);
}

/* 弹出框 主要内容 子内容子项通用样式 */
.cr-popup-content .cr-popup-child-content > * {
	margin: 10px 0px;
	font-family: 'Alimama_ShuHeiTi_Bold' !important;
}

/* 临时设置帧率位置 */
.cesium-performanceDisplay-defaultContainer {
	top: unset;
	bottom: 80px;
	right: unset;
	left: 10px;
}

.jt-slider-button {
	width: 20px;
	height: 18px;
	color: rgb(202, 94, 92);
	font-size: 10px;
	line-height: 18px;
	text-align: center;
	background-color: rgb(202, 94, 92);
	border-radius: 100px;
}

.van-slider {
	margin: 10px !important;
	width: calc(100% - 20px) !important;
}

.cr-edit-buttons {
	display: flex;
	flex-direction: row;
}

.cr-edit-buttons > * {
	flex: 1;
	margin-left: 8px !important;
	height: 34px !important;
}

.cr-edit-buttons > :first-child {
	margin-left: 0px !important;
}

/* 工具框样式 */
.jt-tools-dialog {
	.el-col {
		padding: 10px;
	}

	.el-col:hover {
		cursor: pointer;
		background-color: rgba(0, 0, 0, 0.5);
	}

	i {
		display: inline-block;
		width: 100%;
		height: 36px;
		line-height: 36px;
		text-align: center;
		border-radius: 5px;
		font-size: 30px;
		color: rgba(252, 152, 0, 1);
		transition: all 0.3s;
		-webkit-transition: all 0.3s;
	}

	cite {
		position: relative;
		top: 5px;
		display: block;
		color: rgba(255, 255, 255, 1);
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		font-size: 14px;
		font-style: normal;
		text-align: center;
		font-family: 'Alimama_ShuHeiTi_Bold';
	}
}
</style>