no message

src/components/CrMap/CircleMaterialProperty.js

@@ -47,7 +47,7 @@ class CircleMaterialProperty {
 					color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
 					count: 1.0,
 				},
-				source: this._getCircleMaterial(),
+				source: this._getCircleMaterial_1(),
 			},
 			translucent: function(material) {
 				/* 材质是否半透明 */
@@ -56,113 +56,96 @@ class CircleMaterialProperty {
 		});
 	}
 
+	_getCircleLdSource() {
+		let source = `
+		    #define PI 3.14159265359
+		    czm_material czm_getMaterial(czm_materialInput materialInput){
+		    czm_material material = czm_getDefaultMaterial(materialInput);
+		    vec2 st = materialInput.st;
+		    vec2 scrPt = st * 2.0 - 1.0;
+		    float time = czm_frameNumber * 15.0 / 1000.0 ;
+		    vec3 col = vec3(0.0);
+		    mat2 rot;
+		    float theta = -time * 1.0 * PI - 2.2;
+		    float cosTheta, sinTheta;
+		    cosTheta = cos(theta);
+		    sinTheta = sin(theta);
+		    rot[0][0] = cosTheta;
+		    rot[0][1] = -sinTheta;
+		    rot[1][0] = sinTheta;
+		    rot[1][1] = cosTheta;
+		    vec2 scrPtRot = rot * scrPt;
+		    float angle = 1.0 - (atan(scrPtRot.y, scrPtRot.x) / 6.2831 + 0.5);
+		    float falloff = length(scrPtRot);
+		    material.alpha = pow(length(col + vec3(.5)),5.0);
+		    material.diffuse =  (0.5 +  pow(angle, 2.0) * falloff ) *   color.rgb    ;
+		    return material;
+		    }
+		     `
+		return source;
+	}
+
 	/**
 	 * 获取材质着色器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" +
-		// 	"}";
+	_getCircleMaterial_1() {
+		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(czm_frameNumber * 10.0 / 1000.0);\n" +
+			"  if(dis > 0.49*per && dis < 0.50*per){\n" +
+			"     discard;//material.diffuse = vec3(0.0,0.0,1.0);\n" +
+			"  } else {\n" +
+			"     material.diffuse = color.rgb;\n" +
+			"  }\n" +
+			// "  material.diffuse = vec3(dis*2.0,0,0);\n" +
+			"  return material;\n" +
+			"}\n";
+		return circleMaterial;
+	}
 
-		//真正意义上的圆环扩散
+	/**
+	 * 获取材质着色器Shader
+	 */
+	_getCircleMaterial_n_w() {
 		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" +
+			"  material.diffuse = 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" +
+			"  float per = fract(czm_frameNumber * 10.0 / 1000.0);\n" +
+			"  if(dis > per * 0.5){\n" +
+			"    discard;\n" +
+			"  } else {\n" +
+			"    material.alpha = color.a * dis * 1.6 ;\n" +
 			"  }\n" +
-			"  if (dis > 0.5)\n" +
-			"  {\n" +
-			"     //超出半径范围时，着色器渲染停止  \n" +
-			"     discard;\n" +
+			// "  material.diffuse = vec3(dis*2.0,0,0);\n" +
+			"  return material;\n" +
+			"}\n";
+		return circleMaterial;
+	}
+
+	/**
+	 * 获取材质着色器Shader
+	 */
+	_getCircleMaterial() {
+		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(czm_frameNumber * 10.0 / 1000.0);\n" +
+			"  if((0.5 - dis) < per * 0.5){\n" +
+			"    discard;\n" +
 			"  } else {\n" +
-			"     //把半径分成count份，每两份之间的间隔距离  \n" +
-			"     float perDis = 0.5 / count;\n" +
-			"     float disNum;\n" +
-			"     float bl = 0.0;\n" +
-			"     //循环，最多999个环  \n" +
-			"     for (int i = 0; i <= 999; i++)\n" +
-			"     {\n" +
-			"        //判断是否属于数量内的环  \n" +
-			"        if (float(i) <= count)\n" +
-			"        {\n" +
-			"           disNum = perDis * float(i) - dis + per / count;\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 = color.a * pow(bl, 3.0);\n" +
-			"           }\n" +
-			"        }\n" +
-			"     }\n" +
+			"    material.alpha = color.a * dis * 1.6 ;\n" +
 			"  }\n" +
+			// "  material.diffuse = vec3(dis*2.0,0,0);\n" +
 			"  return material;\n" +
 			"}\n";
 		return circleMaterial;
@@ -235,4 +218,4 @@ Object.defineProperties(CircleMaterialProperty.prototype, {
 })
 
 /* 导出 */
-export default CircleMaterialProperty;
+export default CircleMaterialProperty;

src/components/CrMap/CrMap.js

@@ -8,6 +8,8 @@ import ArcgisImageryProvider from './ArcgisImageryProvider.js';
 /* 引入自定义图层 */
 import CrImageServerLayer from './CrImageServerLayer.js';
 
+import CircleMaterialProperty from './CircleMaterialProperty.js'
+
 // /* 扩展更改属性 */
 // Cesium.TileCoordinatesImageryProvider.prototype.requestImage = function(
 // 	x,
@@ -1011,6 +1013,29 @@ Object.assign(CrMap.prototype, {
 
 });
 
+/**
+ * 测试方法
+ */
+Object.assign(CrMap.prototype, {
+	drawCircle: function() {
+		let material = new CircleMaterialProperty({
+			viewer: this._viewer,
+			color: Cesium.Color.RED
+		})
+		let entity = new Cesium.Entity({
+			position: new Cesium.Cartesian3(-2479548.303203922, 4593615.644215526, 3652689.0542514934),
+			ellipse: {
+				semiMajorAxis: 8732.209958374482,
+				semiMinorAxis: 8732.209958374482,
+				classificationType: Cesium.ClassificationType.BOTH,
+				material: material
+			}
+		})
+
+		this._viewer.entities.add(entity);
+	}
+})
+
 
 /* 扩展全局方法 */
 
@@ -1030,4 +1055,4 @@ CrMap.LayerType = Object.freeze({
 /* 输出 */
 export {
 	CrMap
-}
+}

src/components/CrMap/CrMap.vue

@@ -1,588 +1,605 @@
-<template>
-	<div id="cesiumContainer" class="jt-map"></div>
-	<div class="jt-map-tools">
-		<button @click="openFloatLayer()">打开浮动图层</button>
-		<button @click="closeFloatLayer()">关闭浮动图层</button>
-	</div>
-</template>
-<script setup>
-import { param } from 'jquery';
-import { defineExpose, onMounted, getCurrentInstance } from 'vue';
-/* 注册方法 */
-const emit = defineEmits(['onEditProperty']);
-
-import { CrMap } from './CrMap.js';
-import CommonTools from './CommonTools.js';
-import { SketchViewModel } from './SketchViewModel.js';
-
-import { DrawTools } from './DrawTools.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();
-	},
-	/* 清理资源 */
-	onToolsClear: 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.drawTools.Clear();
-	},
-
-	/**
-	 * 鼠标点击绘制可编辑贴地线
-	 */
-	onMouseDrawEditLine: function() {
-		proxy.drawTools.draw(DrawTools.DrawType.Polyline, {
-			isEdit: true
-		});
-	},
-
-	/**
-	 * 鼠标点击绘制可编辑贴地箭头线
-	 */
-	onMouseDrawEditArrowLine: function() {
-		proxy.drawTools.draw(DrawTools.DrawType.ArrowPolyline, {
-			isEdit: true
-		});
-	},
-
-	/**
-	 * 鼠标点击绘制可编辑贴地发光线
-	 */
-	onMouseDrawEditGrawLine: function() {
-		proxy.drawTools.draw(DrawTools.DrawType.GrowPolyline, {
-			isEdit: true
-		});
-	},
-
-	/**
-	 * 鼠标点击绘制可编辑贴地动态
-	 */
-	onMouseDrawEditDynamicLine: function() {
-		proxy.drawTools.draw(DrawTools.DrawType.DynamicPolyline, {
-			isEdit: true
-		});
-	},
-
-	/**
-	 * 鼠标点击绘制可编辑贴地描边线
-	 */
-	onMouseDrawEditOutlineLine: function() {
-		proxy.drawTools.draw(DrawTools.DrawType.OultliePolyline, {
-			isEdit: true
-		});
-	},
-
-	/**
-	 * 鼠标点击绘制可编辑贴地面
-	 */
-	onMouseDrawEditPolygon: function() {
-		proxy.drawTools.draw(DrawTools.DrawType.Polygon, {
-			isEdit: true
-		});
-	},
-
-	/**
-	 * 鼠标点击绘制可编辑矩形
-	 */
-	onMouseDrawEditRectangle: function() {
-		proxy.drawTools.draw(DrawTools.DrawType.Rectangle, {
-			isEdit: true
-		});
-	},
-
-	/**
-	 * 鼠标点击绘制可编辑圆
-	 */
-	onMouseDrawEditCircle: function() {
-		proxy.drawTools.draw(DrawTools.DrawType.Circle, {
-			isEdit: true
-		});
-	},
-
-	/**
-	 * 鼠标点击绘制可编辑动态墙
-	 */
-	onMouseDrawDynamicEditWall: function() {
-		proxy.drawTools.draw(DrawTools.DrawType.DynamicWall, {
-			isEdit: true
-		});
-	},
-
-	/**
-	 * 鼠标点击绘制可编辑颜色墙
-	 */
-	onMouseDrawColorEditWall: function() {
-		proxy.drawTools.draw(DrawTools.DrawType.NormalWall, {
-			isEdit: true
-		});
-	},
-
-	/**
-	 * 鼠标点击绘制可编辑文字墙
-	 */
-	onMouseDrawEditText: function() {
-		proxy.drawTools.draw(DrawTools.DrawType.TextWall, {
-			isEdit: true
-		});
-	},
-
-	/**
-	 * 绘制可编辑动态圆
-	 */
-	onMouseDrawDynamicCircle: function() {
-		proxy.drawTools.draw(DrawTools.DrawType.DynamicCircle, {
-			isEdit: true
-		});
-	},
-
-	/**
-	 * 绘制可编辑体
-	 */
-	onMoouseDrawPolygonBody: function() {
-		proxy.drawTools.draw(DrawTools.DrawType.House, {
-			isEdit: true
-		});
-	},
-
-	/**
-	 * 绘制视频墙
-	 */
-	onMouseDrawEditVideoWall: function() {
-		proxy.drawTools.draw(DrawTools.DrawType.VideoWall, {
-			isEdit: true
-		});
-	},
-
-	/**
-	 * 绘制空间线
-	 */
-	onMouseDrawEditSpatialPolyline: function() {
-		proxy.drawTools.draw(DrawTools.DrawType.SpatialLine, {
-			isEdit: true
-		});
-	},
-
-	/**
-	 * 绘制OD线
-	 */
-	onMouseDrawEditOdline: function() {
-		proxy.drawTools.draw(DrawTools.DrawType.OdLine, {
-			isEdit: true
-		});
-	},
-
-	/**
-	 * 更新墙属性
-	 * @param {JSON} params 参数配置项
-	 */
-	onSubmitEditProperty: function(params) {
-		proxy.drawTools.updateEditEntityProperty(params);
-	},
-
-	/**
-	 * 删除当前编辑的实体
-	 */
-	onRemoveEditEntity: function() {
-		proxy.drawTools.removeEditEntity();
-	},
-
-	/**
-	 * 旋转实体
-	 */
-	onRotationEntity: function() {
-		proxy.drawTools.rotationEntity({
-			x: 90,
-			y: 0,
-			z: 0
-		});
-	}
-});
-
-const openFloatLayer = function() {
-	/* 添加网格地图 */
-	window['floatGHT'].show();
-};
-
-const closeFloatLayer = function() {
-	console.log(window['floatGHT']);
-	window['floatGHT'].hide();
-};
-
-/* 初始化 */
-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.drawTools = new DrawTools(proxy.CMapApi.getViewer(), {
-		iconType: DrawTools.IconType.Blue,
-		isDrawPoint: true,
-		isRetainDrawPoint: true
-	});
-
-	/* 创建监听 */
-	proxy.drawTools.onEditProperty = param => {
-		// console.log('===调用编辑代理>>>', param);
-		emit('onEditProperty', param);
-	};
-
-	/* 添加暗夜版图层 */
-	proxy.CMapApi.addLayer({
-		layId: 'mapbox',
-		layName: '暗夜版底图',
-		layType: CrMap.LayerType.mapboxLayer,
-		isShow: true,
-		config: {}
-	});
-
-	/* 添加模版影像地图 */
-	// proxy.CMapApi.addLayer({
-	// 	layId: 'tileGrid',
-	// 	layName: '网格',
-	// 	layType: CrMap.LayerType.tileGridLayer,
-	// 	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',
-			alpha: 1.0
-		}
-	});
-
-	/* 添加模版影像地图 */
-	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.addLayer({
-	// 	layId: 'floatGHT',
-	// 	layName: '浮动规划图',
-	// 	layType: CrMap.LayerType.floatLayer,
-	// 	isShow: true,
-	// 	config: {
-	// 		providerType: 'ArcGisMapServerImageryProvider',
-	// 		url: 'http://218.59.194.74:6080/arcgis/rest/services/LYLSQ_GHT_102100_202112/MapServer',
-	// 		// url: 'http://218.59.194.82:6080/arcgis/rest/services/LSQZRZY_RE_WEB_V1/MapServer',
-	// 		// layers: '24',
-	// 		opacity: 0.45
-	// 	}
-	// });
-
-	/* 添加兰山区影像图浮动图层 */
-	// proxy.CMapApi.addLayer({
-	// 	layId: 'floatLSQYx',
-	// 	layName: '兰山区影像',
-	// 	layType: CrMap.LayerType.floatLayer,
-	// 	isShow: true,
-	// 	config: {
-	// 		providerType: 'ArcGisMapServerImageryProvider',
-	// 		url: 'http://218.59.194.74:6080/arcgis/rest/services/LYLSQ_YX_102100_202112/MapServer',
-	// 		opacity: 0.45
-	// 	}
-	// });
-
-	/* 添加兰山区规划图浮动图层 */
-	// proxy.CMapApi.addLayer({
-	// 	layId: 'floatLSQGht',
-	// 	layName: '兰山区规划图',
-	// 	layType: CrMap.LayerType.floatLayer,
-	// 	isShow: true,
-	// 	config: {
-	// 		providerType: 'ArcGisMapServerImageryProvider',
-	// 		url: 'http://218.59.194.74:6080/arcgis/rest/services/LYLSQ_GHT_102100_202112/MapServer',
-	// 		opacity: 1.0
-	// 	}
-	// });
-
-	/* 添加网格地图 */
-	// proxy.CMapApi.addLayer({
-	// 	layId: 'floatGHT',
-	// 	layName: '浮动规划图',
-	// 	layType: CrMap.LayerType.floatLayer,
-	// 	isShow: true,
-	// 	config: {
-	// 		providerType: 'UrlTemplateImageryProvider',
-	// 		// url: 'http://202.102.167.52:16282/geoserver/gwc/service/tms/1.0.0/ytmp%3Amap_zrzy_trfhl@EPSG%3A900913@png/{z}/{x}/{reverseY}.png',
-	// 		url: 'http://202.102.167.52:16282/geoserver/gwc/service/tms/1.0.0/ytmp%3Atdt@EPSG%3A900913@png/{z}/{x}/{reverseY}.png',
-	// 		opacity: 1
-	// 	}
-	// });
-
-	/* 进入中国位置 */
-	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;
-}
-
-.jt-map-tools {
-	position: absolute;
-	left: 100px;
-	top: 30px;
-}
-
-.cesium-performanceDisplay-defaultContainer {
-	top: unset !important;
-	bottom: 100px !important;
-	right: 10px !important;
-}
-</style>
+<template>
+	<div id="cesiumContainer" class="jt-map"></div>
+	<div class="jt-map-tools">
+		<button @click="openFloatLayer()">打开浮动图层</button>
+		<button @click="closeFloatLayer()">关闭浮动图层</button>
+	</div>
+</template>
+<script setup>
+	import {
+		param
+	} from 'jquery';
+	import {
+		defineExpose,
+		onMounted,
+		getCurrentInstance
+	} from 'vue';
+	/* 注册方法 */
+	const emit = defineEmits(['onEditProperty']);
+
+	import {
+		CrMap
+	} from './CrMap.js';
+	import CommonTools from './CommonTools.js';
+	import {
+		SketchViewModel
+	} from './SketchViewModel.js';
+
+	import {
+		DrawTools
+	} from './DrawTools.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();
+		},
+		/* 清理资源 */
+		onToolsClear: 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.drawTools.Clear();
+		},
+
+		/**
+		 * 鼠标点击绘制可编辑贴地线
+		 */
+		onMouseDrawEditLine: function() {
+			proxy.drawTools.draw(DrawTools.DrawType.Polyline, {
+				isEdit: true
+			});
+		},
+
+		/**
+		 * 鼠标点击绘制可编辑贴地箭头线
+		 */
+		onMouseDrawEditArrowLine: function() {
+			proxy.drawTools.draw(DrawTools.DrawType.ArrowPolyline, {
+				isEdit: true
+			});
+		},
+
+		/**
+		 * 鼠标点击绘制可编辑贴地发光线
+		 */
+		onMouseDrawEditGrawLine: function() {
+			proxy.drawTools.draw(DrawTools.DrawType.GrowPolyline, {
+				isEdit: true
+			});
+		},
+
+		/**
+		 * 鼠标点击绘制可编辑贴地动态
+		 */
+		onMouseDrawEditDynamicLine: function() {
+			proxy.drawTools.draw(DrawTools.DrawType.DynamicPolyline, {
+				isEdit: true
+			});
+		},
+
+		/**
+		 * 鼠标点击绘制可编辑贴地描边线
+		 */
+		onMouseDrawEditOutlineLine: function() {
+			proxy.drawTools.draw(DrawTools.DrawType.OultliePolyline, {
+				isEdit: true
+			});
+		},
+
+		/**
+		 * 鼠标点击绘制可编辑贴地面
+		 */
+		onMouseDrawEditPolygon: function() {
+			proxy.drawTools.draw(DrawTools.DrawType.Polygon, {
+				isEdit: true
+			});
+		},
+
+		/**
+		 * 鼠标点击绘制可编辑矩形
+		 */
+		onMouseDrawEditRectangle: function() {
+			proxy.drawTools.draw(DrawTools.DrawType.Rectangle, {
+				isEdit: true
+			});
+		},
+
+		/**
+		 * 鼠标点击绘制可编辑圆
+		 */
+		onMouseDrawEditCircle: function() {
+			proxy.drawTools.draw(DrawTools.DrawType.Circle, {
+				isEdit: true
+			});
+		},
+
+		/**
+		 * 鼠标点击绘制可编辑动态墙
+		 */
+		onMouseDrawDynamicEditWall: function() {
+			proxy.drawTools.draw(DrawTools.DrawType.DynamicWall, {
+				isEdit: true
+			});
+		},
+
+		/**
+		 * 鼠标点击绘制可编辑颜色墙
+		 */
+		onMouseDrawColorEditWall: function() {
+			proxy.drawTools.draw(DrawTools.DrawType.NormalWall, {
+				isEdit: true
+			});
+		},
+
+		/**
+		 * 鼠标点击绘制可编辑文字墙
+		 */
+		onMouseDrawEditText: function() {
+			proxy.drawTools.draw(DrawTools.DrawType.TextWall, {
+				isEdit: true
+			});
+		},
+
+		/**
+		 * 绘制可编辑动态圆
+		 */
+		onMouseDrawDynamicCircle: function() {
+			proxy.drawTools.draw(DrawTools.DrawType.DynamicCircle, {
+				isEdit: true
+			});
+		},
+
+		/**
+		 * 绘制可编辑体
+		 */
+		onMoouseDrawPolygonBody: function() {
+			proxy.drawTools.draw(DrawTools.DrawType.House, {
+				isEdit: true
+			});
+		},
+
+		/**
+		 * 绘制视频墙
+		 */
+		onMouseDrawEditVideoWall: function() {
+			proxy.drawTools.draw(DrawTools.DrawType.VideoWall, {
+				isEdit: true
+			});
+		},
+
+		/**
+		 * 绘制空间线
+		 */
+		onMouseDrawEditSpatialPolyline: function() {
+			proxy.drawTools.draw(DrawTools.DrawType.SpatialLine, {
+				isEdit: true
+			});
+		},
+
+		/**
+		 * 绘制OD线
+		 */
+		onMouseDrawEditOdline: function() {
+			proxy.drawTools.draw(DrawTools.DrawType.OdLine, {
+				isEdit: true
+			});
+		},
+
+		/**
+		 * 更新墙属性
+		 * @param {JSON} params 参数配置项
+		 */
+		onSubmitEditProperty: function(params) {
+			proxy.drawTools.updateEditEntityProperty(params);
+		},
+
+		/**
+		 * 删除当前编辑的实体
+		 */
+		onRemoveEditEntity: function() {
+			proxy.drawTools.removeEditEntity();
+		},
+
+		/**
+		 * 旋转实体
+		 */
+		onRotationEntity: function() {
+			proxy.drawTools.rotationEntity({
+				x: 90,
+				y: 0,
+				z: 0
+			});
+		}
+	});
+
+	const openFloatLayer = function() {
+		/* 添加网格地图 */
+		window['floatGHT'].show();
+	};
+
+	const closeFloatLayer = function() {
+		console.log(window['floatGHT']);
+		window['floatGHT'].hide();
+	};
+
+	/* 初始化 */
+	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.drawTools = new DrawTools(proxy.CMapApi.getViewer(), {
+			iconType: DrawTools.IconType.Blue,
+			isDrawPoint: true,
+			isRetainDrawPoint: true
+		});
+
+		/* 创建监听 */
+		proxy.drawTools.onEditProperty = param => {
+			// console.log('===调用编辑代理>>>', param);
+			emit('onEditProperty', param);
+		};
+
+		/* 添加暗夜版图层 */
+		proxy.CMapApi.addLayer({
+			layId: 'mapbox',
+			layName: '暗夜版底图',
+			layType: CrMap.LayerType.mapboxLayer,
+			isShow: true,
+			config: {}
+		});
+
+		/* 添加模版影像地图 */
+		// proxy.CMapApi.addLayer({
+		// 	layId: 'tileGrid',
+		// 	layName: '网格',
+		// 	layType: CrMap.LayerType.tileGridLayer,
+		// 	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',
+				alpha: 1.0
+			}
+		});
+
+		/* 添加模版影像地图 */
+		// 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.addLayer({
+		// 	layId: 'crYxMp',
+		// 	layName: '牟平影像图',
+		// 	layType: CrMap.LayerType.floatLayer,
+		// 	isShow: true,
+		// 	config: {
+		// 		providerType: 'UrlTemplateImageryProvider',
+		// 		url: 'http://202.102.167.52:16282/geoserver/gwc/service/tms/1.0.0/ytmp%3Atdt@EPSG%3A900913@png/{z}/{x}/{reverseY}.png',
+		// 		opacity: 0.9
+		// 	}
+		// });
+
+		/* 添加兰山区影像图浮动图层 */
+		// proxy.CMapApi.addLayer({
+		// 	layId: 'floatLSQYx',
+		// 	layName: '兰山区影像',
+		// 	layType: CrMap.LayerType.floatLayer,
+		// 	isShow: true,
+		// 	config: {
+		// 		providerType: 'ArcGisMapServerImageryProvider',
+		// 		url: 'http://218.59.194.74:6080/arcgis/rest/services/LYLSQ_YX_102100_202112/MapServer',
+		// 		opacity: 0.45
+		// 	}
+		// });
+
+		/* 添加兰山区规划图浮动图层 */
+		// proxy.CMapApi.addLayer({
+		// 	layId: 'floatLSQGht',
+		// 	layName: '兰山区规划图',
+		// 	layType: CrMap.LayerType.floatLayer,
+		// 	isShow: true,
+		// 	config: {
+		// 		providerType: 'ArcGisMapServerImageryProvider',
+		// 		url: 'http://218.59.194.74:6080/arcgis/rest/services/LYLSQ_GHT_102100_202112/MapServer',
+		// 		opacity: 1.0
+		// 	}
+		// });
+
+		/* 添加网格地图 */
+		// proxy.CMapApi.addLayer({
+		// 	layId: 'floatGHT',
+		// 	layName: '浮动规划图',
+		// 	layType: CrMap.LayerType.floatLayer,
+		// 	isShow: true,
+		// 	config: {
+		// 		providerType: 'UrlTemplateImageryProvider',
+		// 		// url: 'http://202.102.167.52:16282/geoserver/gwc/service/tms/1.0.0/ytmp%3Amap_zrzy_trfhl@EPSG%3A900913@png/{z}/{x}/{reverseY}.png',
+		// 		url: 'http://202.102.167.52:16282/geoserver/gwc/service/tms/1.0.0/ytmp%3Atdt@EPSG%3A900913@png/{z}/{x}/{reverseY}.png',
+		// 		opacity: 1
+		// 	}
+		// });
+
+		/* 进入中国位置 */
+		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();
+				_self.CMapApi.drawCircle();
+			}
+		});
+
+		/* 查询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;
+	}
+
+	.jt-map-tools {
+		position: absolute;
+		left: 100px;
+		top: 30px;
+	}
+
+	.cesium-performanceDisplay-defaultContainer {
+		top: unset !important;
+		bottom: 100px !important;
+		right: 10px !important;
+	}
+</style>

src/components/CrMap/DrawTools.js

@@ -1514,6 +1514,9 @@ Object.assign(DrawTools.prototype, {
 		if (isEdit != undefined && isEdit === true) {
 			this._setEntityIsEdit(this._drawEntity);
 		}
+		/* 打印两个值 用于测试 */
+		// this._console(this._drawEntity.position);
+		// this._console(this._sketchEllipseRadius);
 	},
 
 	/**