瀏覽代碼

添加点类绘制

DESKTOP-CRQ4N2U\jintian 2 年之前
父節點
當前提交
09bff8b2b0

二進制
public/jt3dSDK/gltf/pyramid.glb


二進制
public/jt3dSDK/gltf/pyramidA.glb


二進制
public/jt3dSDK/gltf/pyramidAA.glb


二進制
public/jt3dSDK/gltf/pyramidB.glb


二進制
public/jt3dSDK/gltf/pyramidJ.glb


二進制
public/jt3dSDK/gltf/xin.glb


文件差異過大導致無法顯示
+ 0 - 0
public/jt3dSDK/jt3d.es.js


+ 2 - 2
src/views/Map3d/Map3DMain.vue

@@ -164,8 +164,8 @@
 				<layer ref="refLayer"/>
 			</jt-popup>
 
-			<!--图上绘组件-->
-			<jt-popup title="图上绘" ref="refDialogEdit">
+			<!--图上绘组件-->
+			<jt-popup title="图上绘" ref="refDialogEdit">
 				<dialogEdit />
 			</jt-popup>
 

+ 87 - 10
src/views/Map3d/components/drawEdit.vue

@@ -57,7 +57,16 @@
 				</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 point" :span="8" @click="createDrawPoint(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>
 
@@ -73,6 +82,9 @@
 				currentIndex: -1,
 				value: "二维平面类",
 				options: [{
+						value: '点标绘类',
+						label: '点标绘类',
+					}, {
 						value: '二维平面类',
 						label: '二维平面类',
 					},
@@ -196,7 +208,43 @@
 						number: 3,
 						icon: 'iconfont icon-qianji'
 					}
-				]
+				],
+				point: [{
+						label: '小模型',
+						drawType: 'model',
+						number: 1,
+						icon: 'iconfont icon-jihedi'
+					}, {
+						label: '文字',
+						drawType: 'label',
+						number: 2,
+						icon: 'iconfont icon-jihedi'
+					},
+					{
+						label: '点',
+						drawType: 'point',
+						number: 3,
+						icon: 'iconfont icon-jihedi'
+					},
+					{
+						label: '点及文字',
+						drawType: 'point2Label',
+						number: 4,
+						icon: 'iconfont icon-jihedi'
+					},
+					{
+						label: '广告牌',
+						drawType: 'billboard',
+						number: 5,
+						icon: 'iconfont icon-jihedi'
+					},
+					{
+						label: '广告牌及文字',
+						drawType: 'billboard2Label',
+						number: 6,
+						icon: 'iconfont icon-jihedi'
+					}
+				],
 			}
 		},
 
@@ -204,8 +252,10 @@
 		methods: {
 			//清除全部
 			removeAll() {
-				jt3d.DrawToolsEdit.Clear()
-				jt3d.DrawMilitaryPlot.clearAll()
+				jt3d.DrawToolsEdit.Clear();
+				jt3d.DrawMilitaryPlot.clearAll();
+				jt3d.DrawPointEdit.clearAll();
+
 				this.currentIndex = -1;
 
 				//还原左键单击事件
@@ -240,6 +290,7 @@
 					}
 				});
 			},
+
 			//创建二维标会和三维标会
 			createGraphics(type, index) {
 				let _self = this;
@@ -262,6 +313,30 @@
 						console.log('错误原因', message)
 					}
 				});
+			},
+
+			//创建点类标绘
+			createDrawPoint(type, index) {
+				let _self = this;
+				this.currentIndex = index;
+
+				//移除左键单击事件
+				if (jt3d.handlerLeftClick) {
+					jt3d.handlerLeftClick.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
+				}
+
+				/* 创建监听 */
+				jt3d.DrawPointEdit.onEditProperty = {};
+				// 开始绘制
+				jt3d.DrawPointEdit.draw(type, {
+					isEdit: true,
+					onComplete(cPoint, gPoint) {
+
+					},
+					onError(message) {
+						console.log('错误原因', message)
+					}
+				});
 			}
 
 		},
@@ -272,12 +347,13 @@
 </script>
 
 <style lang="scss" scoped>
-	.el-avatar{
+	.el-avatar {
 		width: 70rem !important;
 		height: 70rem !important;
 		font-size: 14px !important;
 		cursor: pointer;
 	}
+
 	// .el-popper{
 	// 	padding: 5rem 11rem;
 	// 	font-size: 12rem;
@@ -288,18 +364,19 @@
 	// 	left: 15rem !important;
 	// 	top: 175rem !important;
 	// }
-	
-	::v-deep .el-scrollbar{
+
+	::v-deep .el-scrollbar {
 		background-color: gainsboro !important;
 	}
-	.el-select-dropdown__item{
+
+	.el-select-dropdown__item {
 		color: #409eff !important;
 		padding: 0 32rem 0 20rem;
 		height: 34rem;
 		line-height: 34rem;
-		font-size:14rem;
+		font-size: 14rem;
 	}
-	
+
 	.jt-drawTool {
 		--el-avatar-size: 70rem !important;
 

+ 2 - 1
src/views/Map3d/components/map.vue

@@ -199,6 +199,7 @@
 					iconType: 'blue',
 				});
 				jt3d.DrawMilitaryPlot = new this.jt3dSDK.DrawMilitaryPlot(jt3d._viewer);
+				jt3d.DrawPointEdit = new this.jt3dSDK.DrawPoint(jt3d._viewer);
 
 				jt3d.LocateUtil = new this.jt3dSDK.LocateUtil(jt3d._viewer);
 
@@ -270,7 +271,7 @@
 					pitch: -90,
 					range: 115000
 				};
-				
+
 				let optionsE = {
 					west: 121.563298,
 					south: 37.284514,

+ 1 - 1
src/views/Map3d/components/toolbars.vue

@@ -69,7 +69,7 @@
 			<template #dropdown>
 				<span slot="slot" class="text"></span>
 				<el-dropdown-menu>
-					<el-dropdown-item command="DialogEdit"><i class="iconfont minsize icon-dituhuizhi"></i>绘制功能</el-dropdown-item>
+					<el-dropdown-item command="DialogEdit"><i class="iconfont minsize icon-dituhuizhi"></i>图上标绘</el-dropdown-item>
 					<el-dropdown-item command="navigate"><i class="iconfont icon-zhijiantou"></i>地区导航</el-dropdown-item>
 					<el-dropdown-item command="viewerlabel"><i class="iconfont minsize icon-fushi"></i>视角标签</el-dropdown-item>
 					<el-dropdown-item v-if="store.userport=='PC'" command="printmap"><i class="iconfont maxsize icon-svgdayin"></i>打印地图</el-dropdown-item>

部分文件因文件數量過多而無法顯示