1、配置通用参数，修改全部绘制项（以通用参数为依据）

2、增加传递参数项（属性修改），使用OD线的属性修改
3、增加选中实体的删除功能
4、优化属性传递及修改方式，将实体的全部属性存储于当前编辑实体中
5、完成OD线的绘制、编辑及属性样式修改
6、修改视频墙的坐标轴修改方式，增加视频墙的属性编辑能力

src/assets/fonts/fonts.css

@@ -116,52 +116,82 @@
 
 /* 绘制贴地线图标 */
 .app-icon-draw-line::before {
-	content: '\e6ff';
+	content: '\e712';
 }
 
-/* 绘制空间图标 */
+/* 绘制箭头线图标 */
+.app-icon-draw-arrow-line::before {
+	content: '\e704';
+}
+
+/* 绘制描边线图标 */
+.app-icon-draw-outline-line::before {
+	content: '\e706';
+}
+
+/* 绘制发光线图标 */
+.app-icon-draw-grow-line::before {
+	content: '\e708';
+}
+
+/* 绘制动态图标 */
+.app-icon-draw-dynamic-line::before {
+	content: '\e70a';
+}
+
+/* 绘制空间线图标 */
 .app-icon-draw-sline::before {
-	content: '\e6f9';
+	content: '\e70c';
 }
 
 /* 绘制贴地面图标 */
 .app-icon-draw-polygon::before {
-	content: '\e6eb';
+	content: '\e70f';
 }
 
 /* 绘制矩形图标 */
 .app-icon-draw-rectangle::before {
-	content: '\e6fd';
+	content: '\e705';
 }
 
 /* 绘制圆图标 */
 .app-icon-draw-circle::before {
-	content: '\e6fa';
+	content: '\e709';
+}
+
+/* 绘制动态圆图标 */
+.app-icon-draw-dynamic-circle::before {
+	content: '\e710';
+}
+
+/* 绘制OD线 */
+.app-icon-draw-odline::before {
+	content: '\e703';
 }
 
 /* 绘制动态墙图标 */
 .app-icon-draw-dwall::before {
-	content: '\e6fb';
+	content: '\e711';
 }
 
 /* 绘制墙图标 */
 .app-icon-draw-wall::before {
-	content: '\e8d0';
+	content: '\e70d';
 }
 
 /* 绘制墙图标 */
 .app-icon-draw-text::before {
-	content: '\e732';
+	content: '\e70e';
 }
 
 /* 绘制房屋图标 */
 .app-icon-draw-house::before {
-	content: '\e700';
+	content: '\e707';
 }
 
 /* 绘制视频墙 */
 .app-icon-draw-video::before {
-	content: '\e67b';
+	content: '\e70b';
 }
 
 /* 标绘工具 */

src/components/CrMap/CrMap.vue

