增加墙的绘制、编辑和着色器初步

src/assets/jt-element.css

@@ -18,4 +18,12 @@
 .el-dialog .el-dialog__header .el-dialog__title {
 	color: rgba(255, 255, 255, 1.0);
 	font-family: 'Alimama_ShuHeiTi_Bold';
+}
+
+.el-row {
+	margin-bottom: 10px;
+}
+
+.el-row:last-child {
+	margin-bottom: 0px;
 }

src/components/CrMap/CrMap.vue

@@ -1,293 +1,353 @@
-<template>
-	<div id="cesiumContainer" class="jt-map"></div>
-</template>
-<script setup>
-import { defineExpose, onMounted, getCurrentInstance } from 'vue';
-/* 注册方法 */
-// const emit = defineEmits(['onMeasureLength']);
-import { CrMap } from './CrMap.js';
-import CommonTools from './CommonTools.js';
-import { point } from '@turf/turf';
-const { proxy } = getCurrentInstance();
-/* 组件对外提供的方法 */
-defineExpose({
-	/* 长度测量方法 */
-	onMeasureLength: function() {
-		proxy.commonTools.measureLength();
-	},
-	/* 面积测量方法 */
-	onMeasureArea: function() {
-		proxy.commonTools.measureArea();
-	},
-	/* 测量高度方法 */
-	onMeasureHeight: function() {
-		proxy.commonTools.measureHeight();
-	},
-	/* 空间测距 */
-	onMeasureSpatialLength: function() {
-		proxy.commonTools.measureSpatialLength();
-	},
-	/* 三角测量 */
-	onMeasureTriangle: function() {
-		proxy.commonTools.measureTriangle();
-	},
-	/* 清理资源 */
-	onClear: function() {
-		proxy.commonTools.clear();
-	},
-	/* 区域查询 */
-	onQueryByPolygon: function() {
-		proxy.commonTools.queryByPolygon(function(res) {
-			console.log('坐标串', res);
-		});
-	},
-	/* 点查询 */
-	onQueryByPoint: function() {
-		proxy.commonTools.queryByPoint(function(res) {
-			console.log('坐标串', res);
-		});
-	},
-	/* 多点查询 */
-	onQueryByMultiplePoint: function() {
-		proxy.commonTools.queryByMultiplePoint(function(res) {
-			console.log('坐标数组', res);
-		});
-	},
-	/**
-	 * 线查询
-	 */
-	onQueryByLine: function() {
-		proxy.commonTools.queryByLine(function(res) {
-			console.log('坐标串', res);
-		});
-	},
-	/**
-	 * 圆查询
-	 */
-	onQueryByCircle: function() {
-		proxy.commonTools.queryByCircle(function(center, radius) {
-			console.log('中心点及半径', center, radius);
-		});
-	},
-	/**
-	 * 矩形查询
-	 */
-	onQueryByRectangle: function() {
-		proxy.commonTools.queryByRectangle(function(res) {
-			console.log('坐标串', res);
-		});
-	},
-
-	/* 绘制体 */
-	onDrawPolygonBody: function() {
-		proxy.commonTools.drawPolygonBody(function() {});
-	},
-
-	/* 拾取物体 */
-	onPickPolygonBody: function(callComplete) {
-		proxy.commonTools.pickPolygonBody(function(res) {
-			if (res != undefined) callComplete(res);
-		});
-	},
-
-	/**
-	 * 设置拾取的体对象样式及高度
-	 * @@param {JSON} options 配置项
-	 * @param {Array<Number>} options.color 颜色[0~~255,0~255,0~255,0~1]
-	 * @param {Number} options.height 高度
-	 * @param {Function} options.onComplete(message) 完成回调,如果message为undefined则代表成功，否则为失败消息
-	 */
-	onSetPolygonBody: function(options) {
-		proxy.commonTools.setPolygonBody({
-			color: options.color,
-			height: options.height,
-			onComplete: options.onComplete
-		});
-	},
-
-	/**
-	 * 移除拾取的体对象
-	 * @param {Function} onComplete(message) 完成回调，message为undifined为成功，否则为失败消息
-	 */
-	onRemovePolygonBody: function(onComplete) {
-		proxy.commonTools.removePolygonBody(onComplete);
-	},
-
-	/* 测试工具 */
-	onTestDemo: function() {
-		let cameraViewer = {
-			lng: 118.22480916041573,
-			lat: 35.140818266338854,
-			alt: 164.9208475038474,
-			pitch: -40.80823993511622,
-			heading: 1.717840652315993,
-			roll: 359.9998582097622
-		};
-
-		proxy.CMapApi.cameraFlyToo(cameraViewer);
-
-		proxy.commonTools.testDemo();
-	},
-	/**
-	 * 获取相机视角
-	 */
-	onGetCameraViewer: function() {
-		let param = proxy.CMapApi.getCameraViewParams();
-		console.log('相机视角', JSON.stringify(param));
-	},
-
-	/**
-	 * 绘制要素
-	 * @param {Array<Number>} points 经纬度点集合
-	 */
-	onDrawFeacture: function(points) {
-		proxy.commonTools.drawPolygonFeacture(points);
-	}
-});
-/* 初始化 */
-onMounted(() => {
-	let _self = proxy;
-	proxy.CMapApi = new CrMap({
-		selector: 'cesiumContainer',
-		sourcePath: './resource/'
-	});
-
-	/* 创建工具集 */
-	proxy.commonTools = new CommonTools(proxy.CMapApi.getViewer(), {
-		isClear: false
-	});
-
-	/* 添加暗夜版图层 */
-	proxy.CMapApi.addLayer({
-		layId: 'mapbox',
-		layName: '暗夜版底图',
-		layType: CrMap.LayerType.mapboxLayer,
-		isShow: true,
-		config: {}
-	});
-
-	/* 添加实景地图 */
-	proxy.CMapApi.addLayer({
-		layId: 'yt3d',
-		layName: '烟台实景',
-		layType: CrMap.LayerType.tilesetsLayer,
-		isShow: true,
-		config: {
-			url: ['http://218.59.194.82:13080/crdata/sdly/crtiles/tileset.json', 'http://218.59.194.82:13080/crdata/sdyt/crtile/zxc/1tiles/tileset1.json']
-		}
-	});
-
-	/* 添加实景地图 */
-	proxy.CMapApi.addLayer({
-		layId: 'qp3d01',
-		layName: '牟平三维',
-		layType: CrMap.LayerType.tilesetsLayer,
-		isShow: true,
-		config: {
-			url: ['http://218.59.194.82:13480/ytmp/3dtiles/shijing/1/tileset1.json'],
-			offsetHeight: 10
-		}
-	});
-
-	// /* 添加实景地图 */
-	// proxy.CMapApi.addLayer({
-	// 	layId: 'lsq3d',
-	// 	layName: '兰山区实景',
-	// 	layType: CrMap.LayerType.tilesetsLayer,
-	// 	isShow: true,
-	// 	config: {
-	// 		url: [
-	// 			'http://218.59.194.82:13080/crdata/sdly/crtiles/tileset.json',
-	// 			'http://218.59.194.82:13080/crdata/lyls/tiles/tileset.json',
-	// 			'http://218.59.194.82:13080/crdata/lyls/3Dtiles/tileset.json'
-	// 		]
-	// 	}
-	// });
-
-	//http://10.88.77.134/lyls/3Dtiles/tileset.json
-	// 'http://218.59.194.82:13080/crdata/sdly/crtiles/tileset.json',
-	// 'http://218.59.194.82:13080/crdata/lyls/tiles/tileset.json',
-	// 'http://218.59.194.82:13080/crdata/lyls/3Dtiles/tileset.json'
-
-	/* 添加影像图 */
-	// proxy.CMapApi.addLayer({
-	// 	layId: 'yxt',
-	// 	layName: '影像图',
-	// 	layType: CrMap.LayerType.wmtsLayer,
-	// 	isShow: true,
-	// 	config: {
-	// 		url: 'http://218.59.194.74:6080/arcgis/rest/services/LYLSQ_YX_102100_202112/MapServer/WMTS'
-	// 	}
-	// });
-
-	/* 添加模版影像地图 */
-	proxy.CMapApi.addLayer({
-		layId: 'mpYxt',
-		layName: '牟平影像图',
-		layType: CrMap.LayerType.templateLayer,
-		isShow: true,
-		config: {
-			url: 'http://202.102.167.52:16282/geoserver/gwc/service/tms/1.0.0/ytmp%3Atdt@EPSG%3A900913@png/{z}/{x}/{reverseY}.png',
-			minimumLevel: 0,
-			maximumLevel: 18
-		}
-	});
-
-	/* 进入中国位置 */
-	proxy.CMapApi.setMapRange({
-		lng: 103.84, //经度
-		lat: 31.15, // 维度
-		alt: 24000000, // 高度
-		heading: 0, //偏航
-		pitch: -90, //俯仰，人如果在赤道上空，俯仰角为0可见地球。如果在北纬，俯仰角为负才能见地球
-		roll: 0.0 //翻滚
-	});
-
-	/* 飞行到指定位置 */
-	proxy.CMapApi.flyToRectangle({
-		// strLng: 118.22087954757484,
-		// strLat: 35.14124100849915,
-		// endLng: 118.22865486061352,
-		// endLat: 35.14589687229257,
-		strLng: 118.05,
-		strLat: 34.953,
-		endLng: 118.53,
-		endLat: 35.434,
-		success: function() {
-			/* 设置地形*/
-			_self.CMapApi.setTerrain({
-				// url: 'http://218.59.194.82:13080/crdata/shandong/dem'
-				// url: 'http://202.102.167.52:16381/crdata/dem'
-				// url: 'https://www.supermapol.com/realspace/services/3D-stk_terrain/rest/realspace/datas/info/data/path'
-				url: 'http://218.59.194.82:13480/sddem/dem/'
-			});
-			/* 初始化显示图层 */
-			_self.CMapApi.showInit();
-		}
-	});
-
-	/* 查询ArcGIS服务试试 */
-	proxy.CMapApi.queryAGServerExtent(
-		'http://218.59.194.82:6080/arcgis/rest/services/LSQZRZY_RE_WEB_V1/MapServer',
-		'0',
-		function(res) {
-			console.log(JSON.stringify(res));
-		},
-		function(err) {
-			console.log('查询范围错误', err);
-		}
-	);
-});
-</script>
-<style scoped>
-.jt-map {
-	position: relative;
-	top: 0px;
-	width: 100%;
-	height: 100%;
-	margin: 0;
-	padding: 0;
-	overflow: hidden;
-	background-color: blue;
-}
+<template>
+	<div id="cesiumContainer" class="jt-map"></div>
+</template>
+<script setup>
+import { defineExpose, onMounted, getCurrentInstance } from 'vue';
+/* 注册方法 */
+// const emit = defineEmits(['onMeasureLength']);
+import { CrMap } from './CrMap.js';
+import CommonTools from './CommonTools.js';
+import { SketchViewModel } from './SketchViewModel.js';
+import { point } from '@turf/turf';
+const { proxy } = getCurrentInstance();
+/* 组件对外提供的方法 */
+defineExpose({
+	/* 长度测量方法 */
+	onMeasureLength: function() {
+		proxy.commonTools.measureLength();
+	},
+	/* 面积测量方法 */
+	onMeasureArea: function() {
+		proxy.commonTools.measureArea();
+	},
+	/* 测量高度方法 */
+	onMeasureHeight: function() {
+		proxy.commonTools.measureHeight();
+	},
+	/* 空间测距 */
+	onMeasureSpatialLength: function() {
+		proxy.commonTools.measureSpatialLength();
+	},
+	/* 三角测量 */
+	onMeasureTriangle: function() {
+		proxy.commonTools.measureTriangle();
+	},
+	/* 清理资源 */
+	onClear: function() {
+		proxy.commonTools.clear();
+	},
+	/* 区域查询 */
+	onQueryByPolygon: function() {
+		proxy.commonTools.queryByPolygon(function(res) {
+			console.log('坐标串', res);
+		});
+	},
+	/* 点查询 */
+	onQueryByPoint: function() {
+		proxy.commonTools.queryByPoint(function(res) {
+			console.log('坐标串', res);
+		});
+	},
+	/* 多点查询 */
+	onQueryByMultiplePoint: function() {
+		proxy.commonTools.queryByMultiplePoint(function(res) {
+			console.log('坐标数组', res);
+		});
+	},
+	/**
+	 * 线查询
+	 */
+	onQueryByLine: function() {
+		proxy.commonTools.queryByLine(function(res) {
+			console.log('坐标串', res);
+		});
+	},
+	/**
+	 * 圆查询
+	 */
+	onQueryByCircle: function() {
+		proxy.commonTools.queryByCircle(function(center, radius) {
+			console.log('中心点及半径', center, radius);
+		});
+	},
+	/**
+	 * 矩形查询
+	 */
+	onQueryByRectangle: function() {
+		proxy.commonTools.queryByRectangle(function(res) {
+			console.log('坐标串', res);
+		});
+	},
+
+	/* 绘制体 */
+	onDrawPolygonBody: function() {
+		proxy.commonTools.drawPolygonBody(function() {});
+	},
+
+	/* 拾取物体 */
+	onPickPolygonBody: function(callComplete) {
+		proxy.commonTools.pickPolygonBody(function(res) {
+			if (res != undefined) callComplete(res);
+		});
+	},
+
+	/**
+	 * 设置拾取的体对象样式及高度
+	 * @@param {JSON} options 配置项
+	 * @param {Array<Number>} options.color 颜色[0~~255,0~255,0~255,0~1]
+	 * @param {Number} options.height 高度
+	 * @param {Function} options.onComplete(message) 完成回调,如果message为undefined则代表成功，否则为失败消息
+	 */
+	onSetPolygonBody: function(options) {
+		proxy.commonTools.setPolygonBody({
+			color: options.color,
+			height: options.height,
+			onComplete: options.onComplete
+		});
+	},
+
+	/**
+	 * 移除拾取的体对象
+	 * @param {Function} onComplete(message) 完成回调，message为undifined为成功，否则为失败消息
+	 */
+	onRemovePolygonBody: function(onComplete) {
+		proxy.commonTools.removePolygonBody(onComplete);
+	},
+
+	/* 测试工具 */
+	onTestDemo: function() {
+		let cameraViewer = {
+			lng: 118.22480916041573,
+			lat: 35.140818266338854,
+			alt: 164.9208475038474,
+			pitch: -40.80823993511622,
+			heading: 1.717840652315993,
+			roll: 359.9998582097622
+		};
+
+		proxy.CMapApi.cameraFlyToo(cameraViewer);
+
+		proxy.commonTools.testDemo();
+	},
+	/**
+	 * 获取相机视角
+	 */
+	onGetCameraViewer: function() {
+		let param = proxy.CMapApi.getCameraViewParams();
+		console.log('相机视角', JSON.stringify(param));
+	},
+
+	/**
+	 * 绘制要素
+	 * @param {Array<Number>} points 经纬度点集合
+	 */
+	onDrawFeacture: function(points) {
+		proxy.commonTools.drawPolygonFeacture(points);
+	},
+
+	/**
+	 * 清除绘制内容
+	 */
+	onClearDraw: function() {
+		proxy.sketchViewModel.sketchClear();
+	},
+
+	/**
+	 * 鼠标点击绘制可编辑贴地线
+	 */
+	onMouseDrawEditLine: function() {
+		proxy.sketchViewModel.sketchTools(SketchViewModel.SketchType.Line, {
+			isEdit: true
+		});
+	},
+
+	/**
+	 * 鼠标点击绘制可编辑贴地面
+	 */
+	onMouseDrawEditPolygon: function() {
+		proxy.sketchViewModel.sketchTools(SketchViewModel.SketchType.Polygon, {
+			isEdit: true
+		});
+	},
+
+	/**
+	 * 鼠标点击绘制可编辑矩形
+	 */
+	onMouseDrawEditRectangle: function() {
+		proxy.sketchViewModel.sketchTools(SketchViewModel.SketchType.Rectangle, {
+			isEdit: true
+		});
+	},
+
+	/**
+	 * 鼠标点击绘制可编辑圆
+	 */
+	onMouseDrawEditCircle: function() {
+		proxy.sketchViewModel.sketchTools(SketchViewModel.SketchType.Circle, {
+			isEdit: true
+		});
+	},
+
+	/**
+	 * 鼠标点击绘制可编辑墙
+	 */
+	onMouseDrawEditWall: function() {
+		proxy.sketchViewModel.sketchTools(SketchViewModel.SketchType.Wall, {
+			isEdit: true
+		});
+	}
+});
+/* 初始化 */
+onMounted(() => {
+	let _self = proxy;
+	proxy.CMapApi = new CrMap({
+		selector: 'cesiumContainer',
+		sourcePath: './resource/'
+	});
+
+	/* 创建工具集 */
+	proxy.commonTools = new CommonTools(proxy.CMapApi.getViewer(), {
+		isClear: false
+	});
+
+	/* 创建绘制类工具 */
+	proxy.sketchViewModel = new SketchViewModel(proxy.CMapApi.getViewer(), {
+		iconType: SketchViewModel.SketchIconType.Blue,
+		isDrawPoint: true,
+		isRetainDrawPoint: true
+	});
+
+	/* 添加暗夜版图层 */
+	proxy.CMapApi.addLayer({
+		layId: 'mapbox',
+		layName: '暗夜版底图',
+		layType: CrMap.LayerType.mapboxLayer,
+		isShow: true,
+		config: {}
+	});
+
+	/* 添加实景地图 */
+	proxy.CMapApi.addLayer({
+		layId: 'yt3d',
+		layName: '烟台实景',
+		layType: CrMap.LayerType.tilesetsLayer,
+		isShow: true,
+		config: {
+			url: ['http://218.59.194.82:13080/crdata/sdly/crtiles/tileset.json', 'http://218.59.194.82:13080/crdata/sdyt/crtile/zxc/1tiles/tileset1.json']
+		}
+	});
+
+	/* 添加实景地图 */
+	proxy.CMapApi.addLayer({
+		layId: 'qp3d01',
+		layName: '牟平三维',
+		layType: CrMap.LayerType.tilesetsLayer,
+		isShow: true,
+		config: {
+			url: ['http://218.59.194.82:13480/ytmp/3dtiles/shijing/1/tileset1.json'],
+			offsetHeight: 10
+		}
+	});
+
+	// /* 添加实景地图 */
+	// proxy.CMapApi.addLayer({
+	// 	layId: 'lsq3d',
+	// 	layName: '兰山区实景',
+	// 	layType: CrMap.LayerType.tilesetsLayer,
+	// 	isShow: true,
+	// 	config: {
+	// 		url: [
+	// 			'http://218.59.194.82:13080/crdata/sdly/crtiles/tileset.json',
+	// 			'http://218.59.194.82:13080/crdata/lyls/tiles/tileset.json',
+	// 			'http://218.59.194.82:13080/crdata/lyls/3Dtiles/tileset.json'
+	// 		]
+	// 	}
+	// });
+
+	//http://10.88.77.134/lyls/3Dtiles/tileset.json
+	// 'http://218.59.194.82:13080/crdata/sdly/crtiles/tileset.json',
+	// 'http://218.59.194.82:13080/crdata/lyls/tiles/tileset.json',
+	// 'http://218.59.194.82:13080/crdata/lyls/3Dtiles/tileset.json'
+
+	/* 添加影像图 */
+	// proxy.CMapApi.addLayer({
+	// 	layId: 'yxt',
+	// 	layName: '影像图',
+	// 	layType: CrMap.LayerType.wmtsLayer,
+	// 	isShow: true,
+	// 	config: {
+	// 		url: 'http://218.59.194.74:6080/arcgis/rest/services/LYLSQ_YX_102100_202112/MapServer/WMTS'
+	// 	}
+	// });
+
+	/* 添加模版影像地图 */
+	proxy.CMapApi.addLayer({
+		layId: 'mpYxt',
+		layName: '牟平影像图',
+		layType: CrMap.LayerType.templateLayer,
+		isShow: true,
+		config: {
+			url: 'http://202.102.167.52:16282/geoserver/gwc/service/tms/1.0.0/ytmp%3Atdt@EPSG%3A900913@png/{z}/{x}/{reverseY}.png',
+			minimumLevel: 0,
+			maximumLevel: 18
+		}
+	});
+
+	/* 进入中国位置 */
+	proxy.CMapApi.setMapRange({
+		lng: 103.84, //经度
+		lat: 31.15, // 维度
+		alt: 24000000, // 高度
+		heading: 0, //偏航
+		pitch: -90, //俯仰，人如果在赤道上空，俯仰角为0可见地球。如果在北纬，俯仰角为负才能见地球
+		roll: 0.0 //翻滚
+	});
+
+	/* 飞行到指定位置 */
+	proxy.CMapApi.flyToRectangle({
+		// strLng: 118.22087954757484,
+		// strLat: 35.14124100849915,
+		// endLng: 118.22865486061352,
+		// endLat: 35.14589687229257,
+		strLng: 118.05,
+		strLat: 34.953,
+		endLng: 118.53,
+		endLat: 35.434,
+		success: function() {
+			/* 设置地形*/
+			_self.CMapApi.setTerrain({
+				// url: 'http://218.59.194.82:13080/crdata/shandong/dem'
+				// url: 'http://202.102.167.52:16381/crdata/dem'
+				// url: 'https://www.supermapol.com/realspace/services/3D-stk_terrain/rest/realspace/datas/info/data/path'
+				url: 'http://218.59.194.82:13480/sddem/dem/'
+			});
+			/* 初始化显示图层 */
+			_self.CMapApi.showInit();
+		}
+	});
+
+	/* 查询ArcGIS服务试试 */
+	proxy.CMapApi.queryAGServerExtent(
+		'http://218.59.194.82:6080/arcgis/rest/services/LSQZRZY_RE_WEB_V1/MapServer',
+		'0',
+		function(res) {
+			console.log(JSON.stringify(res));
+		},
+		function(err) {
+			console.log('查询范围错误', err);
+		}
+	);
+});
+</script>
+<style scoped>
+.jt-map {
+	position: relative;
+	top: 0px;
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+	background-color: blue;
+}
 </style>

