JT-CIM-ZHNY/src/views/Map3d/components/drawEdit.vue

<script setup>
	/**
	 * element-plus组件
	 */
	import {
		ElMessage
	} from 'element-plus';
	import {
		inject
	} from "vue";
	import {
		ArrowLeft,
		ArrowRight,
		Delete,
		Edit,
		Share
	} from '@element-plus/icons-vue';
	const getMapInstance = inject("getMapInstance");
	jt3d = getMapInstance();
</script>

<template>
	<div class="jt-drawTool">
		<div style="margin-bottom: 0rem;">
			<el-select class="selectInfo" v-model="value" @change="handleClick" placeholder="请选择" style="width: 65%; margin-bottom: 10rem;margin-right: 10rem;">
				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
			</el-select>
			<el-button type="danger" :icon="Delete" style="margin-top: 8rem;width: 30%;" @click="removeAll()">清除</el-button>
		</div>
		<div v-show="value=='二维平面类'">
			<el-row :gutter="20" style="margin-left: 0rem; margin-right: 0rem">
				<el-col v-for="(item,index) in towDimension" :span="8" @click="createGraphics(item.drawType,index)">
					<el-avatar shape="circle" :size="70" :class="currentIndex===index?'selectStyle':'defaultStyle'">
						<i :class="[item.icon,currentIndex===index?'selectFontStyle':'']" />
					</el-avatar>
					<div style="margin-top: 5rem; font-size: 14rem;" :class="currentIndex===index?'selectFontStyle':''">{{item.label}}</div>
				</el-col>
			</el-row>
		</div>
		<div v-show="value=='三维立体类'">
			<el-row :gutter="20" style="margin-left: 0rem; margin-right: 0rem">
				<el-col v-for="(item,index) in threeDimension" :span="8" @click="createGraphics(item.drawType,index)">
					<el-avatar shape="circle" :size="70" :class="currentIndex===index?'selectStyle':'defaultStyle'">
						<i :class="[item.icon,currentIndex===index?'selectFontStyle':'']" />
					</el-avatar>
					<div style="margin-top: 5rem; font-size: 14rem;" :class="currentIndex===index?'selectFontStyle':''">{{item.label}}</div>
				</el-col>
			</el-row>
		</div>
		<div v-show="value=='军事标绘类'">
			<el-row :gutter="20" style="margin-left: 0rem; margin-right: 0rem">
				<el-col v-for="(item,index) in militaryPlotting" :span="8" @click="createMilitaryPlot(item.drawType,index)">
					<el-avatar shape="circle" :size="70" :class="currentIndex===index?'selectStyle':'defaultStyle'">
						<i :class="[item.icon,currentIndex===index?'selectFontStyle':'']" />
					</el-avatar>
					<div style="margin-top: 5rem; font-size: 14rem;" :class="currentIndex===index?'selectFontStyle':''">{{item.label}}</div>
				</el-col>
			</el-row>
		</div>

	</div>
</template>

