增加了动态圆的绘制及着色器渲染功能

src/assets/fonts/fonts.css

@@ -112,4 +112,44 @@
 
 .app-icon-close-to-right:before {
 	content: "\e6f7";
+}
+
+/* 绘制贴地线图标 */
+.app-icon-draw-line::before {
+	content: '\e6ff';
+}
+
+/* 绘制空间图标 */
+.app-icon-draw-sline::before {
+	content: '\e6f9';
+}
+
+/* 绘制贴地面图标 */
+.app-icon-draw-polygon::before {
+	content: '\e6eb';
+}
+
+/* 绘制矩形图标 */
+.app-icon-draw-rectangle::before {
+	content: '\e6fd';
+}
+
+/* 绘制圆图标 */
+.app-icon-draw-circle::before {
+	content: '\e6fa';
+}
+
+/* 绘制动态墙图标 */
+.app-icon-draw-dwall::before {
+	content: '\e6fb';
+}
+
+/* 绘制墙图标 */
+.app-icon-draw-wall::before {
+	content: '\e8d0';
+}
+
+/* 绘制墙图标 */
+.app-icon-draw-text::before {
+	content: '\e732';
 }

src/components/CrMap/CircleMaterialProperty.js

@@ -0,0 +1,274 @@
+/**
+ * 创建者：王成
+ * 操作系统：MAC
+ * 创建日期：2022年12月29日
+ * 描述：动态扩散圆材质
+ */
+
+/* 引入Cesium */
+import * as Cesium from 'cesium';
+
+class CircleMaterialProperty {
+	/**
+	 * @param {JSON} options 配置项
+	 * @param {Cesium.Viewer} options.viewer 着色器运行所需的视图
+	 * @param {Cesium.Color} options.color [墙的颜色，默认蓝色] 可选
+	 * @param {Number} options.duration [循环时间 默认1000] 可选
+	 * @param {JSON} options.param 着色器参数
+	 * @param {Number} options.param.count [数量 可选 默认为1]
+	 * @param {String} options.param.direction [方向 可选 默认竖直 ] 取值vertical/horizontal
+	 * @param {String} options.param.order [顺序 可选 上下/下上/顺时针/逆时针 与方向配合使用 ] 取值+/-
+	 */
+	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._time = (new Date()).getTime();
+		/* 材质类型名称 */
+		this._materialTypeName = 'jtCircleMaterial'
+		/* 存储相关参数的属性 以便后期进行追踪修改 */
+		this._param = {
+			color: this.color._value.toCssColorString(),
+			duration: this.duration,
+			count: 0,
+			direction: '',
+			order: '',
+		}
+		/* 将材质加入缓存 以便重复利用 */
+		Cesium.Material._materialCache.addMaterial(this._materialTypeName, {
+			fabric: {
+				type: this._materialTypeName,
+				uniforms: {
+					time: 0,
+					color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
+				},
+				source: this._getCircleMaterial(),
+			},
+			translucent: function(material) {
+				/* 材质是否半透明 */
+				return true;
+			}
+		});
+	}
+
+	/**
+	 * 获取材质着色器Shader
+	 */
+	_getCircleMaterial() {
+		//普通扩散
+		// let circleMaterial = "czm_material czm_getMaterial(czm_materialInput materialInput)\n" +
+		// 	"{\n" +
+		// 	"  czm_material material = czm_getDefaultMaterial(materialInput);\n" +
+		// 	"  material.diffuse = 1.5 * color.rgb;\n" +
+		// 	"  vec2 st = materialInput.st;\n" +
+		// 	"  float dis = distance(st, vec2(0.5, 0.5));\n" +
+		// 	"  float per = fract(time);\n" +
+		// 	"  if(dis > per * 0.5) {\n" +
+		// 	"    material.alpha = 0.0;\n" +
+		// 	"    discard;\n" +
+		// 	"  }else{\n" +
+		// 	"    material.alpha = color.a * dis / per / 1.0;\n" +
+		// 	"  }\n" +
+		// 	"  return material;\n" +
+		// 	"}";
+		/* 从小到大 再 从大到小 扩散 */
+		// let circleMaterial = "czm_material czm_getMaterial(czm_materialInput materialInput)\n" +
+		// 	"{\n" +
+		// 	"  czm_material material = czm_getDefaultMaterial(materialInput);\n" +
+		// 	"  material.diffuse = color.rgb;\n" +
+		// 	"  vec2 st = materialInput.st;\n" +
+		// 	"  float dis = distance(st, vec2(0.5, 0.5));\n" +
+		// 	"  float per = fract(time);\n" +
+		// 	"  if(per < 0.5){\n" +
+		// 	"    if(dis > per) {\n" +
+		// 	"      material.alpha = 0.0;\n" +
+		// 	"      discard;\n" +
+		// 	"    }else{\n" +
+		// 	"      material.alpha = color.a * dis / per / 1.0;\n" +
+		// 	"    }\n" +
+		// 	"  }else{\n" +
+		// 	"    if(dis > 1.0 - per) {\n" +
+		// 	"      material.alpha = 0.0;\n" +
+		// 	"      discard;\n" +
+		// 	"    }else{\n" +
+		// 	"      material.alpha = color.a * dis / (1.0 - per) / 1.0;\n" +
+		// 	"    }\n" +
+		// 	"  }\n" +
+		// 	"  return material;\n" +
+		// 	"}";
+		// let circleMaterial = "czm_material czm_getMaterial(czm_materialInput materialInput)\n" +
+		// 	"{\n" +
+		// 	"  czm_material material = czm_getDefaultMaterial(materialInput);\n" +
+		// 	"  material.diffuse = 1.5 * color.rgb;\n" +
+		// 	"  vec2 st = materialInput.st;\n" +
+		// 	"  float dis = distance(st, vec2(0.5, 0.5));\n" +
+		// 	"  float per = fract(time);\n" +
+		// 	"  float xdis = per * float(0.5);\n" +
+		// 	"  if(dis > xdis && dis < xdis + 0.05) {\n" +
+		// 	"    material.alpha = dis * (0.75/(xdis + 0.05 - xdis)) - 0.75*xdis/(xdis + 0.05 - xdis);\n" +
+		// 	"  }else if(dis > xdis + 0.2 && dis < xdis + 0.2 + 0.05){\n" +
+		// 	"    material.alpha = dis * (0.75/(xdis + 0.2 + 0.05 - xdis)) - 0.75*(xdis + 0.2)/(xdis + 0.2 + 0.05 - xdis);\n" +
+		// 	"  }else{\n" +
+		// 	"    material.alpha = 0.0;\n" +
+		// 	"    discard;\n" +
+		// 	"  }\n" +
+		// 	"  return material;\n" +
+		// 	"}";
+
+		//真正意义上的圆环扩散
+		// let circleMaterial = "czm_material czm_getMaterial(czm_materialInput materialInput)\n" +
+		// 	"{\n" +
+		// 	"  czm_material material = czm_getDefaultMaterial(materialInput);\n" +
+		// 	"  material.diffuse = 1.5 * color.rgb;\n" +
+		// 	"  vec2 st = materialInput.st;\n" +
+		// 	"  vec3 str = materialInput.str;\n" +
+		// 	"  float dis = distance(st, vec2(0.5, 0.5));\n" +
+		// 	"  float per = fract(time);\n" +
+		// 	"  if (abs(str.z) > 0.001)\n" +
+		// 	"  {\n" +
+		// 	"     //着色器渲染停止，不在绘制内容  \n" +
+		// 	"     discard;\n" +
+		// 	"  }\n" +
+		// 	"  if (dis > 0.5)\n" +
+		// 	"  {\n" +
+		// 	"     //超出半径范围时，着色器渲染停止  \n" +
+		// 	"     discard;\n" +
+		// 	"  } else {\n" +
+		// 	"     //把半径分成count份，每两份之间的间隔距离  \n" +
+		// 	"     float perDis = 0.5 / 3.0;\n" +
+		// 	"     float disNum;\n" +
+		// 	"     float bl = 0.0;\n" +
+		// 	"     //循环，最多999个环  \n" +
+		// 	"     for (int i = 0; i <= 999; i++)\n" +
+		// 	"     {\n" +
+		// 	"        //判断是否属于数量内的环  \n" +
+		// 	"        if (float(i) <= 3.0)\n" +
+		// 	"        {\n" +
+		// 	"           disNum = perDis * float(i) - dis + per / 3.0;\n" +
+		// 	"           if (disNum > 0.0)\n" +
+		// 	"           {\n" +
+		// 	"               if (disNum < perDis)\n" +
+		// 	"               {\n" +
+		// 	"                  bl = 1.0 - disNum / perDis;\n" +
+		// 	"               } else if (disNum - perDis < perDis) {\n" +
+		// 	"                  bl = 1.0 - abs(1.0 - disNum / perDis);\n" +
+		// 	"               }\n" +
+		// 	"               material.alpha = pow(bl, 0.3);\n" +
+		// 	"           }\n" +
+		// 	"        }\n" +
+		// 	"     }\n" +
+		// 	"  }\n" +
+		// 	"  return material;\n" +
+		// 	"}\n";
+		let circleMaterial = "czm_material czm_getMaterial(czm_materialInput materialInput)\n" +
+			"{\n" +
+			"  czm_material material = czm_getDefaultMaterial(materialInput);\n" +
+			"  material.diffuse = 1.5 * color.rgb;\n" +
+			"  vec2 st = materialInput.st;\n" +
+			"  vec3 str = materialInput.str;\n" +
+			"  float dis = distance(st, vec2(0.5, 0.5));\n" +
+			"  float per = fract(time);\n" +
+			"  if (abs(str.z) > 0.001)\n" +
+			"  {\n" +
+			"     //着色器渲染停止，不在绘制内容  \n" +
+			"     discard;\n" +
+			"  }\n" +
+			"  if (dis > 0.5)\n" +
+			"  {\n" +
+			"     //超出半径范围时，着色器渲染停止  \n" +
+			"     discard;\n" +
+			"  } else {\n" +
+			"     //把半径分成count份，每两份之间的间隔距离  \n" +
+			"     float perDis = 0.5 / 3.0;\n" +
+			"     float disNum;\n" +
+			"     float bl = 0.0;\n" +
+			"     //循环，最多999个环  \n" +
+			"     for (int i = 0; i <= 3; i++)\n" +
+			"     {\n" +
+			"        //判断是否属于数量内的环  \n" +
+			"        disNum = (0.5 - float(i)*perDis)/0.9*per; \n" +
+			"        if(dis > disNum && dis < disNum + 0.03)\n" +
+			"        {\n" +
+			"            material.alpha = 0.0;\n" +
+			"        }\n" +
+			"     }\n" +
+			"  }\n" +
+			"  return material;\n" +
+			"}\n";
+		return circleMaterial;
+	}
+}
+
+/**
+ * 必须重写的方法
+ */
+Object.assign(CircleMaterialProperty.prototype, {
+	/**
+	 * 重新获取类型方法
+	 * @param {Cesium.JulianDate} time 时间
+	 */
+	getType: function(time) {
+		return this._materialTypeName;
+	},
+
+	/**
+	 * 重写获取值方法
+	 * @param {Cesium.JulianDate} time
+	 * @param {JSON} result 
+	 */
+	getValue: function(time, result) {
+		if (!Cesium.defined(result)) {
+			result = {};
+		}
+		result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.BLUE, result
+			.color);
+		if (this.duration) {
+			result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
+		}
+		this._viewer.scene.requestRender();
+		return result;
+	},
+
+	/**
+	 * 重写对比函数
+	 * @param {Object} other 传入对比对象
+	 */
+	equals: function(other) {
+		return (this === other || (other instanceof WallMaterialProperty && Cesium.Property.equals(this
+			._color, other._color)));
+	}
+})
+
+/**
+ * 默认属性
+ */
+Object.defineProperties(CircleMaterialProperty.prototype, {
+	/**
+	 * 判断是否相等，返回false表示属性一直在变化中
+	 */
+	isConstant: {
+		get: function() {
+			return false;
+		}
+	},
+	/**
+	 * 事件变更
+	 */
+	definitionChanged: {
+		get: function() {
+			return this._definitionChanged;
+		}
+	},
+	/* 颜色属性 */
+	color: Cesium.createPropertyDescriptor('color')
+})
+
+/* 导出 */
+export default CircleMaterialProperty;