src/components/CrMap/SketchViewModel.js

@@ -9,6 +9,8 @@
 import * as Cesium from 'cesium';
 /* 引入地理工具箱 */
 import * as turf from '@turf/turf'
+/* 引入墙的材质 */
+import WallMaterialProperty from './WallMaterialProperty.js'
 
 /* 扩展 Cesium.GroundPrimitive 给其添加objId属性*/
 
@@ -131,6 +133,7 @@ class SketchViewModel {
 		this._sketchTempPoints = []; //临时点集合 主要为了存储鼠标移动事件临时存储点
 		this._sketchPoints = []; //正式点集合 主要为了绘制正式图形
 		this._sketchOutputPoints = []; //输出点集合 主要为了存储输出的经纬度坐标点集合
+		this._sketchWallHeights = []; //墙的高度点集合
 		/* 创建的临时线 主要为了响应鼠标移动事件 */
 		this._sketchTempPolyline = undefined;
 		/* 创建的正式线 */
@@ -165,6 +168,8 @@ class SketchViewModel {
 		this._sketchTempSpatialTriangle = undefined;
 		/* 创建正式空间三角形 */
 		this._sketchSpatialTriangle = undefined;
+		/* 墙实体 */
+		this._sketchNormalWall = undefined;
 		/* 点线标注 */
 		this._lineLabel = undefined;
 		this._polygonLabel = undefined;
@@ -223,6 +228,8 @@ class SketchViewModel {
 		} else {
 			this._sketchPointImage = this._iconNormal;
 		}
+		/* 默认高度 */
+		this._defaultHeight = 50;
 	}
 
 	/**
@@ -331,7 +338,7 @@ class SketchViewModel {
 		var cartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(position);
 		/* 查询屏幕位置的要素 */
 		var feature = this._viewer.scene.pick(screenPoint);
-		if (feature == undefined) {
+		if (feature == undefined && Cesium.defined(cartographic)) {
 			lng = this._arcToDegree(cartographic.longitude);
 			lat = this._arcToDegree(cartographic.latitude);
 			height = cartographic.height;
@@ -339,9 +346,11 @@ class SketchViewModel {
 			var cartesian = this._viewer.scene.pickPosition(screenPoint);
 			if (Cesium.defined(cartesian)) {
 				var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
-				lng = this._arcToDegree(cartographic.longitude);
-				lat = this._arcToDegree(cartographic.latitude);
-				height = cartographic.height;
+				if (Cesium.defined(cartographic)) {
+					lng = this._arcToDegree(cartographic.longitude);
+					lat = this._arcToDegree(cartographic.latitude);
+					height = cartographic.height;
+				}
 			}
 		}
 		/* 返回结果 */
@@ -360,13 +369,21 @@ class SketchViewModel {
 	_transfromFromScreenPoint(screenPosition) {
 		/* 根据屏幕位置获取经度、纬度和高度信息 */
 		let location = this._getScreenClickPositionAndHeight(screenPosition);
-		/* 经纬度位置转换为三维坐标 */
-		var cartesian = Cesium.Cartesian3.fromDegrees(location.lng, location.lat, location
-			.height);
-		/* 返回 */
-		return {
-			gLocation: location,
-			sLocation: cartesian,
+		if (location.lng != undefined) {
+			/* 经纬度位置转换为三维坐标 */
+			var cartesian = Cesium.Cartesian3.fromDegrees(location.lng, location.lat, location
+				.height);
+			/* 返回 */
+			return {
+				gLocation: location,
+				sLocation: cartesian,
+			}
+		} else {
+			/* 返回 */
+			return {
+				gLocation: undefined,
+				sLocation: undefined,
+			}
 		}
 	}
 
@@ -571,6 +588,15 @@ class SketchViewModel {
 					}, false),
 					material: _self._tempPolygonMaterial,
 					classificationType: Cesium.ClassificationType.BOTH,
+				},
+				polyline: {
+					show: true,
+					positions: new Cesium.CallbackProperty(function() {
+						return _self._sketchTempPoints;
+					}, false),
+					material: _self._tempLineMaterial,
+					width: _self._param.moveLineWidth,
+					clampToGround: true, //开启贴地 如果有模型则贴模型
 				}
 			})
 			this._entities.add(this._sketchTempPolygon);
@@ -1001,8 +1027,6 @@ class SketchViewModel {
 		let entity = this._entities.add(this._sketchCircle);
 		/* 设置是否可编辑 */
 		if (isEdit != undefined && isEdit === true) {
-			/* 删除所有的临时点 忽略是否保留设置 */
-			this._removePointEntitys();
 			this._setEntityIsEdit(entity);
 		}
 	}
@@ -1022,7 +1046,6 @@ class SketchViewModel {
 			let lat0 = Cesium.Math.toDegrees(g0.latitude);
 			let lng1 = Cesium.Math.toDegrees(g1.longitude);
 			let lat1 = Cesium.Math.toDegrees(g1.latitude);
-			console.log(lng0, lat0, lng1, lat1);
 			_self._rectangleCoordinates = [0, 0, 1, 1];
 			if (lng0 < lng1) {
 				_self._rectangleCoordinates[0] = lng0;
@@ -1169,8 +1192,6 @@ class SketchViewModel {
 		let entity = this._entities.add(_self._sketchRectangle);
 		/* 设置是否可编辑 */
 		if (isEdit != undefined && isEdit === true) {
-			/* 删除所有的临时点 忽略是否保留设置 */
-			this._removePointEntitys();
 			this._setEntityIsEdit(entity);
 		}
 	}
@@ -1400,7 +1421,61 @@ class SketchViewModel {
 				}
 			})
 			this._entities.add(this._sketchSpatialTriangle);
-			this._updateScene();
+		}
+	}
+
+	/**
+	 * 创建墙
+	 */
+	_createNormalWall() {
+		let _self = this;
+		/* 创建墙 */
+		let normalWall = new Cesium.Entity({
+			name: _self._sketchEntityName,
+			wall: {
+				show: true,
+				positions: new Cesium.CallbackProperty(function() {
+					return _self._sketchTempPoints;
+				}, false),
+				minimumHeights: new Cesium.CallbackProperty(function() {
+					return _self._sketchWallHeights;
+				}, false),
+				maximumHeights: new Cesium.CallbackProperty(function() {
+					_self._sketchWallMaxHeights = [];
+					for (let i = 0; i < _self._sketchWallHeights.length; i++) {
+						_self._sketchWallMaxHeights.push(_self._sketchWallHeights[i] + _self
+							._defaultHeight);
+					}
+					return _self._sketchWallMaxHeights;
+				}, false),
+				material: new WallMaterialProperty({
+					viewer: _self._viewer,
+					trailImage: '/img/image.png',
+					duration: 1500,
+					color: _self._toColor(255, 0, 0, 1.0),
+				}),
+			}
+		});
+		/* 添加墙 */
+		this._sketchNormalWall = this._entities.add(normalWall);
+	}
+
+	/**
+	 * 更新墙的动态属性为固定属性
+	 * @param {Boolean} isEdit [是否可编辑]可选
+	 */
+	_updateNormalWall(isEdit) {
+		/* 移除最后一个高度点 */
+		this._sketchWallHeights.pop();
+		this._sketchWallMaxHeights.pop();
+		/* 设置并停止墙的动态属性 */
+		this._sketchNormalWall.wall.positions = this._sketchPoints;
+		this._sketchNormalWall.wall.minimumHeights = this._sketchWallHeights;
+		this._sketchNormalWall.wall.maximumHeights = this._sketchWallMaxHeights;
+		// this._sketchNormalWall.wall.material = this._toColor(0, 0, 255, 1.0)
+		/* 设置是否可编辑 */
+		if (isEdit != undefined && isEdit === true) {
+			this._setEntityIsEdit(this._sketchNormalWall);
 		}
 	}
 