<script>
	let jt3d = undefined;
	let tipEntity = undefined;
	export default {
		props: {},
		watch: {},
		/* 数据 */
		data() {
			return {
				currentIndex: -1,
				value: "二维平面类",
				options: [{
						value: '二维平面类',
						label: '二维平面类',
					},
					{
						value: '三维立体类',
						label: '三维立体类',
					},
					{
						value: '军事标绘类',
						label: '军事标绘类',
					},
				],
				towDimension: [{
						label: '贴地线',
						drawType: 'polyline',
						number: 0,
						icon: 'iconfont icon-svgtiedixian'
					},
					{
						label: '箭头线',
						drawType: 'arrowPolyline',
						number: 1,
						icon: 'iconfont icon-svgjiantouxian'
					},
					{
						label: '贴地面',
						drawType: 'polygon', //polygon
						number: 2,
						icon: 'iconfont icon-svgtiedimian'
					},
					{
						label: '动态线',
						drawType: 'dynamicPolyline',
						number: 3,
						icon: 'iconfont icon-svgliudongxian'
					},
					{
						label: '发光线',
						drawType: '发光线',
						number: 4,
						icon: 'iconfont icon-svgfaguangxian'
					},
					{
						label: '描边线',
						drawType: 'outlinePolyline',
						number: 5,
						icon: 'iconfont icon-svgmiaobianxian'
					},
					{
						label: '动态圆',
						drawType: 'dynamicCircle',
						number: 6,
						icon: 'iconfont icon-svgdongtaiyuan'
					},
					{
						label: '普通圆',
						drawType: 'circle',
						number: 7,
						icon: 'iconfont icon-svgputongyuan'
					},
					{
						label: '矩形',
						drawType: 'rectangle',
						number: 8,
						icon: 'iconfont icon-svgjuxing'
					},

				],
				threeDimension: [{
						label: '空间线',
						drawType: 'spatialLine',
						number: 0,
						icon: 'iconfont icon-svgkongjianxian'
					},
					{
						label: '动态墙',
						drawType: 'dynamicWall',
						number: 1,
						icon: 'iconfont icon-svgdongtaiqiang'
					},
					{
						label: '房屋',
						drawType: 'house',
						number: 2,
						icon: 'iconfont icon-svgfangwu'
					},
					{
						label: '文字',
						drawType: 'text',
						number: 3,
						icon: 'iconfont icon-svgzi'
					},
					{
						label: '视频墙',
						drawType: 'videoWall',
						number: 4,
						icon: 'iconfont icon-svgshipinqiang'
					},
					{
						label: '普通墙',
						drawType: 'normalWall',
						number: 5,
						icon: 'iconfont icon-svgputongqiang'
					},
				],
				militaryPlotting: [{
						label: '直线箭头',
						drawType: 'straightArrow',
						number: 1,
						icon: 'iconfont icon-zhijiantou'
					},
					{
						label: '攻击箭头',
						drawType: 'attackArrow',
						number: 2,
						icon: 'iconfont icon-tujifangxiang'
					},
					{
						label: '钳击箭头',
						drawType: 'pincerArrow',
						number: 3,
						icon: 'iconfont icon-qianji'
					}
				]
			}
		},

		/* 方法 */
		methods: {
			//清除全部
			removeAll() {
				jt3d.DrawToolsEdit.Clear()
				jt3d.DrawMilitaryPlot.clearAll()
				this.currentIndex = -1;

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

			//选择绘制类型
			//头部标题点击事件
			handleClick(val) {
				console.log(val)
				this.currentIndex = -1;
				this.value = val
			},

			//创建军事标会
			createMilitaryPlot(type, index) {
				let _self = this;
				this.currentIndex = index;

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

				/* 创建监听 */
				jt3d.DrawMilitaryPlot.onEditProperty = {};
				// 开始绘制
				jt3d.DrawMilitaryPlot.draw(type, {
					onComplete(cPoint, gPoint) {
						// _self.$parent.$parent.param = param;
						// _self.$parent.$parent.showDialog = true;
					}
				});
			},
			//创建二维标会和三维标会
			createGraphics(type, index) {
				let _self = this;
				this.currentIndex = index;

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

				/* 创建监听 */
				jt3d.DrawToolsEdit.onEditProperty = {};
				// 开始绘制
				jt3d.DrawToolsEdit.draw(type, {
					isEdit: true,
					onComplete(cPoint, gPoint) {

					},
					onError(message) {
						console.log('错误原因', message)
					}
				});
			}

		},
		mounted() {

		}
	};
</script>

<style lang="scss" scoped>
	.el-avatar{
		width: 70rem !important;
		height: 70rem !important;
		font-size: 14px !important;
		cursor: pointer;
	}
	// .el-popper{
	// 	padding: 5rem 11rem;
	// 	font-size: 12rem;
	// 	line-height: 20rem;
	// 	min-height: 10rem;
	// 	width: 322rem;
	// 	height: 311rem;
	// 	left: 15rem !important;
	// 	top: 175rem !important;
	// }
	
	::v-deep .el-scrollbar{
		background-color: gainsboro !important;
	}
	.el-select-dropdown__item{
		color: #409eff !important;
		padding: 0 32rem 0 20rem;
		height: 34rem;
		line-height: 34rem;
		font-size:14rem;
	}
	
	.jt-drawTool {
		--el-avatar-size: 70rem !important;


		.el-col {
			padding: 10rem;
			// color: rgba(90, 172, 255, 1.0);
			color: #fff;
		}

		i {
			display: inline-block;
			width: 100%;
			height: 36rem;
			line-height: 36rem;
			text-align: center;
			border-radius: 5rem;
			font-size: 40rem;
			// color: rgba(90, 172, 255, 1.0);
			color: #fff;
			transition: all .3s;
			-webkit-transition: all .3s
		}

		.selectStyle {
			// background: rgba(135, 182, 254, 0.5);
			background: rgb(0 44 126);
			--el-avatar-size: 70rem !important;
		}

		.defaultStyle {
			background: #ffffff00;
			--el-avatar-size: 70rem !important;
		}

		.selectFontStyle {
			color: #fff;
		}

		.el-button.is-text {
			background-color: rgba(255, 255, 255, 0.5);
		}

		el-option {
			margin-top: -15rem !important;
		}

		.iconactive {
			box-shadow: 0 0 3rem 3rem rgba(12, 123, 200, .6);
		}

		.active {
			color: #409eff
		}

		::v-deep .el-input__wrapper {
			background-color: rgba(255, 255, 255, 0);
			color: #fff;
		}

		::v-deep .el-input__inner {
			color: #fff;
		}

		.selectInfo {
			top: 10rem !important;
		}

		.el-select-dropdown__wrap {
			margin-top: 10rem;
		}

		.el-select-dropdown__item {
			background-color: rgba(255, 255, 255, 1) !important;

		}

		.el-select-dropdown__item:hover {
			background-color: rgba(255, 255, 235, 1) !important;
		}

	}
</style>