src/components/CrMap/CrMap.vue

@@ -1,359 +1,404 @@
-<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>
-.jt-map {
-	position: relative;
-	top: 0px;
-	width: 100%;
-	height: 100%;
-	margin: 0;
-	padding: 0;
-	overflow: hidden;
-	background-color: blue;
-}
-
-.cesium-performanceDisplay-defaultContainer {
-	top: unset !important;
-	bottom: 100px !important;
-	right: 10px !important;
-}
+<template>
+	<div id="cesiumContainer" class="jt-map"></div>
+</template>
+<script setup>
+import { param } from 'jquery';
+import { defineExpose, onMounted, getCurrentInstance } from 'vue';
+/* 注册方法 */
+const emit = defineEmits(['onEditWall']);
+
+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
+		});
+	},
+
+	/**
+	 * 鼠标点击绘制可编辑动态墙
+	 */
+	onMouseDrawDynamicEditWall: function() {
+		proxy.sketchViewModel.sketchTools(SketchViewModel.SketchType.Wall, {
+			isEdit: true,
+			wallType: SketchViewModel.SketchWallType.DynamicWall
+		});
+	},
+
+	/**
+	 * 鼠标点击绘制可编辑颜色墙
+	 */
+	onMouseDrawColorEditWall: function() {
+		proxy.sketchViewModel.sketchTools(SketchViewModel.SketchType.Wall, {
+			isEdit: true,
+			wallType: SketchViewModel.SketchWallType.ColorWall
+		});
+	},
+
+	/**
+	 * 鼠标点击绘制可编辑文字墙
+	 */
+	onMouseDrawEditText: function() {
+		proxy.sketchViewModel.sketchTools(SketchViewModel.SketchType.Wall, {
+			isEdit: true,
+			wallType: SketchViewModel.SketchWallType.Text
+		});
+	},
+
+	/**
+	 * 绘制可编辑动态圆
+	 */
+	onMouseDrawDynamicCircle: function() {
+		proxy.sketchViewModel.sketchTools(SketchViewModel.SketchType.DynamicCircle, {
+			isEdit: true
+		});
+	},
+
+	/**
+	 * 更新墙属性
+	 * @param {JSON} params 参数配置项
+	 */
+	onSubmitEditWall: function(params) {
+		proxy.sketchViewModel.updateEditEntityWall(params);
+	}
+});
+/* 初始化 */
+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.sketchViewModel.onEditWall = param => {
+		emit('onEditWall', param);
+	};
+
+	/* 添加暗夜版图层 */
+	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>
+.jt-map {
+	position: relative;
+	top: 0px;
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+	background-color: blue;
+}
+
+.cesium-performanceDisplay-defaultContainer {
+	top: unset !important;
+	bottom: 100px !important;
+	right: 10px !important;
+}
 </style>