@@ -314,6 +314,13 @@ defineExpose({
 	},
 
 	/**
+	 * 删除当前编辑的实体
+	 */
+	onRemoveEditEntity: function() {
+		proxy.drawTools.removeEditEntity();
+	},
+
+	/**
 	 * 旋转实体
 	 */
 	onRotationEntity: function() {
@@ -364,7 +371,7 @@ onMounted(() => {
 
 	/* 创建监听 */
 	proxy.drawTools.onEditProperty = param => {
-		console.log('===调用编辑代理>>>', param);
+		// console.log('===调用编辑代理>>>', param);
 		emit('onEditProperty', param);
 	};
 

src/components/CrMap/WallMaterialProperty.js

@@ -35,7 +35,7 @@ class WallMaterialProperty {
 		/* 默认时间 */
 		this._time = (new Date()).getTime();
 		/* 材质类型名称 */
-		this._materialTypeName = 'jtWallMaterial'
+		this._materialTypeName = 'WallMaterial' + this._guid();
 		/* 存储相关参数的属性 以便后期进行追踪修改 */
 		this._param = {
 			color: this.color._value.toCssColorString(),
@@ -64,6 +64,16 @@ class WallMaterialProperty {
 	}
 
 	/**
+	 * 生成GUID随机数
+	 */
+	_guid() {
+		function S4() {
+			return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+		}
+		return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
+	}
+
+	/**
 	 * 重新获取类型方法
 	 * @param {Cesium.JulianDate} time 时间
 	 */
@@ -95,7 +105,9 @@ class WallMaterialProperty {
 	 */
 	equals(other) {
 		return (this === other || (other instanceof WallMaterialProperty && Cesium.Property.equals(this
-			._color, other._color)));
+				._color, other._color) && other._param.order === this._param.order && other._param.count ===
+			this._param.count && other._param.direction === this._param.direction && other.duration === this
+			.duration));
 	}
 
 	/**
@@ -122,15 +134,14 @@ class WallMaterialProperty {
 			'  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';
+			materail += '  vec4 colorImage = texture2D(image,vec2(st.s,fract(float(' + count + ')*st.t ' + order +
+				' time)));\n';
 		} else if (direction === 'horizontal') {
 			materail += '  vec4 colorImage = texture2D(image, vec2(fract(float(' + count + ')*st.s ' + order +
 				' time), st.t));\n'
 		}
 		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/jt-dialog/dialogEditProperty.vue

@@ -22,6 +22,10 @@
 						<div class="col-left">高度</div>
 						<div class="col-main"><el-input v-model="wallHeight" placeholder="输入高度值" clearable /></div>
 					</div>
+					<div class="jt-wall-row" v-show="isShowArcHeight">
+						<div class="col-left">弯曲度</div>
+						<div class="col-main"><el-input v-model="arcHeight" placeholder="输入弯曲度0～9000" clearable /></div>
+					</div>
 					<div class="jt-wall-row" v-show="isShowLineWidth">
 						<div class="col-left">线宽</div>
 						<div class="col-main"><el-input v-model="lineWidth" placeholder="输入宽度值" clearable /></div>
@@ -50,6 +54,12 @@
 							<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" v-show="isShowSpeed">
+						<div class="col-left">流动速度</div>
+						<div class="col-main">
+							<div class="col-main"><el-input v-model="speed" placeholder="输入流动速度0～10" clearable /></div>
+						</div>
+					</div>
 					<div class="jt-wall-row" v-show="isShowCount">
 						<div class="col-left">重复数量</div>
 						<div class="col-main"><el-input v-model="yCount" placeholder="输入1～100" clearable /></div>
@@ -68,10 +78,14 @@
 							<el-config-provider :locale="locale"><el-color-picker v-model="outlineColor" show-alpha :predefine="predefineColors" label="12" /></el-config-provider>
 						</div>
 					</div>
+					<div class="jt-wall-row" v-show="isShowVideoUrl" style="height: 100px;">
+						<div class="col-left">文字内容</div>
+						<div class="col-main"><el-input v-model="txtVideoUrl" 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" @click="submit()">修改</el-button>
-							<el-button type="danger" :icon="Delete">删除</el-button>
+							<el-button type="danger" :icon="Delete" @click="remove()">删除</el-button>
 						</el-button-group>
 					</div>
 				</div>
@@ -136,6 +150,18 @@ const props = defineProps({
 		outlineColor: {
 			type: String,
 			default: () => '255,255,0,0.9'
+		},
+		speed: {
+			type: Number,
+			default: () => 1.5
+		},
+		videoUrl: {
+			type: String,
+			default: () => ''
+		},
+		arcHeight: {
+			type: Number,
+			default: () => 1000
 		}
 	},
 	showDialog: {
@@ -143,7 +169,7 @@ const props = defineProps({
 		default: () => false
 	}
 });
-const emit = defineEmits(['submit', 'update:showDialog', 'update:params']);
+const emit = defineEmits(['submit', 'update:showDialog', 'update:params', 'remove']);
 /* 默认颜色 */
 const predefineColors = ref([
 	'#ff4500',
@@ -173,6 +199,9 @@ const isShowLineWidth = ref(false);
 const isShowGlowpower = ref(false);
 const isShowOutlineWidth = ref(false);
 const isShowOutlineColor = ref(false);
+const isShowSpeed = ref(false);
+const isShowVideoUrl = ref(false);
+const isShowArcHeight = ref(false);
 const color = ref(props.params.color);
 const title = ref('属性编辑');
 const dialogVisible = ref(props.showDialog);
@@ -187,6 +216,9 @@ const lineWidth = ref(0);
 const glowPower = ref(0.25);
 const outlineWidth = ref(0);
 const outlineColor = ref(props.params.outlineColor);
+const speed = ref(1.5);
+const txtVideoUrl = ref('');
+const arcHeight = ref(1000);
 /* 根据传递的属性更新 */
 updateParams(props.params);
 
@@ -220,6 +252,7 @@ function updateParams(params) {
 		isShowOrder.value = true;
 		isShowCount.value = true;
 		isShowHeight.value = true;
+		isShowSpeed.value = true;
 	} else if (params.id === DrawTools.DrawType.NormalWall) {
 		title.value = '普通围栏编辑';
 		isShowColor.value = true;
@@ -233,12 +266,15 @@ function updateParams(params) {
 		title.value = '扩散圆编辑';
 		isShowColor.value = true;
 		isShowCount.value = true;
+		isShowSpeed.value = true;
 	} else if (params.id === DrawTools.DrawType.House) {
 		title.value = '房屋编辑';
 		isShowColor.value = true;
 		isShowHeight.value = true;
 	} else if (params.id === DrawTools.DrawType.VideoWall) {
 		title.value = '视频墙编辑';
+		isShowHeight.value = true;
+		isShowVideoUrl.value = true;
 	} else if (params.id === DrawTools.DrawType.Polyline) {
 		title.value = '贴地线编辑';
 		isShowColor.value = true;
@@ -253,12 +289,13 @@ function updateParams(params) {
 		isShowOrder.value = true;
 		isShowCount.value = true;
 		isShowLineWidth.value = true;
+		isShowSpeed.value = true;
 	} else if (params.id === DrawTools.DrawType.GrowPolyline) {
 		title.value = '发光线编辑';
 		isShowColor.value = true;
 		isShowLineWidth.value = true;
 		isShowGlowpower.value = true;
-	} else if (params.id === DrawTools.DrawType.OultliePolyline) {
+	} else if (params.id === DrawTools.DrawType.OutlinePolyline) {
 		title.value = '描边线编辑';
 		isShowColor.value = true;
 		isShowLineWidth.value = true;
@@ -269,8 +306,8 @@ function updateParams(params) {
 		isShowColor.value = true;
 		isShowOutlineColor.value = true;
 		isShowOutlineWidth.value = true;
-	} else if (params.id === DrawTools.DrawType.Polygon) {
-		title.value = '贴地面编辑';
+	} else if (params.id === DrawTools.DrawType.Rectangle) {
+		title.value = '矩形编辑';
 		isShowColor.value = true;
 		isShowOutlineColor.value = true;
 		isShowOutlineWidth.value = true;
@@ -278,8 +315,15 @@ function updateParams(params) {
 		title.value = '空间线编辑';
 		isShowColor.value = true;
 		isShowLineWidth.value = true;
+	} else if (params.id === DrawTools.DrawType.OdLine) {
+		title.value = 'OD线编辑';
+		isShowSpeed.value = true;
+		isShowColor.value = true;
+		isShowLineWidth.value = true;
+		isShowOrder.value = true;
+		isShowArcHeight.value = true;
 	} else {
-		_setShowControls(true);
+		_setShowControls(false);
 	}
 	color.value = params.color;
 	/* 判断方向及顺序 */
@@ -300,13 +344,25 @@ function updateParams(params) {
 			radioOrder.value = orders[1].key;
 		}
 	}
-	wallHeight.value = params.height;
+	/* 单独更改 */
+	if (params.id === DrawTools.DrawType.OdLine) {
+		Object.assign(orders, [{ key: '汇聚', value: '+' }, { key: '扩散', value: '-' }]);
+		if (params.order === '+') {
+			radioOrder.value = orders[0].key;
+		} else {
+			radioOrder.value = orders[1].key;
+		}
+	}
+	wallHeight.value = parseFloat(params.height).toFixed(2);
 	yCount.value = params.count;
 	txtContent.value = params.text;
 	lineWidth.value = params.lineWidth;
 	glowPower.value = params.power;
 	outlineColor.value = params.outlineColor;
 	outlineWidth.value = params.outlineWidth;
+	speed.value = (parseFloat(params.duration) / 1000).toFixed(2);
+	txtVideoUrl.value = params.videoUrl;
+	arcHeight.value = params.odlineHeight;
 	// console.log('===设置参数显示>>>', params.lineWidth);
 }
 
@@ -325,6 +381,8 @@ function _setShowControls(isShow) {
 	isShowGlowpower.value = isShow;
 	isShowOutlineColor.value = isShow;
 	isShowOutlineWidth.value = isShow;
+	isShowSpeed.value = isShow;
+	isShowVideoUrl.value = isShow;
 }
 
 /**
@@ -353,12 +411,23 @@ function submit() {
 		lineWidth: lineWidth.value,
 		power: glowPower.value,
 		outlineColor: outlineColor.value,
-		outlineWidth: outlineWidth.value
+		outlineWidth: outlineWidth.value,
+		duration: speed.value * 1000,
+		videoUrl: txtVideoUrl.value,
+		odlineHeight: arcHeight.value
 	});
 	dialogVisible.value = false;
 }
 
 /**
+ * 提交删除
+ */
+function remove() {
+	emit('remove', {});
+	dialogVisible.value = false;
+}
+
+/**
  * 材质方向选择事件
  * @param {Object} e
  */

src/demo.html

@@ -18,6 +18,7 @@
 			}
 
 			.jt-draw-tools-main .top-head {
+				position: relative;
 				width: 100%;
 				height: 40px;
 				background-color: rgb(0, 0, 191);
@@ -28,35 +29,28 @@
 				font-size: 15px;
 			}
 
-			.jt-draw-tools-main .top-head:after {
-				width: 100%;
+			.jt-draw-tools-main .top-head::before,
+			.jt-draw-tools-main .top-head::after {
 				position: absolute;
-				height: 1.5px;
+				content: '';
+				width: 2px;
+				height: 12px;
 				background: #fff;
-				content: "";
-				top: 9px;
-				left: 0;
-				transform: rotate(134deg);
-				-ms-transform: rotate(134deg);
-				-moz-transform: rotate(134deg);
-				-webkit-transform: rotate(134deg);
-				-o-transform: rotate(134deg);
+				right: 15px;
+			}
 
+			.jt-draw-tools-main .top-head:hover::before,
+			.jt-draw-tools-main .top-head:hover::after {
+				background: rgb(255, 0, 0);
+				cursor: pointer;
 			}
 
-			.jt-draw-tools-main .top-head:before {
-				width: 100%;
-				position: absolute;
-				height: 1.5px;
-				background: #fff;
-				content: "";
-				top: 9px;
-				right: 0;
+			.jt-draw-tools-main .top-head::before {
 				transform: rotate(45deg);
-				-ms-transform: rotate(45deg);
-				-moz-transform: rotate(45deg);
-				-webkit-transform: rotate(45deg);
-				-o-transform: rotate(45deg);
+			}
+
+			.jt-draw-tools-main .top-head::after {
+				transform: rotate(-45deg);
 			}
 
 			.jt-draw-tools-main .content {
@@ -69,75 +63,12 @@
 	<body>
 		<button onclick="test()">测试</button>
 		<button onclick="test1111()">测试1111</button>
-		<!-- <div class="jt-draw-tools-main">
+		<div class="jt-draw-tools-main">
 			<div class="top-head">编辑框</div>
 			<div class="content"></div>
-		</div> -->
-		<canvas id="canvas"></canvas>
-		<div id="viewText">mmmm</div>
+		</div>
 	</body>
 </html>
 <script>
-	if (typeof(Worker) !== "undefined") {
-		console.log('支持 Web worker！');
-	} else {
-		console.log('抱歉！不支持 Web Worker！');
-	}
-
-	let viewText = document.getElementById('viewText');
-	let canvas = document.getElementById('canvas');
-	canvas.width = 256;
-	canvas.height = 256;
-	let context = canvas.getContext('2d');
-
-
-	function test() {
-		let worker = new Worker('./worker/worker_demo.js');
-		worker.onmessage = function(event) {
-			console.log(event.data);
-			context.drawImage(event.data, 0, 0, 256, 256);
-		}
-		worker.postMessage({
-			url: 'http://218.59.194.74:6080/arcgis/rest/services/LYLSQ_YX_102100_202210/MapServer/tile/15/12953/27142'
-		})
-	}
-
-	let res = [{
-			x: 1,
-			y: 1,
-			level: 3
-		}, {
-			x: 1,
-			y: 2,
-			level: 5,
-		},
-		{
-			x: 1,
-			y: 1,
-			level: 5,
-		}
-	]
-
-	let mmm = {
-		x: 1,
-		y: 1,
-		level: 3
-	}
-
-	function test1111() {
-		let mks = [];
-		for (let i = 0; i < res.length; i++) {
-			let aaa = res[i];
-			let sub = mks.find(obj => {
-				return obj.x === aaa.x && obj.y === aaa.y;
-			})
-			if (sub === undefined) {
-				mks.push(aaa);
-			}
-		}
-		console.log('执行...');
-		console.log(mks)
-
 
-	}
 </script>

src/pages/tab-cmap.vue

@@ -16,7 +16,7 @@
 	</jtDialog>
 
 	<!-- 墙的编辑框 -->
-	<dialogEditProperty ref="dialogEdit" :params="editParams" @submit="submit" v-model:showDialog="showEditDialog"></dialogEditProperty>
+	<dialogEditProperty ref="dialogEdit" :params="editParams" @submit="submit" @remove="remove" v-model:showDialog="showEditDialog"></dialogEditProperty>
 </template>
 <script setup>
 import { Dialog } from 'vant';
@@ -190,42 +190,42 @@ export default {
 			message: '绘制贴地线'
 		});
 		this.dynamicDrawTools.push({
-			iconName: 'app-icon app-icon-draw-line',
+			iconName: 'app-icon app-icon-draw-arrow-line',
 			title: '箭头线',
 			id: 'arrowLine',
 			message: '绘制箭头线'
 		});
 		this.dynamicDrawTools.push({
-			iconName: 'app-icon app-icon-draw-line',
+			iconName: 'app-icon app-icon-draw-dynamic-line',
 			title: '流动线',
 			id: 'dynamicLine',
 			message: '绘制流动线'
 		});
 		this.dynamicDrawTools.push({
-			iconName: 'app-icon app-icon-draw-line',
+			iconName: 'app-icon app-icon-draw-grow-line',
 			title: '发光线',
 			id: 'glowLine',
 			message: '绘制发光线'
 		});
 		this.dynamicDrawTools.push({
-			iconName: 'app-icon app-icon-draw-line',
+			iconName: 'app-icon app-icon-draw-outline-line',
 			title: '描边线',
 			id: 'outlineLine',
 			message: '绘制描边线'
 		});
 		this.dynamicDrawTools.push({
-			iconName: 'app-icon app-icon-draw-polygon',
-			title: '贴地面',
-			id: 'layPolygon',
-			message: '绘制贴地面'
-		});
-		this.dynamicDrawTools.push({
 			iconName: 'app-icon app-icon-draw-sline',
 			title: '空间线',
 			id: 'spatialLine',
 			message: '绘制空间线'
 		});
 		this.dynamicDrawTools.push({
+			iconName: 'app-icon app-icon-draw-polygon',
+			title: '贴地面',
+			id: 'layPolygon',
+			message: '绘制贴地面'
+		});
+		this.dynamicDrawTools.push({
 			iconName: 'app-icon app-icon-draw-rectangle',
 			title: '贴地矩形',
 			id: 'layRectangle',
@@ -238,7 +238,7 @@ export default {
 			message: '绘制贴地圆'
 		});
 		this.dynamicDrawTools.push({
-			iconName: 'app-icon app-icon-draw-circle',
+			iconName: 'app-icon app-icon-draw-dynamic-circle',
 			title: '扩散圆',
 			id: 'dynamicCircle',
 			message: '绘制扩散圆'
@@ -274,7 +274,7 @@ export default {
 			message: '绘制视频墙'
 		});
 		this.dynamicDrawTools.push({
-			iconName: 'app-icon app-icon-draw-video',
+			iconName: 'app-icon app-icon-draw-odline',
 			title: 'OD线',
 			id: 'odLine',
 			message: '绘制OD线'
@@ -446,8 +446,15 @@ export default {
 		 * @param {JSON} param 参数
 		 */
 		submit(param) {
-			// console.log(param);
+			// console.log('===>>>对话框提交的参数', param);
 			this.$refs['cmap'].onSubmitEditProperty(param);
+		},
+
+		/**
+		 * 移除实体
+		 */
+		remove() {
+			this.$refs['cmap'].onRemoveEditEntity();
 		}
 	}
 };