立体文字测试（用图片是可以的），正在完善墙的编辑功能

src/components/CrMap/CrMap.vue

@@ -339,7 +339,7 @@ onMounted(() => {
 	);
 });
 </script>
-<style scoped>
+<style>
 .jt-map {
 	position: relative;
 	top: 0px;
@@ -350,4 +350,10 @@ onMounted(() => {
 	overflow: hidden;
 	background-color: blue;
 }
+
+.cesium-performanceDisplay-defaultContainer {
+	top: unset !important;
+	bottom: 100px !important;
+	right: 10px !important;
+}
 </style>

src/components/CrMap/SketchViewModel.js

@@ -336,9 +336,10 @@ class SketchViewModel {
 		var position = this._viewer.scene.globe.pick(ray, this._viewer.scene);
 		/* 获取地理位置的制图表达 */
 		var cartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(position);
+		cartographic = Cesium.Cartographic.fromCartesian(position);
 		/* 查询屏幕位置的要素 */
 		var feature = this._viewer.scene.pick(screenPoint);
-		if (feature == undefined && Cesium.defined(cartographic)) {
+		if (feature === undefined && Cesium.defined(cartographic)) {
 			lng = this._arcToDegree(cartographic.longitude);
 			lat = this._arcToDegree(cartographic.latitude);
 			height = cartographic.height;
@@ -870,7 +871,7 @@ class SketchViewModel {
 						._callUpdateEllipseMinorAxis(_self._sketchTempPoints),
 						false),
 					semiMajorAxis: new Cesium.CallbackProperty(_self
-						._callUpdateEllipseMinorAxis(),
+						._callUpdateEllipseMinorAxis(_self._sketchTempPoints),
 						false),
 					height: new Cesium.CallbackProperty(_self._callUpdateEllipseHeight(_self
 							._sketchTempPoints),
@@ -1434,10 +1435,19 @@ class SketchViewModel {
 			viewer: _self._viewer,
 			trailImage: '/img/image.png',
 			duration: 1500,
-			color: _self._toColor(255, 255, 0, 1.0),
+			color: _self._toColor(0, 255, 0, 0.6),
+			param: {
+				count: 3.0,
+				direction: 'horizontalA',
+				order: '-'
+			}
 		});
 
-		// let wallMaterial = new Cesium.ColorMaterialProperty(Cesium.Color.BLUE);
+		// let wallMaterial = new Cesium.ImageMaterialProperty({
+		// 	image: '/img/text.png',
+		// 	transparent: true,
+		// });
+
 
 		/* 创建墙 */
 		let normalWall = new Cesium.Entity({
@@ -1470,17 +1480,24 @@ class SketchViewModel {
 	 * @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);
+		/* 获取三个数组的长度 */
+		let hLength = this._sketchWallHeights.length;
+		let mhLength = this._sketchWallMaxHeights.length;
+		let pLength = this._sketchPoints.length;
+		if (hLength === mhLength && hLength - pLength === 1) {
+			/* 移除最后一个高度点 */
+			this._sketchWallHeights.pop();
+			this._sketchWallMaxHeights.pop();
+			/* 设置并停止墙的动态属性 */
+			this._sketchNormalWall.wall.positions = this._sketchPoints;
+			this._sketchNormalWall.wall.minimumHeights = this._sketchWallHeights;
+			this._sketchNormalWall.wall.maximumHeights = this._sketchWallMaxHeights;
+			/* 设置是否可编辑 */
+			if (isEdit != undefined && isEdit === true) {
+				this._setEntityIsEdit(this._sketchNormalWall);
+			}
+		} else {
+			console.log(hLength, mhLength, pLength);
 		}
 	}
 
@@ -1490,9 +1507,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;
@@ -1538,7 +1555,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 线描边宽度
 	 */
@@ -1913,7 +1930,7 @@ Object.assign(SketchViewModel.prototype, {
 		handler.setInputAction(function(event) {
 			/* 锁定点击事件 以免和移动事件冲突 */
 			_self._lock = true;
-			if (_self._timer != null) clearTimeout(_self._timer);
+			clearTimeout(_self._timer);
 			_self._timer = setTimeout(function() {
 				if (callChange) callChange(event);
 				/* 解除锁定 */
@@ -1931,7 +1948,7 @@ Object.assign(SketchViewModel.prototype, {
 		let _self = this;
 		if (!handler) return;
 		handler.setInputAction(function(event) {
-			if (_self._timer != null) clearTimeout(_self._timer);
+			clearTimeout(_self._timer);
 			/* 解除锁定 */
 			_self._lock = false;
 			if (callChange) callChange(event);
@@ -3010,10 +3027,15 @@ Object.assign(SketchViewModel.prototype, {
 		let handler = new Cesium.ScreenSpaceEventHandler(this._viewer.scene.canvas);
 		this._registerLeftClickEvent(handler, function(event) {
 			let feature = _self._viewer.scene.pick(event.position);
+			console.log('===选中的要素', feature);
 			if (feature === undefined) {
 				_self._unActivateEdit();
 			} else {
 				if (feature.id instanceof Cesium.Entity && feature.id.getIsEdit() === true) {
+					/* 获取可编辑实体的类型 */
+					let editEntityType = feature.id.getEntityType();
+					console.log('===编辑实体的类型', editEntityType);
+					_self._unActivateEdit();
 					_self._activateEdit(feature.id);
 				}
 			}
@@ -3197,7 +3219,7 @@ Object.assign(SketchViewModel.prototype, {
 		if (entityType === SketchViewModel.SketchEntityType.Wall) {
 			this._createEditSpatialPoint(positions, this._sketchWallMaxHeights);
 		}
-		/* 创建事件句柄 */
+		/* 创���事件句柄 */
 		if (this._sketchEditHandler === undefined) {
 			this._sketchEditHandler = new Cesium.ScreenSpaceEventHandler(this._viewer.scene.canvas);
 		}
@@ -3207,11 +3229,11 @@ Object.assign(SketchViewModel.prototype, {
 			let feature = _self._viewer.scene.pick(event.position);
 			/* 分类处理 */
 			if (feature != undefined && feature.id instanceof Cesium.Entity) {
-				/* 获取选择实���的样��� */
+				/* 获取选择实体的样式 */
 				let featureType = feature.id.getEditType();
-				/* 说明���择的点�����是我们���要�����辑���点 */
+				/* 说明当前移动的点是我们需要编辑的点 */
 				if (featureType === undefined) return;
-				/* 禁用场景的��������移动功能 保留缩放功能 */
+				/* 禁用场景的旋转移动功能 保留缩放功能 */
 				_self._viewer.scene.screenSpaceCameraController.enableRotate = false;
 				/* 位置信息 */
 				let entityPosition = feature.id.position._value;
@@ -3293,11 +3315,15 @@ Object.assign(SketchViewModel.prototype, {
 				} else if (editEntityType.type === SketchViewModel.SketchEditType.Center) {
 					_self._entityCenterMouseMoveEvent(event);
 				} else if (editEntityType.type === SketchViewModel.SketchEditType.Spatial) {
-					let cartesian = _self._viewer.camera.pickEllipsoid(event.endPosition);
+					/* 当前移动的是空中点 */
+					let ellipsoid = _self._viewer.scene.globe.ellipsoid;
+					let cartesian = _self._viewer.camera.pickEllipsoid(event.endPosition,
+						ellipsoid);
 					let bottomPoint = _self._sketchEditPoints[_self._sketchEditIndex];
 					/* 计算高差 */
 					let heightDifference = cartesian.z - bottomPoint.z;
-					if (heightDifference > 0) {
+					console.log("===高度差", heightDifference);
+					if (heightDifference > 0 && heightDifference < 500) {
 						for (let i = 0; i < _self._sketchWallHeights.length; i++) {
 							_self._sketchWallMaxHeights[i] = _self._sketchWallHeights[i] +
 								heightDifference;
@@ -3547,6 +3573,9 @@ Object.assign(SketchViewModel.prototype, {
 				_self._editEntity.polyline.positions = _self._ellipseOutlineCoordinates;
 			}
 		} else if (entityType === SketchViewModel.SketchEntityType.Wall) {
+			/* 测试一下 */
+			console.log("===", '底部点数', _self._sketchEditPoints.length, '最小高度点数', _self._sketchWallHeights
+				.length, '最大高度点数', _self._sketchWallMaxHeights.length);
 			_self._editEntity.wall.positions = _self._sketchEditPoints;
 			_self._editEntity.wall.minimumHeights = _self._sketchWallHeights;
 			_self._editEntity.wall.maximumHeights = _self._sketchWallMaxHeights;

src/components/CrMap/WallMaterialProperty.js

@@ -15,7 +15,10 @@ class WallMaterialProperty {
 	 * @param {Cesium.Color} options.color [墙的颜色，默认蓝色] 可选
 	 * @param {Number} options.duration [循环时间 默认1000] 可选
 	 * @param {String} options.trailImage 墙的贴图
-	 * 
+	 * @param {JSON} options.param 着色器参数
+	 * @param {Number} options.param.count [数量 可选 默认为1]
+	 * @param {String} options.param.direction [方向 可选 默认竖直 ] 取值vertical/horizontal
+	 * @param {String} options.param.order [顺序 可选 上下/下上/顺时针/逆时针 与方向配合使用 ] 取值+/-
 	 */
 	constructor(options) {
 		/* 着色器运行依赖的视图 */
@@ -33,6 +36,15 @@ class WallMaterialProperty {
 		this._time = (new Date()).getTime();
 		/* 材质类型名称 */
 		this._materialTypeName = 'jtWallMaterial'
+		/* 存储相关参数的属性 以便后期进行追踪修改 */
+		this._param = {
+			color: this.color._value,
+			image: this.trailImage,
+			duration: this.duration,
+			count: 0,
+			direction: '',
+			order: '',
+		}
 		/* 将材质加入缓存 以便重复利用 */
 		Cesium.Material._materialCache.addMaterial(this._materialTypeName, {
 			fabric: {
@@ -42,11 +54,7 @@ class WallMaterialProperty {
 					color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
 					image: options.trailImage,
 				},
-				source: this._getDirectionWallShader({
-					count: 2.0,
-					direction: 'horizontal',
-					order: '-'
-				})
+				source: this._getDirectionWallShader(options.param)
 			},
 			translucent: function(material) {
 				/* 材质是否半透明 */
@@ -103,6 +111,11 @@ class WallMaterialProperty {
 			.count : 1;
 		let direction = op.direction === 'horizontal' ? 'horizontal' : 'vertical';
 		let order = op.order === '+' ? '+' : '-';
+		/* 补充参数 */
+		console.log(this._param);
+		this._param.count = count;
+		this._param.direction = direction;
+		this._param.order = order;
 		let materail = '';
 		materail += 'czm_material czm_getMaterial(czm_materialInput materialInput){\n' +
 			'  czm_material material = czm_getDefaultMaterial(materialInput);\n' +

src/pages/tab-cmap.vue

@@ -89,11 +89,16 @@
 			</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>
 /* 引入三维地图控件 */