src/components/CrMap/SketchViewModel.js

@@ -11,6 +11,8 @@ import * as Cesium from 'cesium';
 import * as turf from '@turf/turf'
 /* 引入墙的材质 */
 import WallMaterialProperty from './WallMaterialProperty.js'
+/* 引入动态圆材质 */
+import CircleMaterialProperty from './CircleMaterialProperty.js'
 
 /* 扩展 Cesium.GroundPrimitive 给其添加objId属性*/
 
@@ -1426,9 +1428,123 @@ class SketchViewModel {
 	}
 
 	/**
-	 * 创建墙
+	 * 创建动态圆
+	 * @param {Cesium.Cartesian3} centerPosition 圆的中心点位置
+	 */
+	_createDynamicCircle(centerPosition) {
+		let _self = this;
+		/* 动态扩散材质 */
+		let wallMaterial = new CircleMaterialProperty({
+			viewer: _self._viewer,
+			duration: 2000,
+			color: _self._toColor(0, 255, 0, 0.6),
+			param: {
+				count: 3.0,
+				direction: 'horizontalA',
+				order: '-'
+			}
+		});
+		/* 存储椭圆中心点位置 */
+		this._sketchEllipseCenterPosition = centerPosition.clone();
+		/* 创建圆实体 */
+		let dynamicCircleEntity = new Cesium.Entity({
+			name: _self._sketchEntityName,
+			position: centerPosition,
+			ellipse: {
+				show: true,
+				semiMinorAxis: new Cesium.CallbackProperty(_self._callUpdateEllipseMinorAxis(_self
+					._sketchTempPoints), false),
+				semiMajorAxis: new Cesium.CallbackProperty(_self._callUpdateEllipseMinorAxis(_self
+					._sketchTempPoints), false),
+				material: wallMaterial,
+				classificationType: Cesium.ClassificationType.BOTH,
+			},
+		})
+		/* 加入集合 */
+		this._sketchCircle = this._entities.add(dynamicCircleEntity);
+	}
+
+	/**
+	 * 更新动态圆
+	 * @param {Boolean} isEdit [是否可编辑] 可选
 	 */