@@ -1410,9 +1485,9 @@ class SketchViewModel {
 	 * @param {Array<Number>} options.color 移动线颜色[0~255,0~255,0~255,0~1]
 	 * @param {Number} options.lineWidth 移动线的宽度 
 	 * @param {Boolean} options.outline 是否有边框，有边框则为实线，否则为虚线
-	 * @param {Array<Number>} options.outlineColor 移动线描边颜色[0~255,0~255,0~255,0~1]
+	 * @param {Array<Number>} options.outlineColor 移动���������描边颜色[0~255,0~255,0~255,0~1]
 	 * @param {Number} options.outlineWidth 移动线描边宽度
-	 * @param {Number} options.power 亮度[0~1],如果需要使用虚线，请将该值设置为undefined
+	 * @param {Number} options.power 亮度[0~1],�����果������使���虚线，请将���值设置为undefined
 	 */
 	_setMoveLineStyle(options) {
 		let _self = this;
@@ -1458,7 +1533,7 @@ class SketchViewModel {
 	 * 设置线样式
 	 * @param {JSON} options 配置项
 	 * @param {Array<Number>} options.color 线颜色[0~255,0~255,0~255,0~1]
-	 * @param {Number} options.lineWidth 移动线的宽度 
+	 * @param {Number} options.lineWidth 移动线的���������������度 
 	 * @param {Array<Number>} options.outlineColor 线描边颜色[0~255,0~255,0~255,0~1]
 	 * @param {Number} options.outlineWidth 线描边宽度
 	 */
@@ -1659,6 +1734,7 @@ class SketchViewModel {
 		this._sketchTempPoints = [];
 		this._sketchPoints = [];
 		this._sketchOutputPoints = [];
+		this._sketchWallHeights = [];
 		/* 重置绘制线变量 */
 		this._sketchTempPolyline = undefined;
 		this._sketchPolyline = undefined;
@@ -1683,6 +1759,9 @@ class SketchViewModel {
 		/* 重置空间三角形 */
 		this._sketchTempSpatialTriangle = undefined;
 		this._sketchSpatialTriangle = undefined;
+		/* 重置普通墙变量 */
+		this._sketchTempNormalWall = undefined;
+		this._sketchNormalWall = undefined;
 	}
 }
 
@@ -2171,7 +2250,6 @@ Object.assign(SketchViewModel.prototype, {
 			/* 当点数为0时绘制线和面 */
 			if (_self._sketchTempPoints.length === 0) {
 				_self._createTempPolygon();
-				_self._createTempPolyline();
 				_self._sketchTempPoints.push(loc.sLocation.clone());
 			}
 			_self._sketchTempPoints.push(loc.sLocation);
@@ -2217,9 +2295,8 @@ Object.assign(SketchViewModel.prototype, {
 				if (options.onError) options.onError('点数少于3个，禁止结束绘制！');
 				return;
 			}
-			/* 删除临时线和面 */
+			/* 删除临时面 */
 			_self._removeEntityByObject(_self._sketchTempPolygon);
-			_self._removeEntityByObject(_self._sketchTempPolyline);
 			/* 绘制正式面 */
 			_self._createPolygon(options.isEdit);
 			/* 删除标记点 */
@@ -2623,6 +2700,82 @@ Object.assign(SketchViewModel.prototype, {
 	},
 
 	/**
+	 * 绘制普通墙
+	 * @param {Object} handler 事件句柄
+	 * @param {JSON} options 配置项
+	 * @param {Function} [options.onMoving(cPoint)] 移动回调 可选
+	 * @param {Function} [options.onComplete(positions)] 完成回调 可选
+	 * @param {Function} [options.onError(message)] 错误回到 可选
+	 */
+	_sketchDrawNormalWall: function(handler, options) {
+		let _self = this;
+		/* 注册鼠标左键点击事件 */
+		this._registerLeftClickEvent(handler, function(event) {
+			/* 识别屏幕位置 */
+			let loc = _self._transfromFromScreenPoint(event.position);
+			if (!Cesium.defined(loc.sLocation)) return;
+			/* 绘制点 */
+			if (_self._isDrawPoint) {
+				_self._createPoint(loc.sLocation, _self._lineLabel);
+			}
+			/* 第一点击的时候绘制线 */
+			if (_self._sketchTempPoints.length === 0) {
+				_self._createNormalWall();
+				_self._sketchTempPoints.push(loc.sLocation.clone());
+				/* 存储墙的高度点集合 */
+				_self._sketchWallHeights.push(loc.gLocation.height);
+			}
+			_self._sketchTempPoints.push(loc.sLocation);
+			_self._sketchWallHeights.push(loc.gLocation.height);
+			/* 存储正式绘制点集合 */
+			_self._sketchPoints.push(loc.sLocation.clone());
+		})
+		/* 注册鼠标移动事件 */
+		this._registerMouseMoveEvent(handler, function(event) {
+			/* 识别屏幕位置 */
+			let loc = _self._transfromFromScreenPoint(event.endPosition);
+			if (!Cesium.defined(loc.sLocation)) return;
+			if (Cesium.defined(_self._sketchNormalWall)) {
+				_self._sketchTempPoints.pop();
+				_self._sketchTempPoints.push(loc.sLocation);
+				_self._sketchWallHeights.pop();
+				_self._sketchWallHeights.push(loc.gLocation.height);
+			}
+		});
+		/* 注册鼠标右键点击事件 */
+		this._registerRightClickEvent(handler, function(event) {
+			if (_self._sketchTempPoints.length > 2) {
+				/* 移除正式点最有一个元素 */
+				_self._sketchPoints.pop();
+				/* 移除临时点倒数第二个元素 */
+				_self._sketchTempPoints.splice(_self._sketchTempPoints.length - 2, 1);
+				/* 移除临时高度点倒数第二个元素 */
+				_self._sketchWallHeights.splice(_self._sketchWallHeights.length - 2, 1);
+				/* 如果绘制了点 则删除最后一个 */
+				if (_self._isDrawPoint) {
+					let lastPointEntity = _self._pointEntitys[_self._pointEntitys.length - 1];
+					_self._entities.remove(lastPointEntity);
+					/* 移除点实体数据中的最后一条数据 */
+					_self._pointEntitys.pop();
+				}
+			}
+		});
+		/* 注册鼠标左键双击事件 */
+		this._registerLeftDoubleClickEvent(handler, function(event) {
+			if (_self._sketchPoints.length < 2) {
+				if (options.onError) options.onError('点数少于两个，禁止结束绘制！');
+				return;
+			}
+			/* 更新墙属性 */
+			_self._updateNormalWall(options.isEdit);
+			/* 删除标记点 */
+			if (!_self._isRetainDrawPoint) _self._removePointEntitys();
+			/* 干掉事件句柄 释放资源*/
+			_self._clearEvent(handler);
+		})
+	},
+
+	/**
 	 * @param {SketchViewModel.SketchType} toolsType 草图工具类型
 	 * @param {JSON} options 回调集合
 	 * @param {Boolean} [isEdit] 是否可编辑 可选 设置可编辑将不在保留临时点 
@@ -2671,6 +2824,9 @@ Object.assign(SketchViewModel.prototype, {
 			case SketchViewModel.SketchType.MultiplePoint:
 				_self._sketchDrawMultiplePoint(_self._sketchEventHandler, options);
 				break;
+			case SketchViewModel.SketchType.Wall:
+				_self._sketchDrawNormalWall(_self._sketchEventHandler, options);
+				break;
 		}
 	},
 
@@ -2894,6 +3050,18 @@ Object.assign(SketchViewModel.prototype, {
 				let radius = entity.ellipse.semiMajorAxis._value;
 				let cbPoint = this._calculateCircleBoundaryPoint(centerPosition, radius);
 				return [centerPosition, cbPoint];
+			} else if (entity.wall != undefined) {
+				entity.setEntityType(SketchViewModel.SketchEntityType.Wall);
+				/* 存储墙的最大高度和最小高度数组 */
+				this._sketchWallHeights = [];
+				this._sketchWallMaxHeights = [];
+				let minHeights = entity.wall.minimumHeights._value;
+				let maxHeights = entity.wall.maximumHeights._value;
+				for (let i = 0; i < minHeights.length; i++) {
+					this._sketchWallHeights.push(minHeights[i]);
+					this._sketchWallMaxHeights.push(maxHeights[i]);
+				}
+				return entity.wall.positions._value;
 			}
 		} else {
 			return [];
@@ -2921,6 +3089,67 @@ Object.assign(SketchViewModel.prototype, {
 	},
 
 	/**
+	 * 根据一组点计算中心点位置
+	 * @param {Array<Cesium.Cartesian3>} positions 点集合
+	 */
+	_calculateCenterPosition: function(positions) {
+		if (positions === undefined || positions.length === 0) return undefined;
+		else if (positions.length === 1) {
+			return positions[0];
+		} else if (positions.length === 2) {
+			let pt0 = this._cartesian3ToGeo(positions[0]);
+			let pt1 = this._cartesian3ToGeo(positions[1]);
+			let point0 = turf.point([pt0.longitude, pt0.latitude]);
+			let point1 = turf.point([pt1.longitude, pt1.latitude]);
+			let center = turf.midpoint(point0, point1).geometry.coordinates;
+			/* 查询高度 */
+			let height = this._queryHeightFromGeo(center[0], center[1]);
+			/* 返回 */
+			return Cesium.Cartesian3.fromDegrees(center[0], center[1], height);
+		} else {
+			let geoPoints = [
+				[]
+			];
+			for (let i = 0; i < positions.length; i++) {
+				/* 将世界坐标转换为经纬度坐标 */
+				let geoPoint = this._cartesian3ToGeo(positions[i]);
+				geoPoints[0].push([geoPoint.longitude, geoPoint.latitude]);
+			}
+			geoPoints[0].push(geoPoints[0][0]);
+			/* 创建区域 */
+			let polygon = turf.polygon(geoPoints);
+			/* 计算中心点 */
+			let center = turf.centerOfMass(polygon).geometry.coordinates;
+			/* 查询高度 */
+			let height = this._queryHeightFromGeo(center[0], center[1]);
+			/* 返回 */
+			return Cesium.Cartesian3.fromDegrees(center[0], center[1], height);
+		}
+	},
+
+	/**
+	 * 计算转换后的位置，根据角度、距离计算转换后的位置
+	 * @param {Cesium.Cartesian3} position 待转换位置
+	 * @param {Number} distance 距离<距离的表示单位在options中配置>
+	 * @param {Number} bearing 角度
+	 * @param {JSON} options 配置项
+	 * @return {Cesium.Cartesian3} 转换后的位置
+	 */
+	_calculateTransformPosition: function(position, distance, bearing, options) {
+		/* 将移动点转换为经纬度格式 */
+		let geoPoint = this._cartesian3ToGeo(position);
+		/* 根据点、角度、距离计算移动后的位置 */
+		let point = turf.point([geoPoint.longitude, geoPoint.latitude]);
+		let resPoint = turf.destination(point, distance, bearing, options).geometry
+			.coordinates;
+		/* 将移动后的点转换为世界坐标系坐标点 */
+		let cPosition = Cesium.Cartesian3.fromDegrees(resPoint[0], resPoint[1],
+			0);
+		/* 返回 */
+		return cPosition;
+	},
+
+	/**
 	 * 取消激活状态
 	 */
 	_unActivateEdit: function() {
@@ -2939,20 +3168,30 @@ Object.assign(SketchViewModel.prototype, {
 		let entityType = editEntity.getEntityType();
 		/* 不可编辑对象 直接退出 */
 		if (entityType === undefined) return;
+		/* 删除所有临时绘制的点 */
+		this._removePointEntitys();
 		/* 赋值可编辑对象 */
 		this._editEntity = editEntity;
 		/* 创建节点和中心点 */
 		if (entityType === SketchViewModel.SketchEntityType.Circle) {
 			this._createEditCenterPoint(positions[0]);
 			this._createEditNodePoint(positions, 1);
-		} else {
+		} else if (entityType === SketchViewModel.SketchEntityType.Polyline || entityType ===
+			SketchViewModel.SketchEntityType.Polygon || entityType === SketchViewModel.SketchEntityType
+			.Rectangle || entityType === SketchViewModel.SketchEntityType.Wall) {
 			this._createEditNodePoint(positions);
+			let centerPosition = this._calculateCenterPosition(positions);
+			this._createEditCenterPoint(centerPosition);
 		}
 		/* 创建中点 */
 		if (entityType != SketchViewModel.SketchEntityType.Rectangle && entityType != SketchViewModel
 			.SketchEntityType.Circle) {
 			this._createEditMiddlePoint(positions);
 		}
+		/* 判断是否需要创建高空点 */
+		if (entityType === SketchViewModel.SketchEntityType.Wall) {
+			this._createEditSpatialPoint(positions, this._sketchWallMaxHeights);
+		}
 		/* 创建事件句柄 */
 		if (this._sketchEditHandler === undefined) {
 			this._sketchEditHandler = new Cesium.ScreenSpaceEventHandler(this._viewer.scene.canvas);
@@ -2967,7 +3206,7 @@ Object.assign(SketchViewModel.prototype, {
 				let featureType = feature.id.getEditType();
 				/* 说明选择的点不是我们需要编辑的点 */
 				if (featureType === undefined) return;
-				/* 禁用场景的旋转移动功能 保留缩放功能 */
+				/* 禁用场景的旋�����移动功能 保留缩放功能 */
 				_self._viewer.scene.screenSpaceCameraController.enableRotate = false;
 				/* 位置信息 */
 				let entityPosition = feature.id.position._value;
@@ -2977,11 +3216,16 @@ Object.assign(SketchViewModel.prototype, {
 				_self._setMousePointerStyle();
 				/* 判断类型 是节点或中点 进行不同的操作 */
 				if (featureType.type === SketchViewModel.SketchEditType.Node || featureType.type ===
-					SketchViewModel.SketchEditType.Middle) {
+					SketchViewModel.SketchEditType.Middle || featureType.type === SketchViewModel
+					.SketchEditType.Spatial) {
 					/* 处理鼠标按下实体的属性变更回调 */
 					_self._entityCallbackPropertyByMouseDown();
 					/* 删除当前移动的点 */
 					_self._removeEntityByObject(_self._editPointEntity);
+					/* 删除高空点 */
+					if (_self._sketchEditEntitySpatialName != undefined) {
+						_self._removeEntityByName(_self._sketchEditEntitySpatialName);
+					}
 				} else if (featureType.type === SketchViewModel.SketchEditType.Center) {
 					_self._entityCenterMouseDownEvent();
 				}
@@ -2991,6 +3235,20 @@ Object.assign(SketchViewModel.prototype, {
 					let index = featureType.index;
 					_self._sketchEditPoints.splice(index, 0, entityPosition);
 					_self._sketchEditIndex = index;
+					/* 如果当前移动的中点为墙的中点，则需要进行特殊处理一下，主要为了修正高度 */
+					if (_self._sketchWallHeights != undefined && _self._sketchWallHeights.length >
+						0) {
+						/* 查询一下高度 */
+						let geoPoint = _self._cartesian3ToGeo(entityPosition);
+						let height = _self._queryHeightFromGeo(geoPoint.longitude, geoPoint
+							.latitude);
+						/* 墙的最小高度加入值 */
+						_self._sketchWallHeights.splice(index, 0, height);
+						/* 墙的最大高度也要加入值 */
+						let heightDifference = _self._sketchWallMaxHeights[0] - _self
+							._sketchWallHeights[0];
+						_self._sketchWallMaxHeights.splice(index, 0, height + heightDifference);
+					}
 					/* 设置提示标签 */
 					_self._tooltipInit('拖动中点，改变形状', event.position);
 				} else if (featureType.type === SketchViewModel.SketchEditType.Node) {
@@ -2998,6 +3256,11 @@ Object.assign(SketchViewModel.prototype, {
 					_self._sketchEditIndex = featureType.index;
 					/* 设置提示标签 */
 					_self._tooltipInit('拖动节点，改变形状', event.position);
+				} else if (featureType.type === SketchViewModel.SketchEditType.Spatial) {
+					/* 如果是节点 则直接记录索引 */
+					_self._sketchEditIndex = featureType.index;
+					/* 设置提示标签 */
+					_self._tooltipInit('拖动节点，改变高度', event.position);
 				}
 			}
 		})
@@ -3023,28 +3286,18 @@ Object.assign(SketchViewModel.prototype, {
 				} else if (editEntityType.type === SketchViewModel.SketchEditType.Middle) {
 					_self._sketchEditPoints[_self._sketchEditIndex] = loc.sLocation;
 				} else if (editEntityType.type === SketchViewModel.SketchEditType.Center) {
-					/* 计算角度试试 */
-					let strLoc = _self._cartesian3ToGeo(_self._startPoint);
-					let endLoc = _self._transfromFromScreenPoint(event.endPosition);
-					var point1 = turf.point([strLoc.longitude, strLoc.latitude]);
-					var point2 = turf.point([endLoc.gLocation.lng, endLoc.gLocation.lat]);
-					var bearing = turf.bearing(point1, point2);
-					var options = {
-						units: 'kilometers'
-					};
-					var distance = turf.distance(point1, point2, options);
-					for (let i = 0; i < _self._ellipseOutlineCoordinates.length; i++) {
-						let geoPoint = _self._cartesian3ToGeo(_self._startMovePoints[i]);
-						let point = turf.point([geoPoint.longitude, geoPoint.latitude]);
-						let resPoint = turf.destination(point, distance, bearing, options).geometry
-							.coordinates;
-						console.log(i, resPoint[0], resPoint[1]);
-						// let height = _self._queryHeightFromGeo(resPoint[0], resPoint[1]);
-						let cPosition = Cesium.Cartesian3.fromDegrees(resPoint[0], resPoint[1],
-							0);
-						_self._ellipseOutlineCoordinates[i] = cPosition.clone();
+					_self._entityCenterMouseMoveEvent(event);
+				} else if (editEntityType.type === SketchViewModel.SketchEditType.Spatial) {
+					let cartesian = _self._viewer.camera.pickEllipsoid(event.endPosition);
+					let bottomPoint = _self._sketchEditPoints[_self._sketchEditIndex];
+					/* 计算高差 */
+					let heightDifference = cartesian.z - bottomPoint.z;
+					if (heightDifference > 0) {
+						for (let i = 0; i < _self._sketchWallHeights.length; i++) {
+							_self._sketchWallMaxHeights[i] = _self._sketchWallHeights[i] +
+								heightDifference;
+						}
 					}
-					_self._movePoint = loc.sLocation;
 				}
 				/* 更改标签文字 */
 				_self._tooltipInit('抬起鼠标，完成更改', event.endPosition);
@@ -3061,13 +3314,12 @@ Object.assign(SketchViewModel.prototype, {
 				_self._setMouseDefaultStyle();
 				/* 获取当前编辑的点类型 */
 				let editEntityPointType = _self._editPointEntity.getEditType().type;
-				if (editEntityPointType === SketchViewModel.SketchEditType.Middle ||
+				if (editEntityPointType === SketchViewModel.SketchEditType.Node ||
 					editEntityPointType === SketchViewModel.SketchEditType.Middle) {
 					/* 处理鼠标抬起实体的属性变更回调 */
 					_self._entityCallbackPropertyByMouseUp();
 				} else if (editEntityPointType === SketchViewModel.SketchEditType.Center) {
-					_self._editEntity.position = _self._movePoint;
-					_self._editEntity.polyline.positions = _self._ellipseOutlineCoordinates;
+					_self._entityCenterMouseUpEvent();
 				}
 				/* 删除节点、中点和中心点 */
 				_self._removeEntityByName(_self._sketchEditEntityNodeName);
@@ -3083,12 +3335,22 @@ Object.assign(SketchViewModel.prototype, {
 					_self._sketchEditPoints[1] = boundaryPosition;
 					_self._createEditNodePoint(_self._sketchEditPoints, 1);
 					_self._createEditCenterPoint(centerPosition);
-				} else {
+				} else if (entityType === SketchViewModel.SketchEntityType.Polygon || entityType ===
+					SketchViewModel.SketchEntityType.Polyline || entityType === SketchViewModel
+					.SketchEntityType.Rectangle || entityType === SketchViewModel.SketchEntityType
+					.Wall) {
 					_self._createEditNodePoint(_self._sketchEditPoints);
+					let centerPosition = _self._calculateCenterPosition(_self._sketchEditPoints);
+					_self._createEditCenterPoint(centerPosition);
+					/* 如果当前编辑的是墙 还要创建空中点 */
+					if (entityType === SketchViewModel.SketchEntityType.Wall) {
+						_self._createEditSpatialPoint(_self._sketchEditPoints, _self
+							._sketchWallMaxHeights);
+					}
 				}
+				/* 创建中点 */
 				if (entityType != SketchViewModel.SketchEntityType.Rectangle &&
 					entityType != SketchViewModel.SketchEntityType.Circle) {
-					/* 创建所有中点 */
 					_self._createEditMiddlePoint(_self._sketchEditPoints);
 				}
 				/* 清除选择的实体 */
@@ -3101,44 +3363,149 @@ Object.assign(SketchViewModel.prototype, {
 	 * 实体中心点鼠标按下
 	 */
 	_entityCenterMouseDownEvent: function() {
+		let _self = this;
+		let entityPosition = this._editEntity.position._value;
 		/* 删除节点、中点和中心点 */
-		_self._removeEntityByName(_self._sketchEditEntityNodeName);
-		_self._removeEntityByName(_self._sketchEditEntityMiddleName);
-		_self._removeEntityByName(_self._sketchEditEntityCenterName);
+		this._removeEntityByName(this._sketchEditEntityNodeName);
+		this._removeEntityByName(this._sketchEditEntityMiddleName);
+		this._removeEntityByName(this._sketchEditEntityCenterName);
 		/* 记录位置 包括起始点、移动起始点（主要是为了改变位置）、和需要移动计算的全部点 */
-		_self._startPoint = entityPosition;
-		_self._startMovePoints = [];
-		_self._movePoint = entityPosition;
+		this._startPoint = entityPosition;
+		this._startMovePoints = [];
+		this._movePoint = entityPosition;
 		/* 获取编辑实体的类型 */
-		let editEntityType = _self._editEntity.getEntityType();
+		let editEntityType = this._editEntity.getEntityType();
 		/* 操作的如果是圆 */
 		if (editEntityType === SketchViewModel.SketchEntityType.Circle) {
 			/* 记录移动点为所有的圆边界点 */
-			for (let i = 0; i < _self._ellipseOutlineCoordinates.length; i++) {
-				_self._startMovePoints.push(_self._ellipseOutlineCoordinates[i]);
+			for (let i = 0; i < this._ellipseOutlineCoordinates.length; i++) {
+				this._startMovePoints.push(this._ellipseOutlineCoordinates[i]);
 			}
-			_self._editEntity.polyline.positions = new Cesium.CallbackProperty(
+			this._editEntity.polyline.positions = new Cesium.CallbackProperty(
 				function() {
 					return _self._ellipseOutlineCoordinates;
 				}, false);
-			_self._editEntity.position = new Cesium.CallbackProperty(function() {
+			this._editEntity.position = new Cesium.CallbackProperty(function() {
 				return _self._movePoint;
 			}, false);
+		} else if (editEntityType === SketchViewModel.SketchEntityType.Polygon) {
+			/* 记录移动点为所有边界点 */
+			for (let i = 0; i < this._sketchEditPoints.length; i++) {
+				this._startMovePoints.push(this._sketchEditPoints[i]);
+			}
+			/* 设置位置属性更新方式 */
+			_self._editEntity.polygon.hierarchy = new Cesium.CallbackProperty(function() {
+				return {
+					positions: _self._sketchEditPoints,
+				};
+			}, false);
+			if (_self._editEntity.polyline != undefined) {
+				_self._editEntity.polyline.positions = new Cesium.CallbackProperty(function() {
+					return _self._sketchEditPoints;
+				}, false);
+			}
+		} else if (editEntityType === SketchViewModel.SketchEntityType.Polyline) {
+			/* 记录移动点为所有边界点 */
+			for (let i = 0; i < this._sketchEditPoints.length; i++) {
+				this._startMovePoints.push(this._sketchEditPoints[i]);
+			}
+			/* 设置属性更新方法回调 */
+			_self._editEntity.polyline.positions = new Cesium.CallbackProperty(function() {
+				return _self._sketchEditPoints;
+			}, false);
+		} else if (editEntityType === SketchViewModel.SketchEntityType.Rectangle) {
+			/* 记录移动点为所有边界点 */
+			for (let i = 0; i < this._sketchEditPoints.length; i++) {
+				this._startMovePoints.push(this._sketchEditPoints[i]);
+			}
+			/* 设置属性变更回调 */
+			_self._editEntity.rectangle.coordinates = new Cesium.CallbackProperty(_self
+				._callUpdateRectangleCoordinates(_self
+					._sketchEditPoints), false);
+			/* 如果存在边界线 则特殊处理 */
+			if (_self._editEntity.polyline != undefined) {
+				_self._editEntity.polyline.positions = new Cesium.CallbackProperty(_self
+					._callUpdateRectangleOutlineCoordinates(),
+					false);
+			}
 		}
 	},
 
 	/**
 	 * 实体中心点鼠标移动
+	 * @param {Cesium.Event} event 事件
 	 */
-	_entityCenterMouseMoveEvent: function() {
-
+	_entityCenterMouseMoveEvent: function(event) {
+		let _self = this;
+		/* 将移动的起始点转换为经纬度 */
+		let strLoc = this._cartesian3ToGeo(_self._startPoint);
+		/* 获取移动的种植点 */
+		let endLoc = this._transfromFromScreenPoint(event.endPosition);
+		/* 计算两点之间的角度 */
+		var point1 = turf.point([strLoc.longitude, strLoc.latitude]);
+		var point2 = turf.point([endLoc.gLocation.lng, endLoc.gLocation.lat]);
+		var bearing = turf.bearing(point1, point2);
+		/* 计算亮点之间的距离 */
+		var options = {
+			units: 'kilometers'
+		};
+		var distance = turf.distance(point1, point2, options);
+		/* 根据移动的不同类型实体进行不同的操作 */
+		let editEntityType = this._editEntity.getEntityType();
+		if (editEntityType === SketchViewModel.SketchEntityType.Circle) {
+			/* 循环处理所有移动点 */
+			for (let i = 0; i < this._startMovePoints.length; i++) {
+				/* 计算转换后的位置 */
+				let position = this._calculateTransformPosition(this._startMovePoints[i], distance, bearing,
+					options);
+				/* 更新移动点数组 */
+				this._ellipseOutlineCoordinates[i] = position.clone();
+			}
+			/* 更新中心位置数组 */
+			this._movePoint = endLoc.sLocation;
+		} else if (editEntityType === SketchViewModel.SketchEntityType.Polyline || editEntityType ===
+			SketchViewModel.SketchEntityType.Polygon || editEntityType === SketchViewModel.SketchEntityType
+			.Rectangle) {
+			/* 循环处理所有移动点 */
+			for (let i = 0; i < this._startMovePoints.length; i++) {
+				/* 计算转换后的位置 */
+				let position = this._calculateTransformPosition(this._startMovePoints[i], distance, bearing,
+					options);
+				/* 更新移动点数组 */
+				this._sketchEditPoints[i] = position.clone();
+			}
+		}
 	},
 
 	/**
 	 * 实体中心点鼠标抬起
 	 */
 	_entityCenterMouseUpEvent: function() {
-
+		let _self = this;
+		/* 根据不同的实体进行不同的操作 */
+		let editEntityType = this._editEntity.getEntityType();
+		if (editEntityType === SketchViewModel.SketchEntityType.Circle) {
+			this._editEntity.position = this._movePoint;
+			this._editEntity.polyline.positions = this._ellipseOutlineCoordinates;
+		} else if (editEntityType === SketchViewModel.SketchEntityType.Polyline) {
+			this._editEntity.polyline.positions = this._sketchEditPoints;
+		} else if (editEntityType === SketchViewModel.SketchEntityType.Polygon) {
+			this._editEntity.polygon.hierarchy = {
+				positions: _self._sketchEditPoints,
+			};
+			if (this._editEntity.polyline != undefined) {
+				this._editEntity.polyline.positions = this._sketchEditPoints;
+			}
+		} else if (editEntityType === SketchViewModel.SketchEntityType.Rectangle) {
+			this._editEntity.rectangle.coordinates = Cesium.Rectangle.fromDegrees(_self
+				._rectangleCoordinates[
+					0], _self
+				._rectangleCoordinates[1], _self._rectangleCoordinates[2], _self
+				._rectangleCoordinates[3]);
+			if (this._editEntity.polyline != undefined) {
+				this._editEntity.polyline.positions = _self._rectangleOutlineCoordinates;
+			}
+		}
 	},
 
 	/**
@@ -3168,16 +3535,16 @@ Object.assign(SketchViewModel.prototype, {
 			}
 		} else if (entityType === SketchViewModel.SketchEntityType.Circle) {
 			/* 移动的是圆的点 需要特殊处理 */
-			if (_self._editPointEntity.getEditType().index === 1) {
-				_self._editEntity.ellipse.semiMajorAxis = _self._sketchEllipseRadius;
-				_self._editEntity.ellipse.semiMinorAxis = _self._sketchEllipseRadius;
-			} else if (_self._editPointEntity.getEditType().index === 0) {
-				_self._editEntity.position = _self._sketchEditPoints[0];
-			}
-			/* 如果圆有���界线 则进行特殊处理 */
+			_self._editEntity.ellipse.semiMajorAxis = _self._sketchEllipseRadius;
+			_self._editEntity.ellipse.semiMinorAxis = _self._sketchEllipseRadius;
+			/* 如果圆有边界线 则进行特殊处理 */
 			if (_self._editEntity.polyline != undefined) {
 				_self._editEntity.polyline.positions = _self._ellipseOutlineCoordinates;
 			}
+		} else if (entityType === SketchViewModel.SketchEntityType.Wall) {
+			_self._editEntity.wall.positions = _self._sketchEditPoints;
+			_self._editEntity.wall.minimumHeights = _self._sketchWallHeights;
+			_self._editEntity.wall.maximumHeights = _self._sketchWallMaxHeights;
 		}
 	},
 
@@ -3212,14 +3579,14 @@ Object.assign(SketchViewModel.prototype, {
 				._callUpdateRectangleCoordinates(_self
 					._sketchEditPoints),
 				false);
-			/* 如���存在边界线则特殊处理 */
+			/* 如果存在边界线则特殊处理 */
 			if (_self._editEntity.polyline != undefined) {
 				_self._editEntity.polyline.positions = new Cesium.CallbackProperty(_self
 					._callUpdateRectangleOutlineCoordinates(),
 					false);
 			}
 		} else if (entityType === SketchViewModel.SketchEntityType.Circle) {
-			/* ���动的是圆的点 需要特殊处理 */
+			/* 移动的是圆的点 需要特殊处理 */
 			if (_self._editPointEntity.getEditType().index === 1) {
 				_self._editEntity.ellipse.semiMajorAxis = new Cesium.CallbackProperty(
 					_self
@@ -3234,6 +3601,18 @@ Object.assign(SketchViewModel.prototype, {
 					_self._callEllipseOutlineCoordinate(_self
 						._sketchEditPoints), false);
 			}
+		} else if (entityType === SketchViewModel.SketchEntityType.Wall) {
+			/* 位置属性变更 */
+			_self._editEntity.wall.positions = new Cesium.CallbackProperty(function() {
+				return _self._sketchEditPoints;
+			}, false);
+			/* 高度属性变更 */
+			_self._editEntity.wall.minimumHeights = new Cesium.CallbackProperty(function() {
+				return _self._sketchWallHeights;
+			}, false);
+			_self._editEntity.wall.maximumHeights = new Cesium.CallbackProperty(function() {
+				return _self._sketchWallMaxHeights;
+			}, false);
 		}
 	},
 
@@ -3312,6 +3691,43 @@ Object.assign(SketchViewModel.prototype, {
 	},
 
 	/**
+	 * 创建可编辑的空中点
+	 * @param {Array<Cesium.Cartesian3>} positions 底部坐标集合
+	 * @param {Array<Number>} heights 高度集合 
+	 * @param {Number} startIndex [开始索引] 可选 默认为0
+	 */
+	_createEditSpatialPoint(positions, heights, startIndex) {
+		if (positions === undefined || heights === undefined) return;
+		if (positions.length === undefined || heights.length === undefined) return;
+		if (heights.length < positions.length) return;
+		this._sketchEditEntitySpatialName = "SketchEditEntitySpatial";
+		let _self = this;
+		/* 判断开始创建索引 */
+		let strIndex = startIndex === undefined ? 0 : startIndex;
+		for (let i = 0; i < positions.length; i++) {
+			/* 获取当前点 */
+			let p = positions[i];
+			/* 当前点转换为经纬度 */
+			let geoPoint = this._cartesian3ToGeo(p);
+			/* 重新获取新的空间位置 */
+			let position = Cesium.Cartesian3.fromDegrees(geoPoint.longitude, geoPoint.latitude, heights[i]);
+			/* 小于索引不会创建 */
+			if (i < strIndex) continue;
+			/* 创建实体 */
+			this._createEditPointEntity({
+				name: _self._sketchEditEntitySpatialName,
+				position: position,
+				size: 12,
+				color: [255, 0, 0, 1.0],
+				editType: {
+					type: SketchViewModel.SketchEditType.Spatial,
+					index: i,
+				},
+			});
+		}
+	},
+
+	/**
 	 * 创建可编辑的中点
 	 * @param {Array<Cesium.Cartesian3>} positions 坐标集合
 	 */
@@ -3355,6 +3771,10 @@ Object.assign(SketchViewModel.prototype, {
 				type: SketchViewModel.SketchEditType.Center,
 			},
 		});
+		/* 创建中心点的同时将中心点付给当前的编辑对象 */
+		if (this._editEntity != undefined) {
+			this._editEntity.position = position.clone();
+		}
 	},
 
 	/**
@@ -3397,7 +3817,7 @@ Object.assign(SketchViewModel.prototype, {
 	 * 查询指定经纬度位置的高度 有地形则查地形 有模型则查模型 查询错误或未查询到，返回0
 	 * @param {Number} longitude 经度<度格式>
 	 * @param {Number} latitude 纬度<度格式>
-	 * @return {Number} 查询位置的高���值
+	 * @return {Number} 查询位置的高度值
 	 */
 	_queryHeightFromGeo: function(longitude, latitude) {
 		if (longitude === undefined || latitude === undefined || typeof longitude != 'number' ||
@@ -3425,6 +3845,8 @@ Object.assign(SketchViewModel.prototype, {
 		this._editEntity = undefined;
 		this._removeEntityByName(this._sketchEditEntityNodeName);
 		this._removeEntityByName(this._sketchEditEntityMiddleName);
+		this._removeEntityByName(this._sketchEditEntityCenterName);
+		this._removeEntityByName(this._sketchEditEntitySpatialName);
 	},
 })
 
@@ -3560,8 +3982,6 @@ Object.assign(SketchViewModel.prototype, {
 			handler = null;
 		}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
 	}
-
-
 });
 
 /**
@@ -3576,6 +3996,7 @@ SketchViewModel.SketchType = Object.freeze({
 	Spatial: 'spatial',
 	Circle: 'circle',
 	Rectangle: 'rectangle',
+	Wall: 'wall',
 	Triangle: 'triangle',
 	PolygonBody: 'polygonBody',
 	DrawPoint: 'drawPoint',
@@ -3601,6 +4022,7 @@ SketchViewModel.SketchEditType = Object.freeze({
 	Node: 'node',
 	Middle: 'middle',
 	Center: 'center',
+	Spatial: 'spatial',
 })
 
 /**
@@ -3611,6 +4033,7 @@ SketchViewModel.SketchEntityType = Object.freeze({
 	Polygon: 'polygon',
 	Rectangle: 'rectangle',
 	Circle: 'circle',
+	Wall: 'wall',
 })
 
 /* 输出 */

src/components/CrMap/WallMaterialProperty.js

@@ -0,0 +1,166 @@
+/**
+ * 创建者：王成
+ * 操作系统：MAC
+ * 创建日期：2022年12月16日
+ * 描述：墙材质
+ */
+
+/* 引入Cesium */
+import * as Cesium from 'cesium';
+
+class WallMaterialProperty {
+	/**
+	 * @param {JSON} options 配置项
+	 * @param {Cesium.Viewer} options.viewer 着色器运行所需的视图
+	 * @param {Cesium.Color} options.color [墙的颜色，默认蓝色] 可选
+	 * @param {Number} options.duration [循环时间 默认1000] 可选
+	 * @param {String} options.trailImage 墙的贴图
+	 * 
+	 */
+	constructor(options) {
+		/* 着色器运行依赖的视图 */
+		this._viewer = options.viewer;
+		/* 变更事件 */
+		this._definitionChanged = new Cesium.Event();
+		this._color = undefined;
+		/* 墙的颜色 */
+		this.color = options.color || Cesium.Color.BLUE;
+		/* 动态循环周期 */
+		this.duration = options.duration || 1000;
+		/* 墙的贴图 */
+		this.trailImage = options.trailImage;
+		/* 默认时间 */
+		this._time = (new Date()).getTime();
+		/* 材质类型名称 */
+		this._materialTypeName = 'jtWallMaterial'
+		/* 将材质加入缓存 以便重复利用 */
+		Cesium.Material._materialCache.addMaterial(this._materialTypeName, {
+			fabric: {
+				type: this._materialTypeName,
+				uniforms: {
+					time: -20,
+					color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
+					image: options.trailImage,
+				},
+				source: this._getDirectionWallShader({
+					get: true,
+					count: 1.0,
+					freely: 'standard',
+					direction: '-'
+				})
+			},
+			translucent: function(material) {
+				/* 材质是否半透明 */
+				return true;
+			}
+		});
+	}
+
+	/**
+	 * 重新获取类型方法
+	 * @param {Cesium.JulianDate} time 时间
+	 */
+	getType(time) {
+		return this._materialTypeName;
+	}
+
+	/**
+	 * 重写获取值方法
+	 * @param {Cesium.JulianDate} time
+	 * @param {JSON} result 
+	 */
+	getValue(time, result) {
+		if (!Cesium.defined(result)) {
+			result = {};
+		}
+		result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.BLUE, result.color);
+		result.image = this.trailImage;
+		if (this.duration) {
+			result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
+		}
+		this._viewer.scene.requestRender();
+		return result;
+	}
+
+	/**
+	 * 重写对比函数
+	 * @param {Object} other 传入对比对象
+	 */
+	equals(other) {
+		return (this === other || (other instanceof WallMaterialProperty && Cesium.Property.equals(this
+			._color, other._color)));
+	}
+
+	/**
+	 * 带方向的墙体
+	 * @param {*} options.get:true/false
+	 * @param {*} options.count:数量 
+	 * @param {*} options.freely:vertical/standard
+	 * @param {*} options.direction:+/-
+	 */
+	_getDirectionWallShader(options) {
+		let materail = '';
+		materail += 'czm_material czm_getMaterial(czm_materialInput materialInput){\n' +
+			'  czm_material material = czm_getDefaultMaterial(materialInput);\n' +
+			'  vec2 st = materialInput.st;\n' +
+			'  vec4 colorImage = texture2D(image, vec2(fract(float(3)*st.t - time), st.t));\n' +
+			// '  vec4 colorImage = texture2D(image, vec2(fract(float(3)*st.s + time), st.t));\n' +
+			'  vec4 fragColor;\n' +
+			'  fragColor.rgb = color.rgb / 1.0;\n' +
+			'  fragColor = czm_gammaCorrect(fragColor);\n' +
+			'  material.alpha = colorImage.a * color.a;\n' +
+			'  material.diffuse = color.rgb;\n' +
+			'  material.emission = fragColor.rgb;\n' +
+			'  return material;\n' +
+			'}';
+		return materail;
+
+		// if (options && options.get) {
+		// 	var materail = "czm_material czm_getMaterial(czm_materialInput materialInput)\n\
+		//      {\n\
+		//          czm_material material = czm_getDefaultMaterial(materialInput);\n\
+		//          vec2 st = materialInput.st;";
+		// 	if (options.freely == "vertical") { //（由下到上）
+		// 		materail += "vec4 colorImage = texture2D(image, vec2(fract(st.s), fract(float(" + options.count +
+		// 			")*st.t" + options.direction + " time)));\n\ ";
+		// 	} else { //（逆时针）
+		// 		materail += "vec4 colorImage = texture2D(image, vec2(fract(float(" + options.count + ")*st.s " +
+		// 			options.direction + " time), fract(st.t)));\n\ ";
+		// 	}
+		// 	//泛光
+		// 	materail += "vec4 fragColor;\n\
+		//          fragColor.rgb = (colorImage.rgb+color.rgb) / 1.0;\n\
+		//          fragColor = czm_gammaCorrect(fragColor);\n\
+		//          material.diffuse = colorImage.rgb;\n\
+		//          material.alpha = colorImage.a;\n\
+		//          material.emission = fragColor.rgb;\n\
+		//          return material;\n\
+		//      }";
+		// 	return materail
+		// }
+	}
+}
+
+Object.defineProperties(WallMaterialProperty.prototype, {
+	/**
+	 * 判断是否相等，返回false表示属性一直在变化中
+	 */
+	isConstant: {
+		get: function() {
+			return false;
+		}
+	},
+	/**
+	 * 事件变更
+	 */
+	definitionChanged: {
+		get: function() {
+			return this._definitionChanged;
+		}
+	},
+	/* 颜色描述 */
+	color: Cesium.createPropertyDescriptor('color')
+})
+
+/* 导出 */
+export default WallMaterialProperty;

src/pages/tab-cmap.vue

@@ -44,10 +44,50 @@
 			</div>
 		</div>
 	</van-popup>
-	<jtDialog :showDialog="showDialog" title="图形编辑" height="260px" width="300px" @closeJTDialog="closeDialog">
-		<el-button type="primary">绘制编辑线</el-button>
-		<el-button type="primary">选择线</el-button>
-		<el-button type="primary">删除</el-button>
+	<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>
 </template>
 <script setup>
@@ -323,7 +363,7 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss" scoped>
 .cr-color-label {
 	padding-left: 15px;
 	height: 30px;
@@ -387,13 +427,42 @@ export default {
 	margin-left: 0px !important;
 }
 
-.klm {
-	width: 300px !important;
-	margin-right: 0px !important;
-	margin-top: 0px !important;
-	top: 10px !important;
-	right: 10px !important;
-	height: calc(100% - 20px - 50px);
-	background-color: rgba(202, 94, 92, 0.9) !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>