-	_createNormalWall() {
+	_updateDynamicCircle(isEdit) {
+		let _self = this;
+		/* 更新位置 */
+		this._sketchCircle.position = this._sketchEllipseCenterPosition;
+		this._sketchCircle.ellipse.semiMinorAxis = this._sketchEllipseRadius;
+		this._sketchCircle.ellipse.semiMajorAxis = this._sketchEllipseRadius;
+		/* 设置是否可编辑 */
+		if (isEdit != undefined && isEdit === true) {
+			this._setEntityIsEdit(this._sketchCircle);
+		}
+	}
+
+	/**
+	 * 文字材质
+	 * @param {JSON} options 配置项
+	 * @param {String} options.text 文字内容 
+	 * @param {String} options.color 文字颜色 rgba(r,g,b,a)
+	 */
+	_materialTextImageProperty(options) {
+		this._canvasId = 'canvasJt';
+		/* 获取画布 */
+		let canvasObj = document.getElementById(this._canvasId);
+		/* 如果画�������已经存在则删除 */
+		if (canvasObj != null) {
+			document.body.removeChild(canvasObj);
+		}
+		/* 创建画布 */
+		canvasObj = document.createElement('canvas');
+		canvasObj.id = this._canvasId;
+		/* 设置画布尺寸 */
+		canvasObj.setAttribute('width', '1024px');
+		canvasObj.setAttribute('height', '256px');
+		/* 加入画布 */
+		document.body.appendChild(canvasObj);
+		/* 获取上下文绘制 */
+		let context = canvasObj.getContext('2d');
+		context.fillStyle = options.color === undefined ? 'rgba(255,0,0,1)' : options.color;
+		context.font = 'bold 240px 微软雅黑';
+		context.textAlign = 'left';
+		context.textBaseline = 'bottom';
+		context.fillText(options.text, 12, 250, 1000);
+		/* 创建材质 */
+		let textMaterial = new Cesium.ImageMaterialProperty({
+			image: canvasObj, //'/img/text.png',
+			transparent: true,
+		});
+		textMaterial._param = {
+			color: context.fillStyle,
+			text: options.text,
+		}
+		// var base64Data = canvasObj.toDataURL("image/jpeg", 1);
+		/* 返回材质 */
+		return textMaterial;
+	}
+
+	/**
+	 * 颜色材质
+	 * @param {JSON} options 配置项
+	 * @param {String} options.color 文字颜色 rgba(r,g,b,a)
+	 */
+	_materialColorProperty(options) {
+		let mColor = 'rgba(0,255,0,1)';
+		if (options !== undefined && options.color !== undefined) mColor = options.color;
+		/* 创建材质 */
+		let colorMaterial = new Cesium.ColorMaterialProperty(Cesium.Color.fromCssColorString(mColor));
+		colorMaterial._param = {
+			color: mColor,
+		}
+		/* 返回材质 */
+		return colorMaterial;
+	}
+
+	/**
+	 * 绘制墙
+	 * @param {SketchViewModel.SketchWallType} wallType 墙的类型
+	 */
+	_createNormalWall(wallType) {
 		let _self = this;
 		/* 创建墙的材质 */
 		let wallMaterial = new WallMaterialProperty({
@@ -1442,13 +1558,18 @@ class SketchViewModel {
 				order: '-'
 			}
 		});
-
-		// let wallMaterial = new Cesium.ImageMaterialProperty({
-		// 	image: '/img/text.png',
-		// 	transparent: true,
-		// });
-
-
+		if (wallType !== undefined && wallType === SketchViewModel.SketchWallType.Text) {
+			wallMaterial = this._materialTextImageProperty({
+				color: 'rgba(255,255,0,0.75)',
+				text: '立体广告牌',
+			})
+		} else if (wallType !== undefined && wallType === SketchViewModel.SketchWallType.ColorWall) {
+			console.log("===>>>", '')
+			wallMaterial = this._materialColorProperty({
+				color: 'rgba(0,255,0,0.75)',
+			})
+		}
+		console.log('===>>>材质', wallMaterial);
 		/* 创建墙 */
 		let normalWall = new Cesium.Entity({
 			name: _self._sketchEntityName,
@@ -1477,7 +1598,7 @@ class SketchViewModel {
 
 	/**
 	 * 更新墙的动态属性为固定属性
-	 * @param {Boolean} isEdit [是否可编辑]可选
+	 * @param {Boolean} isEdit [是否可编���]可选
 	 */
 	_updateNormalWall(isEdit) {
 		/* 获取三个数组的长度 */
@@ -2390,6 +2511,64 @@ Object.assign(SketchViewModel.prototype, {
 	},
 
 	/**
+	 * 绘制动态圆
+	 * @param {Object} handler 事件句柄
+	 * @param {JSON} options 配置项
+	 * @param {Function} [options.onAdded(center)] 添加回调 可选 
+	 * @param {Function} [options.onComplete(center,radius)] 完成回调 可选
+	 * @param {Function} [options.onError(message)] 错误回到 可选
+	 */
+	_sketchDrawDynamicCircle: function(handler, options) {
+		let _self = this;
+		/* 注册鼠标左键单击事件 */
+		this._registerLeftClickEvent(handler, function(event) {
+			if (_self._sketchTempPoints.length === 0) {
+				/* 识别屏幕位置 */
+				let loc = _self._transfromFromScreenPoint(event.position);
+				if (!Cesium.defined(loc.sLocation)) return;
+				/* 绘制点 */
+				if (_self._isDrawPoint) {
+					_self._createPoint(loc.sLocation, '起点');
+				}
+				/* 添加数据 */
+				_self._sketchTempPoints.push(loc.sLocation.clone());
+				_self._sketchTempPoints.push(loc.sLocation); //凑数的
+				/* 存储正式绘制点集合 */
+				_self._sketchPoints.push(loc.sLocation.clone());
+				/* 存储经纬度 */
+				_self._sketchOutputPoints.push(loc.gLocation);
+				/* 创建圆 */
+				_self._createDynamicCircle(loc.sLocation);
+				/* 监听输出 */
+				if (options.onAdded) options.onAdded(loc.sLocation);
+			} else {
+				/* 删除标记点 */
+				_self._removePointEntitys();
+				/* 删除临时圆 */
+				_self._removeEntityByObject(_self._sketchTempCircle);
+				/* 创建正式圆 */
+				_self._updateDynamicCircle(options.isEdit);
+				/* 干掉事件句柄 释放资源*/
+				_self._clearEvent(handler);
+				/* 回调返回 */
+				if (options.onComplete) options.onComplete(_self._sketchOutputPoints[0], _self
+					._sketchEllipseRadius);
+			}
+		});
+		/* 注册鼠标移动事件 */
+		this._registerMouseMoveEvent(handler, function(event) {
+			/* 如果还未创建圆 则直接返回 */
+			if (_self._sketchPoints.length < 1) return;
+			/* 获取空间位置 */
+			var cartesian = _self._viewer.scene.pickPosition(event.endPosition);
+			/* 如果获取点失败 则直接返回 */
+			if (cartesian == undefined) return;
+			_self._sketchTempPoints.pop();
+			_self._sketchTempPoints.push(cartesian);
+		})
+	},
+
+	/**
 	 * 绘制高度线
 	 * @param {Object} handler 事件句柄
 	 * @param {JSON} options 配置项
@@ -2725,6 +2904,8 @@ Object.assign(SketchViewModel.prototype, {
 	 * 绘制普通墙
 	 * @param {Object} handler 事件句柄
 	 * @param {JSON} options 配置项
+	 * @param {Boolean} options.isEdit [是否可编辑 可选]
+	 * @param {SketchViewModel.SketchWallType} options.wallType [绘制墙的类型 可选]  
 	 * @param {Function} [options.onMoving(cPoint)] 移动回调 可选
 	 * @param {Function} [options.onComplete(positions)] 完成回调 可选
 	 * @param {Function} [options.onError(message)] 错误回到 可选
@@ -2742,7 +2923,7 @@ Object.assign(SketchViewModel.prototype, {
 			}
 			/* 第一点击的时候绘制线 */
 			if (_self._sketchTempPoints.length === 0) {
-				_self._createNormalWall();
+				_self._createNormalWall(options.wallType);
 				_self._sketchTempPoints.push(loc.sLocation.clone());
 				/* 存储墙的高度点集合 */
 				_self._sketchWallHeights.push(loc.gLocation.height);
@@ -2849,6 +3030,9 @@ Object.assign(SketchViewModel.prototype, {
 			case SketchViewModel.SketchType.Wall:
 				_self._sketchDrawNormalWall(_self._sketchEventHandler, options);
 				break;
+			case SketchViewModel.SketchType.DynamicCircle:
+				_self._sketchDrawDynamicCircle(_self._sketchEventHandler, options);
+				break;
 		}
 	},
 
@@ -3034,15 +3218,104 @@ Object.assign(SketchViewModel.prototype, {
 				if (feature.id instanceof Cesium.Entity && feature.id.getIsEdit() === true) {
 					/* 获取可编辑实体的类型 */
 					let editEntityType = feature.id.getEntityType();
-					console.log('===编辑实体的类型', editEntityType);
+					if (editEntityType === SketchViewModel.SketchEntityType.Wall) {
+						/* 获取绘制墙的材质 */
+						let wallMaterial = feature.id.wall.material;
+						/* 获取参数 */
+						let param = feature.id.wall.material._param;
+						/* 获取墙的高度 */
+						let wallHeight = (feature.id.wall.maximumHeights._value[0] - feature.id.wall
+							.minimumHeights._value[0]).toFixed(2);
+						if (wallMaterial instanceof Cesium.ImageMaterialProperty) {
+							if (_self.onEditWall) _self.onEditWall({
+								id: 'TextMaterial',
+								height: wallHeight,
+								color: param.color,
+								count: 0,
+								direction: 'v',
+								order: '-',
+								text: param.text,
+							})
+						} else if (wallMaterial instanceof WallMaterialProperty) {
+							if (_self.onEditWall) _self.onEditWall({
+								id: 'WallMaterial',
+								height: wallHeight,
+								color: param.color,
+								count: param.count,
+								direction: param.direction,
+								order: param.order,
+								text: '',
+							})
+						} else if (wallMaterial instanceof Cesium.ColorMaterialProperty) {
+							if (_self.onEditWall) _self.onEditWall({
+								id: 'ColorMaterial',
+								height: wallHeight,
+								color: param.color,
+								count: 0,
+								direction: 'v',
+								order: '-',
+								text: '',
+							})
+						}
+					}
 					_self._unActivateEdit();
 					_self._activateEdit(feature.id);
+				} else {
+					_self._unActivateEdit();
 				}
 			}
 		})
 	},
 
 	/**
+	 * 更新当前编辑的实体墙/立体广告牌
+	 * @param {Object} params
+	 */
+	updateEditEntityWall: function(params) {
+		let _self = this;
+		console.log('===最终传入的参数', params);
+		if (this._editEntity == undefined || this._editEntity.getEntityType() != SketchViewModel
+			.SketchEntityType.Wall) {
+			return;
+		}
+		let minHeights = this._editEntity.wall.minimumHeights._value;
+		let maxHeights = [];
+		for (let i = 0; i < minHeights.length; i++) {
+			maxHeights.push(minHeights[i] + parseFloat(params.height));
+		}
+		/* 设置墙的最大高度 */
+		this._editEntity.wall.maximumHeights = maxHeights;
+		/* 更改存储墙的最大高度的数组 */
+		this._sketchWallMaxHeights = maxHeights;
+		/* 根据传入的参数id判断需要搞什���材质 */
+		let wallMaterial = undefined;
+		if (params.id === 'TextMaterial') {
+			wallMaterial = this._materialTextImageProperty({
+				color: params.color,
+				text: params.text,
+			})
+		} else if (params.id === 'WallMaterial') {
+			wallMaterial = new WallMaterialProperty({
+				viewer: _self._viewer,
+				trailImage: '/img/image.png',
+				duration: 1500,
+				color: Cesium.Color.fromCssColorString(params.color),
+				param: {
+					count: parseFloat(params.count),
+					direction: params.direction,
+					order: params.order
+				}
+			});
+		} else if (params.id === 'ColorMaterial') {
+			wallMaterial = this._materialColorProperty({
+				color: params.color,
+			})
+		}
+		this._editEntity.wall.material = wallMaterial;
+		console.log(this._editEntity);
+	},
+
+	/**
 	 * 判断并设置实体的数据类型
 	 * @param {Cesium.Entity} entity 实体
 	 * @return {Array<Cesium.Cartesian3>} positions
@@ -3079,7 +3352,7 @@ Object.assign(SketchViewModel.prototype, {
 				return [centerPosition, cbPoint];
 			} else if (entity.wall != undefined) {
 				entity.setEntityType(SketchViewModel.SketchEntityType.Wall);
-				/* 存储墙的最大高度和最小高度数组 */
+				/* 存储墙���最大高度���最小高度数组 */
 				this._sketchWallHeights = [];
 				this._sketchWallMaxHeights = [];
 				let minHeights = entity.wall.minimumHeights._value;
@@ -3165,7 +3438,7 @@ Object.assign(SketchViewModel.prototype, {
 	_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;
@@ -3200,7 +3473,8 @@ Object.assign(SketchViewModel.prototype, {
 		/* 赋值可编辑对象 */
 		this._editEntity = editEntity;
 		/* 创建节点和中心点 */
-		if (entityType === SketchViewModel.SketchEntityType.Circle) {
+		if (entityType === SketchViewModel.SketchEntityType.Circle || entityType === SketchViewModel
+			.SketchEntityType.DynamicCircle) {
 			this._createEditCenterPoint(positions[0]);
 			this._createEditNodePoint(positions, 1);
 		} else if (entityType === SketchViewModel.SketchEntityType.Polyline || entityType ===
@@ -3212,14 +3486,14 @@ Object.assign(SketchViewModel.prototype, {
 		}
 		/* 创建中点 */
 		if (entityType != SketchViewModel.SketchEntityType.Rectangle && entityType != SketchViewModel
-			.SketchEntityType.Circle) {
+			.SketchEntityType.Circle && entityType !== SketchViewModel.SketchEntityType.DynamicCircle) {
 			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);
 		}
@@ -3407,15 +3681,18 @@ Object.assign(SketchViewModel.prototype, {
 		/* 获取编辑实体的类型 */
 		let editEntityType = this._editEntity.getEntityType();
 		/* 操作的如果是圆 */
-		if (editEntityType === SketchViewModel.SketchEntityType.Circle) {
+		if (editEntityType === SketchViewModel.SketchEntityType.Circle || editEntityType === SketchViewModel
+			.SketchEntityType.DynamicCircle) {
 			/* 记录移动点为所有的圆边界点 */
-			for (let i = 0; i < this._ellipseOutlineCoordinates.length; i++) {
-				this._startMovePoints.push(this._ellipseOutlineCoordinates[i]);
+			if (this._editEntity.polyline !== undefined) {
+				for (let i = 0; i < this._ellipseOutlineCoordinates.length; i++) {
+					this._startMovePoints.push(this._ellipseOutlineCoordinates[i]);
+				}
+				this._editEntity.polyline.positions = new Cesium.CallbackProperty(
+					function() {
+						return _self._ellipseOutlineCoordinates;
+					}, false);
 			}
-			this._editEntity.polyline.positions = new Cesium.CallbackProperty(
-				function() {
-					return _self._ellipseOutlineCoordinates;
-				}, false);
 			this._editEntity.position = new Cesium.CallbackProperty(function() {
 				return _self._movePoint;
 			}, false);
@@ -3483,7 +3760,8 @@ Object.assign(SketchViewModel.prototype, {
 		var distance = turf.distance(point1, point2, options);
 		/* 根据移动的不同类型实体进行不同的操作 */
 		let editEntityType = this._editEntity.getEntityType();
-		if (editEntityType === SketchViewModel.SketchEntityType.Circle) {
+		if (editEntityType === SketchViewModel.SketchEntityType.Circle || editEntityType === SketchViewModel
+			.SketchEntityType.DynamicCircle) {
 			/* 循环处理所有移动点 */
 			for (let i = 0; i < this._startMovePoints.length; i++) {
 				/* 计算转换后的位置 */
@@ -3515,9 +3793,12 @@ Object.assign(SketchViewModel.prototype, {
 		let _self = this;
 		/* 根据不同的实体进行不同的操作 */
 		let editEntityType = this._editEntity.getEntityType();
-		if (editEntityType === SketchViewModel.SketchEntityType.Circle) {
+		if (editEntityType === SketchViewModel.SketchEntityType.Circle || editEntityType === SketchViewModel
+			.SketchEntityType.DynamicCircle) {
 			this._editEntity.position = this._movePoint;
-			this._editEntity.polyline.positions = this._ellipseOutlineCoordinates;
+			if (this._editEntity.polyline !== undefined) {
+				this._editEntity.polyline.positions = this._ellipseOutlineCoordinates;
+			}
 		} else if (editEntityType === SketchViewModel.SketchEntityType.Polyline) {
 			this._editEntity.polyline.positions = this._sketchEditPoints;
 		} else if (editEntityType === SketchViewModel.SketchEntityType.Polygon) {
@@ -3731,6 +4012,8 @@ Object.assign(SketchViewModel.prototype, {
 	 * @param {Number} startIndex [开始索引] 可选 默认为0
 	 */
 	_createEditSpatialPoint(positions, heights, startIndex) {
+		/* 暂时不创建高空点 */
+		return;
 		if (positions === undefined || heights === undefined) return;
 		if (positions.length === undefined || heights.length === undefined) return;
 		if (heights.length < positions.length) return;
@@ -4029,6 +4312,7 @@ SketchViewModel.SketchType = Object.freeze({
 	Height: 'height',
 	Spatial: 'spatial',
 	Circle: 'circle',
+	DynamicCircle: 'dynamicCircle',
 	Rectangle: 'rectangle',
 	Wall: 'wall',
 	Triangle: 'triangle',
@@ -4040,6 +4324,15 @@ SketchViewModel.SketchType = Object.freeze({
 })
 
 /**
+ * 绘制的墙类型
+ */
+SketchViewModel.SketchWallType = Object.freeze({
+	DynamicWall: 'dynamicWall',
+	ColorWall: 'colorWall',
+	Text: 'text',
+})
+
+/**
  * 点图标类型
  */
 SketchViewModel.SketchIconType = Object.freeze({

src/components/CrMap/WallMaterialProperty.js

@@ -38,7 +38,7 @@ class WallMaterialProperty {
 		this._materialTypeName = 'jtWallMaterial'
 		/* 存储相关参数的属性 以便后期进行追踪修改 */
 		this._param = {
-			color: this.color._value,
+			color: this.color._value.toCssColorString(),
 			image: this.trailImage,
 			duration: this.duration,
 			count: 0,
@@ -54,7 +54,7 @@ class WallMaterialProperty {
 					color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
 					image: options.trailImage,
 				},
-				source: this._getDirectionWallShader(options.param)
+				source: _getDirectionWallShader(options.param)
 			},
 			translucent: function(material) {
 				/* 材质是否半透明 */
@@ -129,6 +129,7 @@ class WallMaterialProperty {
 		}
 		materail += '  vec4 fragColor;\n' +
 			'  fragColor.rgb = color.rgb / 1.0;\n' +
+			// '  fragColor.rgb = colorImage.rgb / 1.0;\n' +
 			'  fragColor = czm_gammaCorrect(fragColor);\n' +
 			'  material.alpha = colorImage.a * color.a;\n' +
 			'  material.diffuse = color.rgb;\n' +

src/components/CrMap/WallMaterialProperty_back.js

@@ -1,164 +0,0 @@
-/**
- * 创建者：王成
- * 操作系统：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) {
-		console.log('创建材质=====');
-		let _self = this;
-		/* 着色器运行依赖的视图 */
-		this._viewer = options.viewer;
-		// console.log('视图', this._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: this.color,
-					image: this.trailImage,
-				},
-				source: this._createWallShaderSource({
-					count: 2,
-					direction: 'vertical',
-					order: '+',
-				})
-			},
-			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 {JSON} options 配置项
-	 * @param {Number} options.count [数量 可选 默认为1]
-	 * @param {String} options.direction [方向 可选 默认竖直 ] 取值vertical/horizontal
-	 * @param {String} options.order [顺序 可选 上下/下上/顺时针/逆时针 与方向配合使用 ] 取值+/-
-	 */
-	_createWallShaderSource(options) {
-		let op = options; //Cesium.defaultValue(options, {});
-		let count = op.count !== undefined && typeof op.count === 'number' && op.count > 0 ? op
-			.count : 1;
-		let direction = op.direction === 'horizontal' ? 'horizontal' : 'vertical';
-		let order = op.order === '+' ? '+' : '-';
-		let materail = 'czm_material czm_getMaterial(czm_materialInput materialInput){\n' +
-			'  czm_material material = czm_getDefaultMaterial(materialInput);\n' +
-			'  vec2 st = materialInput.st;\n' +
-			// if (direction === 'vertical') {
-			// 	materail += '  vec4 colorImage = texture2D(image, vec2(fract(float(' + count + ')*st.t ' + order +
-			// 		' time), st.t));\n';
-			// } else if (direction === 'horizontal') {
-			// 	materail += '  vec4 colorImage = texture2D(image, vec2(fract(float(' + count + ')*st.s ' + order +
-			// 		' time), st.t));\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 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;
-	}
-}
-
-/**
- * 添加默认属性
- */
-Object.defineProperties(WallMaterialProperty.prototype, {
-	/**
-	 * 判断是否相等，返回false表示属性一直在变化中
-	 */
-	isConstant: {
-		get: function() {
-			return false;
-		}
-	},
-	/**
-	 * 事件变更
-	 */
-	definitionChanged: {
-		get: function() {
-			return this._definitionChanged;
-		}
-	},
-	/* 颜色描述 */
-	color: Cesium.createPropertyDescriptor('color'),
-	image: Cesium.createPropertyDescriptor('image')
-})
-
-/* 导出 */
-export default WallMaterialProperty

src/components/jt-dialog/dialog-wall-edit.vue

@@ -7,6 +7,8 @@
 			v-model="dialogVisible"
 			:title="title"
 			:style="{ left: '120px', background: 'rgb(0 44 126 / 68%)', height: '400px', width: '180px', top: '100px' }"
+			@close="closeDialog"
+			@open="openDialog"
 		>
 			<template #header>
 				<div slot="title" class="header-title">
@@ -18,31 +20,37 @@
 				<div class="odin-dialog__content">
 					<div class="jt-wall-row">
 						<div class="col-left">高度</div>
-						<div class="col-main"><el-input v-model="wallHeight" placeholder="输入高度值" /></div>
+						<div class="col-main"><el-input v-model="wallHeight" placeholder="输入高度值" clearable /></div>
 					</div>
 					<div class="jt-wall-row">
 						<div class="col-left">颜色</div>
 						<div class="col-main"><el-color-picker v-model="color" show-alpha :predefine="predefineColors" /></div>
 					</div>
-					<div class="jt-wall-row">
+					<div class="jt-wall-row" v-show="isWallMaterial">
 						<div class="col-left">材质方向</div>
 						<div class="col-main">
-							<el-radio-group v-model="radioDirection"><el-radio-button v-for="(item, index) in directions" :label="item" /></el-radio-group>
+							<el-radio-group v-model="radioDirection">
+								<el-radio-button v-for="(item, index) in directions" :label="item.key" v-model="item.value" @change="directionChange" />
+							</el-radio-group>
 						</div>
 					</div>
-					<div class="jt-wall-row">
+					<div class="jt-wall-row" v-show="isWallMaterial">
 						<div class="col-left">流动顺序</div>
 						<div class="col-main">
-							<el-radio-group v-model="radioOrder"><el-radio-button v-for="(item, index) in orders" :label="item" /></el-radio-group>
+							<el-radio-group v-model="radioOrder"><el-radio-button v-for="(item, index) in orders" :label="item.key" v-model="item.value" /></el-radio-group>
 						</div>
 					</div>
-					<div class="jt-wall-row">
-						<div class="col-left">Y轴数量</div>
-						<div class="col-main"><el-input v-model="yCount" placeholder="输入1～100" /></div>
+					<div class="jt-wall-row" v-show="isWallMaterial">
+						<div class="col-left">重复数量</div>
+						<div class="col-main"><el-input v-model="yCount" placeholder="输入1～100" clearable /></div>
+					</div>
+					<div class="jt-wall-row" v-show="isTextMaterial" style="height: 60px;">
+						<div class="col-left">文字内容</div>
+						<div class="col-main"><el-input v-model="txtContent" placeholder="输入显示的文字内容" clearable type="textarea" :rows="2" /></div>
 					</div>
 					<div class="el-body-foot">
 						<el-button-group class="ml-4">
-							<el-button type="primary" :icon="Edit">修改</el-button>
+							<el-button type="primary" :icon="Edit" @click="submit()">修改</el-button>
 							<el-button type="danger" :icon="Delete">删除</el-button>
 						</el-button-group>
 					</div>
@@ -52,9 +60,49 @@
 	</div>
 </template>
 <script setup>
-import { ref } from 'vue';
+/* 引入ref和reactive 其中ref用于简单类型 reactive用于复杂类型 */
+import { ref, reactive, toRefs, watch } from 'vue';
 import { ElDialog } from 'element-plus';
 import { ArrowLeft, ArrowRight, Delete, Edit, Share } from '@element-plus/icons-vue';
+import { param } from 'jquery';
+const props = defineProps({
+	params: {
+		id: {
+			type: String,
+			default: () => undefined
+		},
+		height: {
+			type: Number,
+			default: () => 13
+		},
+		color: {
+			type: String,
+			default: () => '255,255,0,0.9'
+		},
+		direction: {
+			type: String,
+			default: () => 'horizontal'
+		},
+		order: {
+			type: String,
+			default: () => '+'
+		},
+		count: {
+			type: Number,
+			default: () => 2
+		},
+		text: {
+			type: String,
+			default: () => ''
+		}
+	},
+	showDialog: {
+		type: Boolean,
+		default: () => false
+	}
+});
+const emit = defineEmits(['submit', 'update:showDialog', 'update:params']);
+/* 默认颜色 */
 const predefineColors = ref([
 	'#ff4500',
 	'#ff8c00',
@@ -71,15 +119,127 @@ const predefineColors = ref([
 	'hsla(209, 100%, 56%, 0.73)',
 	'#c7158577'
 ]);
-const color = ref('rgba(255, 69, 0, 0.68)');
-const title = ref('墙编辑');
-const dialogVisible = ref(true);
-const directions = ref(['左右', '上下']);
-const radioDirection = ref(directions.value[1]);
-const orders = ref(['自上至下', '自下至上']);
-const radioOrder = ref(orders.value[0]);
-const wallHeight = ref(100);
-const yCount = ref(3);
+/* 初始赋值 */
+const isTextMaterial = ref(false);
+const isWallMaterial = ref(false);
+const color = ref(props.params.color);
+const title = ref('立体墙属性');
+const dialogVisible = ref(props.showDialog);
+const directions = reactive([{ key: '左右', value: 'horizontal' }, { key: '上下', value: 'vertical' }]);
+const orders = reactive([]);
+const radioDirection = ref('');
+const radioOrder = ref('');
+const wallHeight = ref(0);
+const yCount = ref(0);
+const txtContent = ref('');
+/* 根据传递的属性更新 */
+updateParams(props.params);
+
+/* 监听参数的变化 */
+watch(
+	() => props.showDialog,
+	(newVal, oldVal) => {
+		dialogVisible.value = newVal;
+	}
+);
+watch(props.params, (newVal, oldVal) => {
+	updateParams(newVal);
+});
+
+/**
+ * 根据参数更新内容
+ * @param {JSON} params 参数
+ */
+function updateParams(params) {
+	/* 根据参数的显示不同的内容 */
+	if (params.id === 'TextMaterial') {
+		isTextMaterial.value = true;
+		isWallMaterial.value = false;
+	} else if (params.id === 'WallMaterial') {
+		isTextMaterial.value = false;
+		isWallMaterial.value = true;
+	} else {
+		isTextMaterial.value = false;
+		isWallMaterial.value = false;
+	}
+	color.value = params.color;
+	/* 判断方向及顺序 */
+	if (params.direction === 'horizontal') {
+		radioDirection.value = directions[0].key;
+		Object.assign(orders, [{ key: '自左至右', value: '+' }, { key: '自右至左', value: '-' }]);
+		if (params.order === '+') {
+			radioOrder.value = orders[0].key;
+		} else {
+			radioOrder.value = orders[1].key;
+		}
+	} else {
+		radioDirection.value = directions[1].key;
+		Object.assign(orders, [{ key: '自上至下', value: '+' }, { key: '自下至上', value: '-' }]);
+		if (params.order === '+') {
+			radioOrder.value = orders[0].key;
+		} else {
+			radioOrder.value = orders[1].key;
+		}
+	}
+	wallHeight.value = params.height;
+	yCount.value = params.count;
+	txtContent.value = params.text;
+}
+
+/**
+ * 对外部公开的函数
+ */
+defineExpose({
+	updateParams
+});
+
+/**
+ * 提交更改
+ */
+function submit() {
+	emit('submit', {
+		id: props.params.id,
+		height: wallHeight.value,
+		color: color.value,
+		direction: directions.filter(item => {
+			return item.key === radioDirection.value;
+		})[0].value,
+		order: orders.filter(item => {
+			return item.key === radioOrder.value;
+		})[0].value,
+		count: yCount.value,
+		text: txtContent.value
+	});
+	dialogVisible.value = false;
+}
+
+/**
+ * 材质方向选择事件
+ * @param {Object} e
+ */
+function directionChange(e) {
+	if (e.target.value === directions[0].key) {
+		Object.assign(orders, [{ key: '自左至右', value: '+' }, { key: '自右至左', value: '-' }]);
+		radioOrder.value = orders[0].key;
+	} else if (e.target.value === directions[1].key) {
+		Object.assign(orders, [{ key: '自上至下', value: '+' }, { key: '自下至上', value: '-' }]);
+		radioOrder.value = orders[0].key;
+	}
+}
+
+/**
+ * 窗口关闭，修改双向绑定值
+ */
+function closeDialog() {
+	emit('update:showDialog', false);
+}
+
+/**
+ * 窗口打开
+ */
+function openDialog() {
+	updateParams(props.params);
+}
 </script>
 <style lang="scss">
 /* 墙对话框内容行样式 */

src/pages/tab-cmap.vue

@@ -1,5 +1,5 @@
 <template>
-	<CrMap ref="cmap"></CrMap>
+	<CrMap ref="cmap" @onEditWall="onEditWall"></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>
@@ -44,44 +44,58 @@
 			</div>
 		</div>
 	</van-popup>
-	<jtDialog class="jt-tools-dialog" :showDialog="showDialog" title="图形编辑" height="500px" width="300px" @closeJTDialog="closeDialog">
+	<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-avatar shape="circle" :size="50" style="background-color: bisque;"><i class="app-icon app-icon-draw-line" /></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-avatar shape="circle" :size="50" style="background-color: azure;"><i class="app-icon app-icon-draw-polygon" /></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-avatar shape="circle" :size="50" style="background-color: bisque;"><i class="app-icon app-icon-draw-sline" /></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-avatar shape="circle" :size="50" style="background-color: bisque;"><i class="app-icon app-icon-draw-rectangle" /></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-avatar shape="circle" :size="50" style="background-color: azure;"><i class="app-icon app-icon-draw-circle" /></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 :span="8" @click="this.$refs['cmap'].onMouseDrawDynamicEditWall()">
+				<el-avatar shape="circle" :size="50" style="background-color: bisque;"><i class="app-icon app-icon-draw-dwall" /></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 :span="8" @click="this.$refs['cmap'].onMouseDrawColorEditWall()">
+				<el-avatar shape="circle" :size="50" style="background-color: bisque;"><i class="app-icon app-icon-draw-wall" /></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 :span="8" @click="this.$refs['cmap'].onMouseDrawEditText()">
+				<el-avatar shape="circle" :size="50" style="background-color: azure;"><i class="app-icon app-icon-draw-text" /></el-avatar>
+				<cite>广告牌</cite>
+			</el-col>
+			<el-col :span="8" @click="this.$refs['cmap'].onMouseDrawDynamicCircle()">
+				<el-avatar shape="circle" :size="50" style="background-color: bisque;"><i class="app-icon app-icon-draw-circle" /></el-avatar>
+				<cite>动态圆</cite>
+			</el-col>
+		</el-row>
+		<el-row :gutter="20">
+			<el-col :span="8" @click="this.$refs['cmap'].onMouseDrawColorEditWall()">
+				<el-avatar shape="circle" :size="50" style="background-color: bisque;"><i class="app-icon app-icon-draw-wall" /></el-avatar>
+				<cite>普通墙11</cite>
+			</el-col>
+			<el-col :span="8" @click="this.$refs['cmap'].onMouseDrawEditText()">
+				<el-avatar shape="circle" :size="50" style="background-color: azure;"><i class="app-icon app-icon-draw-text" /></el-avatar>
+				<cite>广告牌11</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>
@@ -91,7 +105,7 @@
 	</jtDialog>
 
 	<!-- 墙的编辑框 -->
-	<jtWallDialog></jtWallDialog>
+	<jtWallDialog ref="wallEditDialog" :params="wallparam" @submit="submit" v-model:showDialog="showWallDialog"></jtWallDialog>
 </template>
 <script setup>
 import { Dialog } from 'vant';
@@ -126,7 +140,17 @@ export default {
 			},
 			height: 120,
 			dialogVisible: false,
-			showDialog: false
+			showDialog: false,
+			wallparam: {
+				id: undefined,
+				height: 20,
+				color: 'rgba(255,0,255,0.8)',
+				direction: 'horizontal',
+				order: '-',
+				count: 2,
+				text: ''
+			},
+			showWallDialog: false
 		};
 	},
 	/* 创建 */
@@ -279,7 +303,9 @@ export default {
 					_self.$refs['cmap'].onQueryByPolygon();
 					break;
 				case 'queryByPoint':
-					_self.$refs['cmap'].onQueryByPoint();
+					// _self.$refs['cmap'].onQueryByPoint();
+					_self.showWallDialog = true;
+					console.log(this.showWallDialog);
 					break;
 				case 'queryByMultiplePoint':
 					_self.$refs['cmap'].onQueryByMultiplePoint();
@@ -363,6 +389,35 @@ export default {
 
 		closeDialog() {
 			this.showDialog = false;
+		},
+
+		/**
+		 * 墙的编辑调用
+		 * @param {JSON} param 传递的编辑参数
+		 */
+		onEditWall(param) {
+			/* 打开对话框 */
+			this.showWallDialog = true;
+			/* 赋值参数 */
+			this.wallparam.id = param.id;
+			this.wallparam.color = param.color;
+			this.wallparam.count = param.count;
+			this.wallparam.height = param.height;
+			this.wallparam.direction = param.direction;
+			this.wallparam.order = param.order;
+			this.wallparam.text = param.text;
+			/* 更新显示 */
+			this.$refs['wallEditDialog'].updateParams(this.wallparam);
+			console.log('======>>>>>>>>>>>>', param);
+		},
+
+		/**
+		 * 提交更改
+		 * @param {JSON} param 参数
+		 */
+		submit(param) {
+			console.log(param);
+			this.$refs['cmap'].onSubmitEditWall(param);
 		}
 	}
 };