diff --git a/ruoyi-ui/src/views/cesiumMap/index.vue b/ruoyi-ui/src/views/cesiumMap/index.vue
index a5cdc33..6d491f4 100644
--- a/ruoyi-ui/src/views/cesiumMap/index.vue
+++ b/ruoyi-ui/src/views/cesiumMap/index.vue
@@ -1,1500 +1,1524 @@
 <template>
-	<div class="cesium-container">
-	<div id="cesiumViewer" ref="cesiumViewer"></div>
-	
-	<!-- 主工具栏 -->
-	<div class="main-toolbar" :class="{ collapsed: isToolbarCollapsed }">
-	<!-- 展开/收起按钮 -->
-	<div class="collapse-btn" @click="toggleToolbar">
-	<span class="collapse-icon">{{ isToolbarCollapsed ? '▶' : '◀' }}</span>
-	<span class="collapse-text" v-if="!isToolbarCollapsed">收起</span>
-	</div>
-	
-	<!-- 工具栏内容 -->
-	<div class="toolbar-content" v-show="!isToolbarCollapsed">
-	<div class="toolbar-group">
-	<button 
-	@click="toggleDrawing('point')" 
-	:class="{ active: drawingMode === 'point' }"
-	title="点"
-	class="tool-btn"
-	>
-	<span class="icon">📍</span>
-	<span class="text">{{ drawingMode === 'point' ? '停止' : '点' }}</span>
-	</button>
-	
-	<button 
-	@click="toggleDrawing('line')" 
-	:class="{ active: drawingMode === 'line' }"
-	title="线"
-	class="tool-btn"
-	>
-	<span class="icon">📏</span>
-	<span class="text">{{ drawingMode === 'line' ? '停止' : '线' }}</span>
-	</button>
-	
-	<button 
-	@click="toggleDrawing('polygon')" 
-	:class="{ active: drawingMode === 'polygon' }"
-	title="面"
-	class="tool-btn"
-	>
-	<span class="icon">🔶</span>
-	<span class="text">{{ drawingMode === 'polygon' ? '停止' : '面' }}</span>
-	</button>
-	</div>
-	
-	<div class="toolbar-group">
-	<button 
-	@click="toggleDrawing('rectangle')" 
-	:class="{ active: drawingMode === 'rectangle' }"
-	title="矩形"
-	class="tool-btn"
-	>
-	<span class="icon">⬜</span>
-	<span class="text">{{ drawingMode === 'rectangle' ? '停止' : '矩形' }}</span>
-	</button>
-	
-	<button 
-	@click="toggleDrawing('circle')" 
-	:class="{ active: drawingMode === 'circle' }"
-	title="圆形"
-	class="tool-btn"
-	>
-	<span class="icon">⭕</span>
-	<span class="text">{{ drawingMode === 'circle' ? '停止' : '圆形' }}</span>
-	</button>
-	</div>
-	
-	<div class="toolbar-group">
-	<button 
-	@click="clearAll" 
-	:disabled="!allEntities.length"
-	title="清除所有"
-	class="tool-btn danger"
-	>
-	<span class="icon">🗑️</span>
-	<span class="text">清除</span>
-	</button>
-	
-	<button 
-	@click="exportData" 
-	:disabled="!allEntities.length"
-	title="导出数据"
-	class="tool-btn success"
-	>
-	<span class="icon">💾</span>
-	<span class="text">导出</span>
-	</button>
-	</div>
-	</div>
-	
-	<!-- 收起时的最小化工具栏 -->
-	<div class="toolbar-minimized" v-show="isToolbarCollapsed">
-	<button 
-	@click="toggleDrawing('point')" 
-	:class="{ active: drawingMode === 'point' }"
-	title="点"
-	class="min-tool-btn"
-	>
-	<span class="icon">📍</span>
-	</button>
-	<button 
-	@click="toggleDrawing('line')" 
-	:class="{ active: drawingMode === 'line' }"
-	title="线"
-	class="min-tool-btn"
-	>
-	<span class="icon">📏</span>
-	</button>
-	<button 
-	@click="toggleDrawing('polygon')" 
-	:class="{ active: drawingMode === 'polygon' }"
-	title="面"
-	class="min-tool-btn"
-	>
-	<span class="icon">🔶</span>
-	</button>
-	<button 
-	@click="toggleDrawing('rectangle')" 
-	:class="{ active: drawingMode === 'rectangle' }"
-	title="矩形"
-	class="min-tool-btn"
-	>
-	<span class="icon">⬜</span>
-	</button>
-	<button 
-	@click="toggleDrawing('circle')" 
-	:class="{ active: drawingMode === 'circle' }"
-	title="圆形"
-	class="min-tool-btn"
-	>
-	<span class="icon">⭕</span>
-	</button>
-	<div class="min-tool-separator"></div>
-	<button 
-	@click="clearAll" 
-	:disabled="!allEntities.length"
-	title="清除所有"
-	class="min-tool-btn danger"
-	>
-	<span class="icon">🗑️</span>
-	</button>
-	<button 
-	@click="exportData" 
-	:disabled="!allEntities.length"
-	title="导出数据"
-	class="min-tool-btn success"
-	>
-	<span class="icon">💾</span>
-	</button>
-	</div>
-	</div>
-	
-	<!-- 测量结果显示 -->
-	<div class="measurement-panel" v-if="measurementResult">
-	<div class="measurement-content">
-	<h5>测量结果</h5>
-	<div class="measurement-item" v-if="measurementResult.distance">
-	<span>长度：</span>
-	<strong>{{ measurementResult.distance.toFixed(2) }} 米</strong>
-	</div>
-	<div class="measurement-item" v-if="measurementResult.area">
-	<span>面积：</span>
-	<strong>{{ measurementResult.area.toFixed(2) }} 平方米</strong>
-	</div>
-	<div class="measurement-item" v-if="measurementResult.radius">
-	<span>半径：</span>
-	<strong>{{ measurementResult.radius.toFixed(2) }} 米</strong>
-	</div>
-	<button @click="measurementResult = null" class="close-btn">关闭</button>
-	</div>
-	</div>
-	</div>
-	</template>
-	
-	<script>
-	// import * as Cesium from 'cesium'
-	// import 'cesium/Build/Cesium/Widgets/widgets.css'
-	export default {
-	name: 'CesiumMap',
-	
-	data() {
-	return {
-	viewer: null,
-	scaleBar: null,
-	isToolbarCollapsed: false,
-	
-	// 绘制相关
-	drawingMode: null, // 'point', 'line', 'polygon', 'rectangle', 'circle'
-	drawingHandler: null,
-	tempEntity: null,
-	drawingPoints: [],
-	drawingStartPoint: null,
-	isDrawing: false,
-	
-	// 实体管理
-	allEntities: [], // 所有绘制的实体
-	entityCounter: 0,
-	selectedEntity: null, // 当前选中的实体
-	
-	// 测量结果
-	measurementResult: null,
-	
-	// 默认样式
-	defaultStyles: {
-	point: { color: '#FF0000', size: 12 },
-	line: { color: '#00FF00', width: 3 },
-	polygon: { color: '#0000FF', opacity: 0.5, width: 2 },
-	rectangle: { color: '#FFA500', opacity: 0.3, width: 2 },
-	circle: { color: '#800080', opacity: 0.4, width: 2 }
-	}
-	}
-	},
-	
-	mounted() {
-	// this.initMap()
-	this.checkCesiumLoaded()
-	},
-	
-	beforeDestroy() {
-	this.destroyViewer()
-	},
-	
-	methods: {
-	// 切换工具栏展开/收起
-	toggleToolbar() {
-	this.isToolbarCollapsed = !this.isToolbarCollapsed
-	},
-	checkCesiumLoaded() {
-	if (typeof Cesium === 'undefined') {
-	console.error('Cesium未加载，请检查CDN链接');
-	// 可以设置重试机制
-	setTimeout(() => {
-	if (typeof Cesium !== 'undefined') {
-	this.initMap();
-	} else {
-	console.error('Cesium加载失败');
-	}
-	}, 1000);
-	} else {
-	this.initMap();
-	}
-	},
-	initMap() {
-	try {
-	// 确保 Cesium 已加载
-	// Cesium.buildModuleUrl.setBaseUrl(window.CESIUM_BASE_URL)
-	Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjN2MzMmE5OS01NGU3LTQzOGQtYjdjZi1mNGIwZTFjZjQ0NmEiLCJpZCI6MTQ0MDc2LCJpYXQiOjE2ODU3NjY1OTN9.iCmFY-5WNdvyAT-EO2j-unrFm4ZN9J6aSuB2wElQZ-I'
-	
-	this.viewer = new Cesium.Viewer('cesiumViewer', {
-	animation: false,
-	fullscreenButton: false,
-	baseLayerPicker: false,
-	navigationInstructionsInitiallyVisible: false,
-	geocoder: false,
-	homeButton: false,
-	infoBox: false,
-	sceneModePicker: false,
-	selectionIndicator: false,
-	timeline: false,
-	navigationHelpButton: false,
-	sceneMode: Cesium.SceneMode.SCENE2D,
-	mapProjection: new Cesium.WebMercatorProjection(),
-	imageryProvider: false,
-	terrainProvider: new Cesium.EllipsoidTerrainProvider(),
-	baseLayer: false
-	})
-	
-	this.viewer.cesiumWidget.creditContainer.style.display = "none"
-	this.loadOfflineMap()
-	this.setup2DConstraints()
-	
-	this.viewer.camera.setView({
-	destination: Cesium.Cartesian3.fromDegrees(116.3974, 39.9093, 5000000),
-	orientation: {
-	heading: 0,
-	pitch: -Cesium.Math.PI_OVER_TWO,
-	roll: 0
-	}
-	})
-	
-	this.initScaleBar()
-	console.log('Cesium离线二维地图已加载')
-	
-	} catch (error) {
-	console.error('地图错误:', error)
-	// 如果Cesium加载失败，显示错误信息
-	this.showErrorMessage();
-	}
-	},
-	showErrorMessage() {
-	const container = document.getElementById('cesiumViewer');
-	if (container) {
-	container.innerHTML = `
-	<div style="
-	width: 100%;
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	background: #f5f5f5;
-	color: #666;
-	font-family: Arial, sans-serif;
-	">
-	<h3 style="margin-bottom: 20px;">地图加载失败</h3>
-	<p>可能的原因：</p>
-	<ul style="text-align: left; margin: 10px 0;">
-	<li>网络连接问题</li>
-	<li>Cesium CDN资源未加载</li>
-	<li>浏览器兼容性问题</li>
-	</ul>
-	<button onclick="location.reload()" style="
-	margin-top: 20px;
-	padding: 10px 20px;
-	background: #4dabf7;
-	color: white;
-	border: none;
-	border-radius: 4px;
-	cursor: pointer;
-	">
-	重新加载
-	</button>
-	</div>
-	`;
-	}
-	},
-	
-	setup2DConstraints() {
-	const scene = this.viewer.scene
-	const controller = scene.screenSpaceCameraController
-	
-	controller.enableTilt = false
-	controller.enableRotate = false
-	controller.enableLook = false
-	scene.screenSpaceCameraController.maximumPitch = 0
-	scene.screenSpaceCameraController.minimumPitch = 0
-	},
-	
-	loadOfflineMap() {
-	this.viewer.imageryLayers.removeAll()
-	
-	try {
-	const offlineProvider = new Cesium.UrlTemplateImageryProvider({
-	url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
-	minimumLevel: 0,
-	maximumLevel: 18,
-	tileWidth: 256,
-	tileHeight: 256,
-	tilingScheme: new Cesium.WebMercatorTilingScheme(),
-	credit: '离线地图'
-	})
-	
-	this.viewer.imageryLayers.addImageryProvider(offlineProvider)
-	
-	} catch (error) {
-	console.error('加载离线地图失败:', error)
-	this.showGridLayer()
-	}
-	},
-	
-	showGridLayer() {
-	const gridProvider = new Cesium.GridImageryProvider()
-	this.viewer.imageryLayers.addImageryProvider(gridProvider)
-	this.addCoordinateLabels()
-	},
-	
-	addCoordinateLabels() {
-	for (let lon = -180; lon <= 180; lon += 30) {
-	for (let lat = -90; lat <= 90; lat += 30) {
-	this.viewer.entities.add({
-	position: Cesium.Cartesian3.fromDegrees(lon, lat),
-	label: {
-	text: `${lat}°N\n${lon}°E`,
-	font: '12px sans-serif',
-	fillColor: Cesium.Color.BLACK,
-	outlineColor: Cesium.Color.WHITE,
-	outlineWidth: 2,
-	style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-	verticalOrigin: Cesium.VerticalOrigin.CENTER,
-	pixelOffset: new Cesium.Cartesian2(10, 0)
-	}
-	})
-	}
-	}
-	},
-	
-	// ================== 绘制功能 ==================
-	
-	toggleDrawing(mode) {
-	if (this.drawingMode === mode) {
-	// 停止当前绘制
-	this.stopDrawing()
-	this.drawingMode = null
-	} else {
-	// 停止之前的绘制
-	if (this.drawingMode) {
-	this.stopDrawing()
-	}
-	
-	// 开始新的绘制
-	this.drawingMode = mode
-	this.startDrawing(mode)
-	}
-	},
-	
-	startDrawing(mode) {
-	this.stopDrawing()
-	this.drawingPoints = []
-	this.drawingStartPoint = null
-	this.isDrawing = true
-	
-	this.drawingHandler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
-	
-	// 根据模式设置不同的鼠标样式和事件
-	switch(mode) {
-	case 'point':
-	this.startPointDrawing()
-	break
-	case 'line':
-	this.startLineDrawing()
-	break
-	case 'polygon':
-	this.startPolygonDrawing()
-	break
-	case 'rectangle':
-	this.startRectangleDrawing()
-	break
-	case 'circle':
-	this.startCircleDrawing()
-	break
-	}
-	
-	this.viewer.scene.canvas.style.cursor = 'crosshair'
-	console.log(`开始绘制 ${this.getTypeName(mode)}`)
-	},
-	
-	stopDrawing() {
-	if (this.drawingHandler) {
-	this.drawingHandler.destroy()
-	this.drawingHandler = null
-	}
-	
-	if (this.tempEntity) {
-	this.viewer.entities.remove(this.tempEntity)
-	this.tempEntity = null
-	}
-	
-	this.drawingPoints = []
-	this.drawingStartPoint = null
-	this.isDrawing = false
-	
-	this.viewer.scene.canvas.style.cursor = 'default'
-	},
-	// ********************************************************************
-	// 绘制点
-	startPointDrawing() {
-	this.drawingHandler.setInputAction((click) => {
-	const position = this.getClickPosition(click.position)
-	if (position) {
-	const { lat, lng } = this.cartesianToLatLng(position)
-	this.addPointEntity(lat, lng)
-	}
-	}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
-	},
-	
-	// 绘制线
-	startLineDrawing() {
-	this.drawingHandler.setInputAction((click) => {
-	const position = this.getClickPosition(click.position)
-	if (position) {
-	this.drawingPoints.push(position)
-	
-	// 更新临时线
-	if (this.tempEntity) {
-	this.viewer.entities.remove(this.tempEntity)
-	}
-	
-	if (this.drawingPoints.length > 1) {
-	this.tempEntity = this.viewer.entities.add({
-	polyline: {
-	positions: this.drawingPoints,
-	width: this.defaultStyles.line.width,
-	material: Cesium.Color.fromCssColorString(this.defaultStyles.line.color),
-	clampToGround: true
-	}
-	})
-	}
-	}
-	}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
-	
-	// 右键完成绘制
-	this.drawingHandler.setInputAction(() => {
-	if (this.drawingPoints.length > 1) {
-	this.finishLineDrawing()
-	} else {
-	this.cancelDrawing()
-	}
-	}, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
-	},
-	
-	finishLineDrawing() {
-	const positions = [...this.drawingPoints]
-	const entity = this.addLineEntity(positions)
-	
-	// 计算长度
-	const length = this.calculateLineLength(positions)
-	this.measurementResult = {
-	distance: length,
-	type: 'line'
-	}
-	
-	this.stopDrawing()
-	return entity
-	},
-	
-	// 绘制多边形
-	startPolygonDrawing() {
-	this.drawingHandler.setInputAction((click) => {
-	const position = this.getClickPosition(click.position)
-	if (position) {
-	this.drawingPoints.push(position)
-	
-	// 更新临时多边形
-	if (this.tempEntity) {
-	this.viewer.entities.remove(this.tempEntity)
-	}
-	
-	if (this.drawingPoints.length > 2) {
-	// 闭合多边形
-	const polygonPoints = [...this.drawingPoints, this.drawingPoints[0]]
-	this.tempEntity = this.viewer.entities.add({
-	polygon: {
-	hierarchy: new Cesium.PolygonHierarchy(polygonPoints),
-	material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color)
-	.withAlpha(this.defaultStyles.polygon.opacity),
-	outline: true,
-	outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color),
-	outlineWidth: this.defaultStyles.polygon.width
-	}
-	})
-	} else if (this.drawingPoints.length === 2) {
-	// 只有两个点时显示线
-	this.tempEntity = this.viewer.entities.add({
-	polyline: {
-	positions: this.drawingPoints,
-	width: this.defaultStyles.polygon.width,
-	material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color),
-	clampToGround: true
-	}
-	})
-	} else if (this.drawingPoints.length === 1) {
-	// 只有一个点时显示点
-	this.tempEntity = this.viewer.entities.add({
-	position: this.drawingPoints[0],
-	point: {
-	pixelSize: 8,
-	color: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color)
-	}
-	})
-	}
-	}
-	}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
-	
-	// 双击完成绘制
-	this.drawingHandler.setInputAction((click) => {
-	if (this.drawingPoints.length > 2) {
-	this.finishPolygonDrawing()
-	}
-	}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
-	
-	// 右键取消
-	this.drawingHandler.setInputAction(() => {
-	this.cancelDrawing()
-	}, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
-	},
-	
-	finishPolygonDrawing() {
-	const positions = [...this.drawingPoints]
-	const entity = this.addPolygonEntity(positions)
-	
-	// 计算面积
-	const area = this.calculatePolygonArea(positions)
-	this.measurementResult = {
-	area: area,
-	type: 'polygon'
-	}
-	
-	this.stopDrawing()
-	return entity
-	},
-	
-	// 绘制矩形
-	startRectangleDrawing() {
-	let startPosition = null
-	
-	this.drawingHandler.setInputAction((click) => {
-	startPosition = this.getClickPosition(click.position)
-	if (startPosition) {
-	this.drawingStartPoint = startPosition
-	}
-	}, Cesium.ScreenSpaceEventType.LEFT_DOWN)
-	
-	this.drawingHandler.setInputAction((movement) => {
-	if (startPosition) {
-	const endPosition = this.getClickPosition(movement.endPosition)
-	if (endPosition) {
-	// 更新临时矩形
-	if (this.tempEntity) {
-	this.viewer.entities.remove(this.tempEntity)
-	}
-	
-	const rectangle = this.calculateRectangle(startPosition, endPosition)
-	this.tempEntity = this.viewer.entities.add({
-	rectangle: {
-	coordinates: rectangle,
-	material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color)
-	.withAlpha(this.defaultStyles.rectangle.opacity),
-	outline: true,
-	outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color),
-	outlineWidth: this.defaultStyles.rectangle.width
-	}
-	})
-	}
-	}
-	}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
-	
-	this.drawingHandler.setInputAction(() => {
-	if (startPosition && this.tempEntity) {
-	this.finishRectangleDrawing(startPosition)
-	startPosition = null
-	}
-	}, Cesium.ScreenSpaceEventType.LEFT_UP)
-	
-	// 右键取消
-	this.drawingHandler.setInputAction(() => {
-	this.cancelDrawing()
-	}, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
-	},
-	
-	finishRectangleDrawing(startPosition) {
-	if (!this.tempEntity) return
-	
-	const rectangleCoords = this.tempEntity.rectangle.coordinates.getValue()
-	const entity = this.addRectangleEntity(rectangleCoords)
-	
-	// 计算面积
-	const area = this.calculateRectangleArea(rectangleCoords)
-	this.measurementResult = {
-	area: area,
-	type: 'rectangle'
-	}
-	
-	this.stopDrawing()
-	return entity
-	},
-	
-	// 绘制圆形
-	startCircleDrawing() {
-	let centerPosition = null
-	let radius = 0
-	
-	this.drawingHandler.setInputAction((click) => {
-	centerPosition = this.getClickPosition(click.position)
-	if (centerPosition) {
-	this.drawingStartPoint = centerPosition
-	
-	// 创建中心点
-	if (this.tempEntity) {
-	this.viewer.entities.remove(this.tempEntity)
-	}
-	
-	this.tempEntity = this.viewer.entities.add({
-	position: centerPosition,
-	point: {
-	pixelSize: 8,
-	color: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color)
-	}
-	})
-	}
-	}, Cesium.ScreenSpaceEventType.LEFT_DOWN)
-	
-	this.drawingHandler.setInputAction((movement) => {
-	if (centerPosition) {
-	const currentPosition = this.getClickPosition(movement.endPosition)
-	if (currentPosition) {
-	radius = Cesium.Cartesian3.distance(centerPosition, currentPosition)
-	
-	// 更新临时圆形
-	if (this.tempEntity) {
-	this.viewer.entities.remove(this.tempEntity)
-	}
-	
-	// 创建圆形多边形
-	const positions = this.calculateCircle(centerPosition, radius, 64)
-	this.tempEntity = this.viewer.entities.add({
-	polygon: {
-	hierarchy: new Cesium.PolygonHierarchy(positions),
-	material: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color)
-	.withAlpha(this.defaultStyles.circle.opacity),
-	outline: true,
-	outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color),
-	outlineWidth: this.defaultStyles.circle.width
-	}
-	})
-	}
-	}
-	}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
-	
-	this.drawingHandler.setInputAction(() => {
-	if (centerPosition && radius > 0) {
-	this.finishCircleDrawing(centerPosition, radius)
-	centerPosition = null
-	radius = 0
-	}
-	}, Cesium.ScreenSpaceEventType.LEFT_UP)
-	
-	// 右键取消
-	// this.drawingHandler.setInputAction(() => {
-	// this.cancelDrawing()
-	// }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
-	},
-	
-	finishCircleDrawing(center, radius) {
-	const positions = this.calculateCircle(center, radius, 64)
-	const entity = this.addCircleEntity(center, radius, positions)
-	
-	// 计算面积
-	const area = Math.PI * radius * radius
-	this.measurementResult = {
-	area: area,
-	radius: radius,
-	type: 'circle'
-	}
-	
-	this.stopDrawing()
-	return entity
-	},
-	
-	cancelDrawing() {
-	this.stopDrawing()
-	this.drawingMode = null
-	},
-	
-	// ================== 实体创建方法 ==================
-	
-	addPointEntity(lat, lng) {
-	this.entityCounter++
-	const id = `point_${this.entityCounter}`
-	
-	const entity = this.viewer.entities.add({
-	id: id,
-	name: `点 ${this.entityCounter}`,
-	position: Cesium.Cartesian3.fromDegrees(lng, lat),
-	point: {
-	pixelSize: this.defaultStyles.point.size,
-	color: Cesium.Color.fromCssColorString(this.defaultStyles.point.color),
-	outlineColor: Cesium.Color.WHITE,
-	outlineWidth: 2
-	},
-	label: {
-	text: `${this.entityCounter}`,
-	font: '14px Arial',
-	fillColor: Cesium.Color.WHITE,
-	outlineColor: Cesium.Color.BLACK,
-	outlineWidth: 2,
-	style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-	verticalOrigin: Cesium.VerticalOrigin.CENTER,
-	horizontalOrigin: Cesium.HorizontalOrigin.CENTER
-	}
-	})
-	
-	const entityData = {
-	id,
-	type: 'point',
-	lat,
-	lng,
-	entity: entity,
-	color: this.defaultStyles.point.color,
-	size: this.defaultStyles.point.size,
-	label: `点 ${this.entityCounter}`
-	}
-	
-	this.allEntities.push(entityData)
-	
-	// 添加点击事件
-	entity.clickHandler = (e) => {
-	this.selectEntity(entityData)
-	e.stopPropagation()
-	}
-	
-	return entityData
-	},
-	
-	addLineEntity(positions) {
-	this.entityCounter++
-	const id = `line_${this.entityCounter}`
-	
-	const entity = this.viewer.entities.add({
-	id: id,
-	name: `线 ${this.entityCounter}`,
-	polyline: {
-	positions: positions,
-	width: this.defaultStyles.line.width,
-	material: Cesium.Color.fromCssColorString(this.defaultStyles.line.color),
-	clampToGround: true
-	}
-	})
-	
-	const entityData = {
-	id,
-	type: 'line',
-	points: positions.map(p => this.cartesianToLatLng(p)),
-	positions: positions,
-	entity: entity,
-	color: this.defaultStyles.line.color,
-	width: this.defaultStyles.line.width,
-	label: `线 ${this.entityCounter}`
-	}
-	
-	this.allEntities.push(entityData)
-	
-	entity.clickHandler = (e) => {
-	this.selectEntity(entityData)
-	e.stopPropagation()
-	}
-	
-	return entityData
-	},
-	
-	addPolygonEntity(positions) {
-	this.entityCounter++
-	const id = `polygon_${this.entityCounter}`
-	
-	// 闭合多边形
-	const polygonPositions = [...positions, positions[0]]
-	
-	const entity = this.viewer.entities.add({
-	id: id,
-	name: `面 ${this.entityCounter}`,
-	polygon: {
-	hierarchy: new Cesium.PolygonHierarchy(polygonPositions),
-	material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color)
-	.withAlpha(this.defaultStyles.polygon.opacity),
-	outline: true,
-	outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color),
-	outlineWidth: this.defaultStyles.polygon.width
-	}
-	})
-	
-	const entityData = {
-	id,
-	type: 'polygon',
-	points: positions.map(p => this.cartesianToLatLng(p)),
-	positions: polygonPositions,
-	entity: entity,
-	color: this.defaultStyles.polygon.color,
-	opacity: this.defaultStyles.polygon.opacity,
-	width: this.defaultStyles.polygon.width,
-	label: `面 ${this.entityCounter}`
-	}
-	
-	this.allEntities.push(entityData)
-	
-	entity.clickHandler = (e) => {
-	this.selectEntity(entityData)
-	e.stopPropagation()
-	}
-	
-	return entityData
-	},
-	
-	addRectangleEntity(coordinates) {
-	this.entityCounter++
-	const id = `rectangle_${this.entityCounter}`
-	
-	const entity = this.viewer.entities.add({
-	id: id,
-	name: `矩形 ${this.entityCounter}`,
-	rectangle: {
-	coordinates: coordinates,
-	material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color)
-	.withAlpha(this.defaultStyles.rectangle.opacity),
-	outline: true,
-	outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color),
-	outlineWidth: this.defaultStyles.rectangle.width
-	}
-	})
-	
-	const entityData = {
-	id,
-	type: 'rectangle',
-	coordinates: coordinates,
-	entity: entity,
-	color: this.defaultStyles.rectangle.color,
-	opacity: this.defaultStyles.rectangle.opacity,
-	width: this.defaultStyles.rectangle.width,
-	label: `矩形 ${this.entityCounter}`
-	}
-	
-	this.allEntities.push(entityData)
-	
-	entity.clickHandler = (e) => {
-	this.selectEntity(entityData)
-	e.stopPropagation()
-	}
-	
-	return entityData
-	},
-	
-	addCircleEntity(center, radius, positions) {
-	this.entityCounter++
-	const id = `circle_${this.entityCounter}`
-	
-	const entity = this.viewer.entities.add({
-	id: id,
-	name: `圆形 ${this.entityCounter}`,
-	polygon: {
-	hierarchy: new Cesium.PolygonHierarchy(positions),
-	material: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color)
-	.withAlpha(this.defaultStyles.circle.opacity),
-	outline: true,
-	outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color),
-	outlineWidth: this.defaultStyles.circle.width
-	},
-	position: center,
-	point: {
-	pixelSize: 5,
-	color: Cesium.Color.RED
-	}
-	})
-	
-	const centerLL = this.cartesianToLatLng(center)
-	const entityData = {
-	id,
-	type: 'circle',
-	center: centerLL,
-	radius: radius,
-	positions: positions,
-	entity: entity,
-	color: this.defaultStyles.circle.color,
-	opacity: this.defaultStyles.circle.opacity,
-	width: this.defaultStyles.circle.width,
-	label: `圆形 ${this.entityCounter}`
-	}
-	
-	this.allEntities.push(entityData)
-	
-	entity.clickHandler = (e) => {
-	this.selectEntity(entityData)
-	e.stopPropagation()
-	}
-	
-	return entityData
-	},
-	
-	// ================== 工具方法 ==================
-	
-	getClickPosition(pixelPosition) {
-	const cartesian = this.viewer.camera.pickEllipsoid(pixelPosition, this.viewer.scene.globe.ellipsoid)
-	return cartesian
-	},
-	
-	cartesianToLatLng(cartesian) {
-	const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
-	return {
-	lat: Cesium.Math.toDegrees(cartographic.latitude),
-	lng: Cesium.Math.toDegrees(cartographic.longitude)
-	}
-	},
-	
-	calculateRectangle(start, end) {
-	const startLL = this.cartesianToLatLng(start)
-	const endLL = this.cartesianToLatLng(end)
-	
-	return Cesium.Rectangle.fromDegrees(
-	Math.min(startLL.lng, endLL.lng),
-	Math.min(startLL.lat, endLL.lat),
-	Math.max(startLL.lng, endLL.lng),
-	Math.max(startLL.lat, endLL.lat)
-	)
-	},
-	
-	calculateCircle(center, radius, segments) {
-	const positions = []
-	const centerLL = Cesium.Cartographic.fromCartesian(center)
-	
-	for (let i = 0; i < segments; i++) {
-	const angle = (i / segments) * Math.PI * 2
-	const lat = centerLL.latitude + (radius / 6378137) * Math.sin(angle)
-	const lon = centerLL.longitude + (radius / 6378137) * Math.cos(angle) / Math.cos(centerLL.latitude)
-	
-	positions.push(Cesium.Cartesian3.fromRadians(lon, lat))
-	}
-	
-	return positions
-	},
-	
-	calculateLineLength(positions) {
-	let totalLength = 0
-	for (let i = 0; i < positions.length - 1; i++) {
-	totalLength += Cesium.Cartesian3.distance(positions[i], positions[i + 1])
-	}
-	return totalLength
-	},
-	
-	calculatePolygonArea(positions) {
-	if (positions.length < 3) return 0
-	
-	let area = 0
-	const n = positions.length
-	
-	for (let i = 0; i < n; i++) {
-	const j = (i + 1) % n
-	const p1 = Cesium.Cartographic.fromCartesian(positions[i])
-	const p2 = Cesium.Cartographic.fromCartesian(positions[j])
-	
-	area += p1.longitude * p2.latitude - p2.longitude * p1.latitude
-	}
-	
-	area = Math.abs(area) * 6378137 * 6378137 / 2
-	return area
-	},
-	
-	calculateRectangleArea(coordinates) {
-	const rect = coordinates.getValue ? coordinates.getValue() : coordinates
-	const width = Cesium.Cartesian3.distance(
-	Cesium.Cartesian3.fromRadians(rect.west, rect.north),
-	Cesium.Cartesian3.fromRadians(rect.east, rect.north)
-	)
-	const height = Cesium.Cartesian3.distance(
-	Cesium.Cartesian3.fromRadians(rect.west, rect.north),
-	Cesium.Cartesian3.fromRadians(rect.west, rect.south)
-	)
-	
-	return width * height
-	},
-	
-	// ================== 实体管理 ==================
-	
-	selectEntity(entity) {
-	this.selectedEntity = entity
-	
-	// 居中显示
-	if (entity.type === 'point') {
-	this.viewer.camera.flyTo({
-	destination: Cesium.Cartesian3.fromDegrees(entity.lng, entity.lat, 1000),
-	duration: 1.0
-	})
-	} else if (entity.positions && entity.positions.length > 0) {
-	const rectangle = Cesium.Rectangle.fromCartographicArray(
-	entity.positions.map(p => Cesium.Cartographic.fromCartesian(p))
-	)
-	this.viewer.camera.flyTo({
-	destination: rectangle,
-	duration: 1.0
-	})
-	}
-	},
-	
-	updateEntityStyle() {
-	if (!this.selectedEntity || !this.selectedEntity.entity) return
-	
-	const entity = this.selectedEntity.entity
-	const data = this.selectedEntity
-	
-	switch(data.type) {
-	case 'point':
-	entity.point.color = Cesium.Color.fromCssColorString(data.color)
-	entity.point.pixelSize = data.size
-	break
-	case 'line':
-	entity.polyline.material = Cesium.Color.fromCssColorString(data.color)
-	entity.polyline.width = data.width
-	break
-	case 'polygon':
-	entity.polygon.material = Cesium.Color.fromCssColorString(data.color).withAlpha(data.opacity)
-	entity.polygon.outlineColor = Cesium.Color.fromCssColorString(data.color)
-	entity.polygon.outlineWidth = data.width
-	break
-	case 'rectangle':
-	entity.rectangle.material = Cesium.Color.fromCssColorString(data.color).withAlpha(data.opacity)
-	entity.rectangle.outlineColor = Cesium.Color.fromCssColorString(data.color)
-	entity.rectangle.outlineWidth = data.width
-	break
-	case 'circle':
-	entity.polygon.material = Cesium.Color.fromCssColorString(data.color).withAlpha(data.opacity)
-	entity.polygon.outlineColor = Cesium.Color.fromCssColorString(data.color)
-	entity.polygon.outlineWidth = data.width
-	break
-	}
-	},
-	
-	updateEntityLabel() {
-	if (!this.selectedEntity || !this.selectedEntity.entity) return
-	
-	const entity = this.selectedEntity.entity
-	entity.name = this.selectedEntity.label
-	
-	// 如果是点，更新标签
-	if (this.selectedEntity.type === 'point') {
-	entity.label.text = this.selectedEntity.label
-	}
-	},
-	
-	deleteSelectedEntity() {
-	if (this.selectedEntity) {
-	this.removeEntity(this.selectedEntity.id)
-	this.selectedEntity = null
-	}
-	},
-	
-	removeEntity(id) {
-	const index = this.allEntities.findIndex(e => e.id === id)
-	if (index > -1) {
-	const entity = this.allEntities[index]
-	
-	// 从地图中移除
-	if (entity.entity) {
-	this.viewer.entities.remove(entity.entity)
-	}
-	
-	// 从数组中移除
-	this.allEntities.splice(index, 1)
-	
-	// 如果删除的是选中的实体，清空选中状态
-	if (this.selectedEntity && this.selectedEntity.id === id) {
-	this.selectedEntity = null
-	}
-	}
-	},
-	
-	clearAll() {
-	// 停止绘制
-	this.stopDrawing()
-	this.drawingMode = null
-	
-	// 移除所有实体
-	this.allEntities.forEach(entity => {
-	if (entity.entity) {
-	this.viewer.entities.remove(entity.entity)
-	}
-	})
-	
-	// 清空数组
-	this.allEntities = []
-	this.entityCounter = 0
-	this.selectedEntity = null
-	this.measurementResult = null
-	
-	console.log('已清除所有图形')
-	},
-	
-	// ================== 其他方法 ==================
-	
-	getTypeName(type) {
-	const names = {
-	point: '点',
-	line: '线',
-	polygon: '面',
-	rectangle: '矩形',
-	circle: '圆形'
-	}
-	return names[type] || type
-	},
-	
-	exportData() {
-	const data = {
-	version: '1.0',
-	date: new Date().toISOString(),
-	entities: this.allEntities.map(entity => ({
-	id: entity.id,
-	type: entity.type,
-	label: entity.label,
-	color: entity.color,
-	data: entity.type === 'point' ? {
-	lat: entity.lat,
-	lng: entity.lng
-	} : entity.type === 'line' || entity.type === 'polygon' ? {
-	points: entity.points
-	} : entity.type === 'rectangle' ? {
-	coordinates: entity.coordinates
-	} : {
-	center: entity.center,
-	radius: entity.radius
-	}
-	}))
-	}
-	
-	const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
-	const url = URL.createObjectURL(blob)
-	const a = document.createElement('a')
-	a.href = url
-	a.download = `cesium-drawing-${new Date().toISOString().slice(0, 10)}.json`
-	a.click()
-	URL.revokeObjectURL(url)
-	
-	console.log('数据已导出', data)
-	},
-	
-	initScaleBar() {
-	// ... 原有的比例尺代码保持不变
-	},
-	
-	updateScaleBar() {
-	// ... 原有的比例尺更新代码保持不变
-	},
-	
-	destroyViewer() {
-	this.stopDrawing()
-	this.clearAll()
-	
-	if (this.viewer) {
-	this.viewer.destroy()
-	this.viewer = null
-	}
-	}
-	}
-	}
-	</script>
-	
-	<style scoped>
-	.cesium-container {
-	width: 100vw;
-	height: 100vh;
-	position: relative;
-	}
-	
-	#cesiumViewer {
-	width: 100%;
-	height: 100%;
-	}
-	
-	/* 主工具栏 - 修改后 */
-	.main-toolbar {
-	position: absolute;
-	top: 100px;
-	right: 20px;
-	z-index: 1000;
-	display: flex;
-	background: rgba(255, 255, 255, 0.95);
-	border-radius: 12px;
-	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-	transition: all 0.3s ease;
-	}
-	
-	.main-toolbar.collapsed {
-	background: rgba(255, 255, 255, 0.9);
-	}
-	
-	/* 工具栏内容 */
-	.toolbar-content {
-	display: flex;
-	flex-direction: column;
-	gap: 15px;
-	padding: 15px;
-	min-width: 180px;
-	}
-	
-	/* 收起按钮 */
-	.collapse-btn {
-	display: flex;
-	align-items: center;
-	padding: 10px;
-	cursor: pointer;
-	background: #f8f9fa;
-	border-top-left-radius: 12px;
-	border-bottom-left-radius: 12px;
-	border-right: 1px solid #e9ecef;
-	transition: all 0.3s ease;
-	user-select: none;
-	}
-	
-	.collapse-btn:hover {
-	background: #e9ecef;
-	}
-	
-	.collapse-icon {
-	font-size: 14px;
-	font-weight: bold;
-	color: #495057;
-	margin-right: 5px;
-	}
-	
-	.collapse-text {
-	font-size: 12px;
-	color: #6c757d;
-	white-space: nowrap;
-	}
-	
-	/* 工具栏组 */
-	.toolbar-group {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	padding-bottom: 10px;
-	border-bottom: 1px solid #e9ecef;
-	}
-	
-	.toolbar-group:last-child {
-	border-bottom: none;
-	padding-bottom: 0;
-	}
-	
-	/* 收起时的最小化工具栏 */
-	.toolbar-minimized {
-	display: flex;
-	flex-direction: column;
-	padding: 10px 8px;
-	gap: 8px;
-	}
-	
-	.min-tool-btn {
-	width: 36px;
-	height: 36px;
-	border: 2px solid #e9ecef;
-	border-radius: 8px;
-	background: white;
-	cursor: pointer;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: 16px;
-	color: #495057;
-	transition: all 0.3s ease;
-	}
-	
-	.min-tool-btn:hover {
-	background: #f8f9fa;
-	border-color: #4dabf7;
-	transform: translateY(-2px);
-	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-	}
-	
-	.min-tool-btn.active {
-	background: #4dabf7;
-	color: white;
-	border-color: #4dabf7;
-	}
-	
-	.min-tool-btn:disabled {
-	opacity: 0.5;
-	cursor: not-allowed;
-	transform: none !important;
-	}
-	
-	.min-tool-btn.danger {
-	color: #dc3545;
-	}
-	
-	.min-tool-btn.danger:hover {
-	background: #f8d7da;
-	border-color: #dc3545;
-	}
-	
-	.min-tool-btn.success {
-	color: #28a745;
-	}
-	
-	.min-tool-btn.success:hover {
-	background: #d4edda;
-	border-color: #28a745;
-	}
-	
-	.min-tool-separator {
-	height: 1px;
-	background: #e9ecef;
-	margin: 5px 0;
-	}
-	
-	/* 原来的工具按钮样式保持不变，但添加展开/收起状态的调整 */
-	.tool-btn {
-	padding: 10px 15px;
-	background: white;
-	border: 2px solid #e9ecef;
-	border-radius: 8px;
-	cursor: pointer;
-	display: flex;
-	align-items: center;
-	gap: 10px;
-	font-size: 14px;
-	font-weight: 500;
-	color: #495057;
-	transition: all 0.3s ease;
-	min-width: 120px;
-	}
-	
-	.tool-btn:hover {
-	background: #f8f9fa;
-	border-color: #4dabf7;
-	transform: translateY(-2px);
-	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-	}
-	
-	.tool-btn.active {
-	background: #4dabf7;
-	color: white;
-	border-color: #4dabf7;
-	}
-	
-	.tool-btn:disabled {
-	opacity: 0.5;
-	cursor: not-allowed;
-	transform: none !important;
-	}
-	
-	.tool-btn.danger {
-	color: #dc3545;
-	}
-	
-	.tool-btn.danger:hover {
-	background: #f8d7da;
-	border-color: #dc3545;
-	}
-	
-	.tool-btn.success {
-	color: #28a745;
-	}
-	
-	.tool-btn.success:hover {
-	background: #d4edda;
-	border-color: #28a745;
-	}
-	
-	.tool-btn .icon {
-	font-size: 16px;
-	width: 20px;
-	text-align: center;
-	}
-	
-	.tool-btn .text {
-	white-space: nowrap;
-	}
-	
-	/* 其他样式保持不变... */
-	
-	/* 属性面板 */
-	.property-panel {
-	position: absolute;
-	top: 20px;
-	left: 20px;
-	z-index: 1000;
-	background: rgba(255, 255, 255, 0.98);
-	border-radius: 12px;
-	padding: 20px;
-	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-	min-width: 250px;
-	max-width: 300px;
-	}
-	
-	/* 测量结果面板 */
-	.measurement-panel {
-	position: absolute;
-	bottom: 80px;
-	left: 20px;
-	z-index: 1000;
-	background: rgba(255, 255, 255, 0.98);
-	border-radius: 12px;
-	padding: 15px;
-	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-	min-width: 200px;
-	}
-	
-	/* 自定义比例尺样式 */
-	:deep(.scale-bar-container) {
-	user-select: none;
-	pointer-events: none;
-	}
-	
-	/* 隐藏Cesium的默认控件 */
-	:deep(.cesium-viewer-bottom) {
-	display: none !important;
-	}
-	
-	:deep(.cesium-credit-logoContainer) {
-	display: none !important;
-	}
-	
-	:deep(.cesium-credit-textContainer) {
-	display: none !important;
-	}
-	
-	/* 响应式调整 */
-	@media (max-width: 768px) {
-	.main-toolbar {
-	right: 10px;
-	top: 80px;
-	}
-	
-	.toolbar-content {
-	min-width: 150px;
-	}
-	
-	.tool-btn {
-	min-width: 100px;
-	padding: 8px 12px;
-	}
-	}
-	</style>
+  <div class="cesium-container">
+    <div id="cesiumViewer" ref="cesiumViewer"></div>
 
+    <!-- 主工具栏 -->
+    <div class="main-toolbar" v-if="drawDomClick" :class="{ collapsed: isToolbarCollapsed }">
+      <!-- 展开/收起按钮 -->
+      <!-- <div class="collapse-btn" @click="toggleToolbar">
+        <span class="collapse-icon">{{ isToolbarCollapsed ? '▶' : '◀' }}</span>
+        <span class="collapse-text" v-if="!isToolbarCollapsed">收起</span>
+      </div> -->
+
+      <!-- 工具栏内容 -->
+      <div class="toolbar-content"  v-show="!isToolbarCollapsed">
+        <div class="toolbar-group">
+          <button
+            @click="toggleDrawing('point')"
+            :class="{ active: drawingMode === 'point' }"
+            title="点"
+            class="tool-btn"
+          >
+            <span class="icon">📍</span>
+            <span class="text">{{ drawingMode === 'point' ? '停止' : '点' }}</span>
+          </button>
+
+          <button
+            @click="toggleDrawing('line')"
+            :class="{ active: drawingMode === 'line' }"
+            title="线"
+            class="tool-btn"
+          >
+            <span class="icon">📏</span>
+            <span class="text">{{ drawingMode === 'line' ? '停止' : '线' }}</span>
+          </button>
+
+          <button
+            @click="toggleDrawing('polygon')"
+            :class="{ active: drawingMode === 'polygon' }"
+            title="面"
+            class="tool-btn"
+          >
+            <span class="icon">🔶</span>
+            <span class="text">{{ drawingMode === 'polygon' ? '停止' : '面' }}</span>
+          </button>
+        </div>
+
+        <div class="toolbar-group">
+          <button
+            @click="toggleDrawing('rectangle')"
+            :class="{ active: drawingMode === 'rectangle' }"
+            title="矩形"
+            class="tool-btn"
+          >
+            <span class="icon">⬜</span>
+            <span class="text">{{ drawingMode === 'rectangle' ? '停止' : '矩形' }}</span>
+          </button>
+
+          <button
+            @click="toggleDrawing('circle')"
+            :class="{ active: drawingMode === 'circle' }"
+            title="圆形"
+            class="tool-btn"
+          >
+            <span class="icon">⭕</span>
+            <span class="text">{{ drawingMode === 'circle' ? '停止' : '圆形' }}</span>
+          </button>
+        </div>
+
+        <div class="toolbar-group">
+          <button
+            @click="clearAll"
+            :disabled="!allEntities.length"
+            title="清除所有"
+            class="tool-btn danger"
+          >
+            <span class="icon">🗑️</span>
+            <span class="text">清除</span>
+          </button>
+
+          <button
+            @click="exportData"
+            :disabled="!allEntities.length"
+            title="导出数据"
+            class="tool-btn success"
+          >
+            <span class="icon">💾</span>
+            <span class="text">导出</span>
+          </button>
+        </div>
+      </div>
+
+      <!-- 收起时的最小化工具栏 -->
+      <div class="toolbar-minimized" v-show="isToolbarCollapsed">
+        <button
+          @click="toggleDrawing('point')"
+          :class="{ active: drawingMode === 'point' }"
+          title="点"
+          class="min-tool-btn"
+        >
+          <span class="icon">📍</span>
+        </button>
+        <button
+          @click="toggleDrawing('line')"
+          :class="{ active: drawingMode === 'line' }"
+          title="线"
+          class="min-tool-btn"
+        >
+          <span class="icon">📏</span>
+        </button>
+        <button
+          @click="toggleDrawing('polygon')"
+          :class="{ active: drawingMode === 'polygon' }"
+          title="面"
+          class="min-tool-btn"
+        >
+          <span class="icon">🔶</span>
+        </button>
+        <button
+          @click="toggleDrawing('rectangle')"
+          :class="{ active: drawingMode === 'rectangle' }"
+          title="矩形"
+          class="min-tool-btn"
+        >
+          <span class="icon">⬜</span>
+        </button>
+        <button
+          @click="toggleDrawing('circle')"
+          :class="{ active: drawingMode === 'circle' }"
+          title="圆形"
+          class="min-tool-btn"
+        >
+          <span class="icon">⭕</span>
+        </button>
+        <div class="min-tool-separator"></div>
+        <button
+          @click="clearAll"
+          :disabled="!allEntities.length"
+          title="清除所有"
+          class="min-tool-btn danger"
+        >
+          <span class="icon">🗑️</span>
+        </button>
+        <button
+          @click="exportData"
+          :disabled="!allEntities.length"
+          title="导出数据"
+          class="min-tool-btn success"
+        >
+          <span class="icon">💾</span>
+        </button>
+      </div>
+    </div>
+
+    <!-- 测量结果显示 -->
+    <div class="measurement-panel" v-if="measurementResult">
+      <div class="measurement-content">
+        <h5>测量结果</h5>
+        <div class="measurement-item" v-if="measurementResult.distance">
+          <span>长度：</span>
+          <strong>{{ measurementResult.distance.toFixed(2) }} 米</strong>
+        </div>
+        <div class="measurement-item" v-if="measurementResult.area">
+          <span>面积：</span>
+          <strong>{{ measurementResult.area.toFixed(2) }} 平方米</strong>
+        </div>
+        <div class="measurement-item" v-if="measurementResult.radius">
+          <span>半径：</span>
+          <strong>{{ measurementResult.radius.toFixed(2) }} 米</strong>
+        </div>
+        <button @click="measurementResult = null" class="close-btn">关闭</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import * as Cesium from 'cesium'
+// import 'cesium/Build/Cesium/Widgets/widgets.css'
+export default {
+  name: 'CesiumMap',
+  props: {
+    drawDomClick: {
+      type: Boolean,
+      default: false,
+      // 增加 props 类型校验，方便调试
+      validator(val) {
+        const isBoolean = typeof val === 'boolean'
+        if (!isBoolean) {
+          console.error('drawDomClick 必须是布尔值，当前值：', val, '类型：', typeof val)
+        }
+        return isBoolean
+      }
+    },
+  },
+  watch: {
+    drawDomClick: {
+      immediate: true, // 组件初始化时立即执行一次
+      handler(newVal, oldVal) {
+        // 可选：如果需要在值变化时执行额外逻辑（比如初始化地图）
+        if (newVal) {
+          // this.initMap()
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      viewer: null,
+      scaleBar: null,
+      isToolbarCollapsed: false,
+
+      // 绘制相关
+      drawingMode: null, // 'point', 'line', 'polygon', 'rectangle', 'circle'
+      drawingHandler: null,
+      tempEntity: null,
+      drawingPoints: [],
+      drawingStartPoint: null,
+      isDrawing: false,
+
+      // 实体管理
+      allEntities: [], // 所有绘制的实体
+      entityCounter: 0,
+      selectedEntity: null, // 当前选中的实体
+
+      // 测量结果
+      measurementResult: null,
+
+      // 默认样式
+      defaultStyles: {
+        point: { color: '#FF0000', size: 12 },
+        line: { color: '#00FF00', width: 3 },
+        polygon: { color: '#0000FF', opacity: 0.5, width: 2 },
+        rectangle: { color: '#FFA500', opacity: 0.3, width: 2 },
+        circle: { color: '#800080', opacity: 0.4, width: 2 }
+      }
+    }
+  },
+
+  mounted() {
+    console.log(this.drawDomClick,999999)
+    // this.initMap()
+    this.checkCesiumLoaded()
+  },
+
+  beforeDestroy() {
+    this.destroyViewer()
+  },
+
+  methods: {
+    // 切换工具栏展开/收起
+    toggleToolbar() {
+      this.isToolbarCollapsed = !this.isToolbarCollapsed
+    },
+    checkCesiumLoaded() {
+      if (typeof Cesium === 'undefined') {
+        console.error('Cesium未加载，请检查CDN链接');
+        // 可以设置重试机制
+        setTimeout(() => {
+          if (typeof Cesium !== 'undefined') {
+            this.initMap();
+          } else {
+            console.error('Cesium加载失败');
+          }
+        }, 1000);
+      } else {
+        this.initMap();
+      }
+    },
+    initMap() {
+      try {
+        // 确保 Cesium 已加载
+    // Cesium.buildModuleUrl.setBaseUrl(window.CESIUM_BASE_URL)
+        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjN2MzMmE5OS01NGU3LTQzOGQtYjdjZi1mNGIwZTFjZjQ0NmEiLCJpZCI6MTQ0MDc2LCJpYXQiOjE2ODU3NjY1OTN9.iCmFY-5WNdvyAT-EO2j-unrFm4ZN9J6aSuB2wElQZ-I'
+
+        this.viewer = new Cesium.Viewer('cesiumViewer', {
+          animation: false,
+          fullscreenButton: false,
+          baseLayerPicker: false,
+          navigationInstructionsInitiallyVisible: false,
+          geocoder: false,
+          homeButton: false,
+          infoBox: false,
+          sceneModePicker: false,
+          selectionIndicator: false,
+          timeline: false,
+          navigationHelpButton: false,
+          sceneMode: Cesium.SceneMode.SCENE2D,
+          mapProjection: new Cesium.WebMercatorProjection(),
+          imageryProvider: false,
+          terrainProvider: new Cesium.EllipsoidTerrainProvider(),
+          baseLayer: false
+        })
+
+        this.viewer.cesiumWidget.creditContainer.style.display = "none"
+        this.loadOfflineMap()
+        this.setup2DConstraints()
+
+        this.viewer.camera.setView({
+          destination: Cesium.Cartesian3.fromDegrees(116.3974, 39.9093, 5000000),
+          orientation: {
+            heading: 0,
+            pitch: -Cesium.Math.PI_OVER_TWO,
+            roll: 0
+          }
+        })
+
+        this.initScaleBar()
+        console.log('Cesium离线二维地图已加载')
+
+      } catch (error) {
+        console.error('地图错误:', error)
+        // 如果Cesium加载失败，显示错误信息
+        this.showErrorMessage();
+      }
+    },
+    showErrorMessage() {
+      const container = document.getElementById('cesiumViewer');
+      if (container) {
+        container.innerHTML = `
+          <div style="
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            background: #f5f5f5;
+            color: #666;
+            font-family: Arial, sans-serif;
+          ">
+            <h3 style="margin-bottom: 20px;">地图加载失败</h3>
+            <p>可能的原因：</p>
+            <ul style="text-align: left; margin: 10px 0;">
+              <li>网络连接问题</li>
+              <li>Cesium CDN资源未加载</li>
+              <li>浏览器兼容性问题</li>
+            </ul>
+            <button onclick="location.reload()" style="
+              margin-top: 20px;
+              padding: 10px 20px;
+              background: #4dabf7;
+              color: white;
+              border: none;
+              border-radius: 4px;
+              cursor: pointer;
+            ">
+              重新加载
+            </button>
+          </div>
+        `;
+      }
+    },
+
+    setup2DConstraints() {
+      const scene = this.viewer.scene
+      const controller = scene.screenSpaceCameraController
+
+      controller.enableTilt = false
+      controller.enableRotate = false
+      controller.enableLook = false
+      scene.screenSpaceCameraController.maximumPitch = 0
+      scene.screenSpaceCameraController.minimumPitch = 0
+    },
+
+    loadOfflineMap() {
+      this.viewer.imageryLayers.removeAll()
+
+      try {
+        const offlineProvider = new Cesium.UrlTemplateImageryProvider({
+          url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+          minimumLevel: 0,
+          maximumLevel: 18,
+          tileWidth: 256,
+          tileHeight: 256,
+          tilingScheme: new Cesium.WebMercatorTilingScheme(),
+          credit: '离线地图'
+        })
+
+        this.viewer.imageryLayers.addImageryProvider(offlineProvider)
+
+      } catch (error) {
+        console.error('加载离线地图失败:', error)
+        this.showGridLayer()
+      }
+    },
+
+    showGridLayer() {
+      const gridProvider = new Cesium.GridImageryProvider()
+      this.viewer.imageryLayers.addImageryProvider(gridProvider)
+      this.addCoordinateLabels()
+    },
+
+    addCoordinateLabels() {
+      for (let lon = -180; lon <= 180; lon += 30) {
+        for (let lat = -90; lat <= 90; lat += 30) {
+          this.viewer.entities.add({
+            position: Cesium.Cartesian3.fromDegrees(lon, lat),
+            label: {
+              text: `${lat}°N\n${lon}°E`,
+              font: '12px sans-serif',
+              fillColor: Cesium.Color.BLACK,
+              outlineColor: Cesium.Color.WHITE,
+              outlineWidth: 2,
+              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+              verticalOrigin: Cesium.VerticalOrigin.CENTER,
+              pixelOffset: new Cesium.Cartesian2(10, 0)
+            }
+          })
+        }
+      }
+    },
+
+    // ================== 绘制功能 ==================
+
+    toggleDrawing(mode) {
+      if (this.drawingMode === mode) {
+        // 停止当前绘制
+        this.stopDrawing()
+        this.drawingMode = null
+      } else {
+        // 停止之前的绘制
+        if (this.drawingMode) {
+          this.stopDrawing()
+        }
+
+        // 开始新的绘制
+        this.drawingMode = mode
+        this.startDrawing(mode)
+      }
+    },
+
+    startDrawing(mode) {
+      this.stopDrawing()
+      this.drawingPoints = []
+      this.drawingStartPoint = null
+      this.isDrawing = true
+
+      this.drawingHandler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
+
+      // 根据模式设置不同的鼠标样式和事件
+      switch(mode) {
+        case 'point':
+          this.startPointDrawing()
+          break
+        case 'line':
+          this.startLineDrawing()
+          break
+        case 'polygon':
+          this.startPolygonDrawing()
+          break
+        case 'rectangle':
+          this.startRectangleDrawing()
+          break
+        case 'circle':
+          this.startCircleDrawing()
+          break
+      }
+
+      this.viewer.scene.canvas.style.cursor = 'crosshair'
+      console.log(`开始绘制 ${this.getTypeName(mode)}`)
+    },
+
+    stopDrawing() {
+      if (this.drawingHandler) {
+        this.drawingHandler.destroy()
+        this.drawingHandler = null
+      }
+
+      if (this.tempEntity) {
+        this.viewer.entities.remove(this.tempEntity)
+        this.tempEntity = null
+      }
+
+      this.drawingPoints = []
+      this.drawingStartPoint = null
+      this.isDrawing = false
+
+      this.viewer.scene.canvas.style.cursor = 'default'
+    },
+    // ********************************************************************
+    // 绘制点
+    startPointDrawing() {
+      this.drawingHandler.setInputAction((click) => {
+        const position = this.getClickPosition(click.position)
+        if (position) {
+          const { lat, lng } = this.cartesianToLatLng(position)
+          this.addPointEntity(lat, lng)
+        }
+      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+    },
+
+    // 绘制线
+    startLineDrawing() {
+      this.drawingHandler.setInputAction((click) => {
+        const position = this.getClickPosition(click.position)
+        if (position) {
+          this.drawingPoints.push(position)
+
+          // 更新临时线
+          if (this.tempEntity) {
+            this.viewer.entities.remove(this.tempEntity)
+          }
+
+          if (this.drawingPoints.length > 1) {
+            this.tempEntity = this.viewer.entities.add({
+              polyline: {
+                positions: this.drawingPoints,
+                width: this.defaultStyles.line.width,
+                material: Cesium.Color.fromCssColorString(this.defaultStyles.line.color),
+                clampToGround: true
+              }
+            })
+          }
+        }
+      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+
+      // 右键完成绘制
+      this.drawingHandler.setInputAction(() => {
+        if (this.drawingPoints.length > 1) {
+          this.finishLineDrawing()
+        } else {
+          this.cancelDrawing()
+        }
+      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
+    },
+
+    finishLineDrawing() {
+      const positions = [...this.drawingPoints]
+      const entity = this.addLineEntity(positions)
+
+      // 计算长度
+      const length = this.calculateLineLength(positions)
+      this.measurementResult = {
+        distance: length,
+        type: 'line'
+      }
+
+      this.stopDrawing()
+      return entity
+    },
+
+    // 绘制多边形
+    startPolygonDrawing() {
+      this.drawingHandler.setInputAction((click) => {
+        const position = this.getClickPosition(click.position)
+        if (position) {
+          this.drawingPoints.push(position)
+
+          // 更新临时多边形
+          if (this.tempEntity) {
+            this.viewer.entities.remove(this.tempEntity)
+          }
+
+          if (this.drawingPoints.length > 2) {
+            // 闭合多边形
+            const polygonPoints = [...this.drawingPoints, this.drawingPoints[0]]
+            this.tempEntity = this.viewer.entities.add({
+              polygon: {
+                hierarchy: new Cesium.PolygonHierarchy(polygonPoints),
+                material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color)
+                  .withAlpha(this.defaultStyles.polygon.opacity),
+                outline: true,
+                outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color),
+                outlineWidth: this.defaultStyles.polygon.width
+              }
+            })
+          } else if (this.drawingPoints.length === 2) {
+            // 只有两个点时显示线
+            this.tempEntity = this.viewer.entities.add({
+              polyline: {
+                positions: this.drawingPoints,
+                width: this.defaultStyles.polygon.width,
+                material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color),
+                clampToGround: true
+              }
+            })
+          } else if (this.drawingPoints.length === 1) {
+            // 只有一个点时显示点
+            this.tempEntity = this.viewer.entities.add({
+              position: this.drawingPoints[0],
+              point: {
+                pixelSize: 8,
+                color: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color)
+              }
+            })
+          }
+        }
+      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+
+      // 双击完成绘制
+      this.drawingHandler.setInputAction((click) => {
+        if (this.drawingPoints.length > 2) {
+          this.finishPolygonDrawing()
+        }
+      }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
+
+      // 右键取消
+      this.drawingHandler.setInputAction(() => {
+        this.cancelDrawing()
+      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
+    },
+
+    finishPolygonDrawing() {
+      const positions = [...this.drawingPoints]
+      const entity = this.addPolygonEntity(positions)
+
+      // 计算面积
+      const area = this.calculatePolygonArea(positions)
+      this.measurementResult = {
+        area: area,
+        type: 'polygon'
+      }
+
+      this.stopDrawing()
+      return entity
+    },
+
+    // 绘制矩形
+    startRectangleDrawing() {
+      let startPosition = null
+
+      this.drawingHandler.setInputAction((click) => {
+        startPosition = this.getClickPosition(click.position)
+        if (startPosition) {
+          this.drawingStartPoint = startPosition
+        }
+      }, Cesium.ScreenSpaceEventType.LEFT_DOWN)
+
+      this.drawingHandler.setInputAction((movement) => {
+        if (startPosition) {
+          const endPosition = this.getClickPosition(movement.endPosition)
+          if (endPosition) {
+            // 更新临时矩形
+            if (this.tempEntity) {
+              this.viewer.entities.remove(this.tempEntity)
+            }
+
+            const rectangle = this.calculateRectangle(startPosition, endPosition)
+            this.tempEntity = this.viewer.entities.add({
+              rectangle: {
+                coordinates: rectangle,
+                material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color)
+                  .withAlpha(this.defaultStyles.rectangle.opacity),
+                outline: true,
+                outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color),
+                outlineWidth: this.defaultStyles.rectangle.width
+              }
+            })
+          }
+        }
+      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
+
+      this.drawingHandler.setInputAction(() => {
+        if (startPosition && this.tempEntity) {
+          this.finishRectangleDrawing(startPosition)
+          startPosition = null
+        }
+      }, Cesium.ScreenSpaceEventType.LEFT_UP)
+
+      // 右键取消
+      this.drawingHandler.setInputAction(() => {
+        this.cancelDrawing()
+      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
+    },
+
+    finishRectangleDrawing(startPosition) {
+      if (!this.tempEntity) return
+
+      const rectangleCoords = this.tempEntity.rectangle.coordinates.getValue()
+      const entity = this.addRectangleEntity(rectangleCoords)
+
+      // 计算面积
+      const area = this.calculateRectangleArea(rectangleCoords)
+      this.measurementResult = {
+        area: area,
+        type: 'rectangle'
+      }
+
+      this.stopDrawing()
+      return entity
+    },
+
+    // 绘制圆形
+    startCircleDrawing() {
+      let centerPosition = null
+      let radius = 0
+
+      this.drawingHandler.setInputAction((click) => {
+        centerPosition = this.getClickPosition(click.position)
+        if (centerPosition) {
+          this.drawingStartPoint = centerPosition
+
+          // 创建中心点
+          if (this.tempEntity) {
+            this.viewer.entities.remove(this.tempEntity)
+          }
+
+          this.tempEntity = this.viewer.entities.add({
+            position: centerPosition,
+            point: {
+              pixelSize: 8,
+              color: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color)
+            }
+          })
+        }
+      }, Cesium.ScreenSpaceEventType.LEFT_DOWN)
+
+      this.drawingHandler.setInputAction((movement) => {
+        if (centerPosition) {
+          const currentPosition = this.getClickPosition(movement.endPosition)
+          if (currentPosition) {
+            radius = Cesium.Cartesian3.distance(centerPosition, currentPosition)
+
+            // 更新临时圆形
+            if (this.tempEntity) {
+              this.viewer.entities.remove(this.tempEntity)
+            }
+
+            // 创建圆形多边形
+            const positions = this.calculateCircle(centerPosition, radius, 64)
+            this.tempEntity = this.viewer.entities.add({
+              polygon: {
+                hierarchy: new Cesium.PolygonHierarchy(positions),
+                material: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color)
+                  .withAlpha(this.defaultStyles.circle.opacity),
+                outline: true,
+                outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color),
+                outlineWidth: this.defaultStyles.circle.width
+              }
+            })
+          }
+        }
+      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
+
+      this.drawingHandler.setInputAction(() => {
+        if (centerPosition && radius > 0) {
+          this.finishCircleDrawing(centerPosition, radius)
+          centerPosition = null
+          radius = 0
+        }
+      }, Cesium.ScreenSpaceEventType.LEFT_UP)
+
+      // 右键取消
+      // this.drawingHandler.setInputAction(() => {
+      //   this.cancelDrawing()
+      // }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
+    },
+
+    finishCircleDrawing(center, radius) {
+      const positions = this.calculateCircle(center, radius, 64)
+      const entity = this.addCircleEntity(center, radius, positions)
+
+      // 计算面积
+      const area = Math.PI * radius * radius
+      this.measurementResult = {
+        area: area,
+        radius: radius,
+        type: 'circle'
+      }
+
+      this.stopDrawing()
+      return entity
+    },
+
+    cancelDrawing() {
+      this.stopDrawing()
+      this.drawingMode = null
+    },
+
+    // ================== 实体创建方法 ==================
+
+    addPointEntity(lat, lng) {
+      this.entityCounter++
+      const id = `point_${this.entityCounter}`
+
+      const entity = this.viewer.entities.add({
+        id: id,
+        name: `点 ${this.entityCounter}`,
+        position: Cesium.Cartesian3.fromDegrees(lng, lat),
+        point: {
+          pixelSize: this.defaultStyles.point.size,
+          color: Cesium.Color.fromCssColorString(this.defaultStyles.point.color),
+          outlineColor: Cesium.Color.WHITE,
+          outlineWidth: 2
+        },
+        label: {
+          text: `${this.entityCounter}`,
+          font: '14px Arial',
+          fillColor: Cesium.Color.WHITE,
+          outlineColor: Cesium.Color.BLACK,
+          outlineWidth: 2,
+          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+          verticalOrigin: Cesium.VerticalOrigin.CENTER,
+          horizontalOrigin: Cesium.HorizontalOrigin.CENTER
+        }
+      })
+
+      const entityData = {
+        id,
+        type: 'point',
+        lat,
+        lng,
+        entity: entity,
+        color: this.defaultStyles.point.color,
+        size: this.defaultStyles.point.size,
+        label: `点 ${this.entityCounter}`
+      }
+
+      this.allEntities.push(entityData)
+
+      // 添加点击事件
+      entity.clickHandler = (e) => {
+        this.selectEntity(entityData)
+        e.stopPropagation()
+      }
+
+      return entityData
+    },
+
+    addLineEntity(positions) {
+      this.entityCounter++
+      const id = `line_${this.entityCounter}`
+
+      const entity = this.viewer.entities.add({
+        id: id,
+        name: `线 ${this.entityCounter}`,
+        polyline: {
+          positions: positions,
+          width: this.defaultStyles.line.width,
+          material: Cesium.Color.fromCssColorString(this.defaultStyles.line.color),
+          clampToGround: true
+        }
+      })
+
+      const entityData = {
+        id,
+        type: 'line',
+        points: positions.map(p => this.cartesianToLatLng(p)),
+        positions: positions,
+        entity: entity,
+        color: this.defaultStyles.line.color,
+        width: this.defaultStyles.line.width,
+        label: `线 ${this.entityCounter}`
+      }
+
+      this.allEntities.push(entityData)
+
+      entity.clickHandler = (e) => {
+        this.selectEntity(entityData)
+        e.stopPropagation()
+      }
+
+      return entityData
+    },
+
+    addPolygonEntity(positions) {
+      this.entityCounter++
+      const id = `polygon_${this.entityCounter}`
+
+      // 闭合多边形
+      const polygonPositions = [...positions, positions[0]]
+
+      const entity = this.viewer.entities.add({
+        id: id,
+        name: `面 ${this.entityCounter}`,
+        polygon: {
+          hierarchy: new Cesium.PolygonHierarchy(polygonPositions),
+          material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color)
+            .withAlpha(this.defaultStyles.polygon.opacity),
+          outline: true,
+          outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color),
+          outlineWidth: this.defaultStyles.polygon.width
+        }
+      })
+
+      const entityData = {
+        id,
+        type: 'polygon',
+        points: positions.map(p => this.cartesianToLatLng(p)),
+        positions: polygonPositions,
+        entity: entity,
+        color: this.defaultStyles.polygon.color,
+        opacity: this.defaultStyles.polygon.opacity,
+        width: this.defaultStyles.polygon.width,
+        label: `面 ${this.entityCounter}`
+      }
+
+      this.allEntities.push(entityData)
+
+      entity.clickHandler = (e) => {
+        this.selectEntity(entityData)
+        e.stopPropagation()
+      }
+
+      return entityData
+    },
+
+    addRectangleEntity(coordinates) {
+      this.entityCounter++
+      const id = `rectangle_${this.entityCounter}`
+
+      const entity = this.viewer.entities.add({
+        id: id,
+        name: `矩形 ${this.entityCounter}`,
+        rectangle: {
+          coordinates: coordinates,
+          material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color)
+            .withAlpha(this.defaultStyles.rectangle.opacity),
+          outline: true,
+          outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color),
+          outlineWidth: this.defaultStyles.rectangle.width
+        }
+      })
+
+      const entityData = {
+        id,
+        type: 'rectangle',
+        coordinates: coordinates,
+        entity: entity,
+        color: this.defaultStyles.rectangle.color,
+        opacity: this.defaultStyles.rectangle.opacity,
+        width: this.defaultStyles.rectangle.width,
+        label: `矩形 ${this.entityCounter}`
+      }
+
+      this.allEntities.push(entityData)
+
+      entity.clickHandler = (e) => {
+        this.selectEntity(entityData)
+        e.stopPropagation()
+      }
+
+      return entityData
+    },
+
+    addCircleEntity(center, radius, positions) {
+      this.entityCounter++
+      const id = `circle_${this.entityCounter}`
+
+      const entity = this.viewer.entities.add({
+        id: id,
+        name: `圆形 ${this.entityCounter}`,
+        polygon: {
+          hierarchy: new Cesium.PolygonHierarchy(positions),
+          material: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color)
+            .withAlpha(this.defaultStyles.circle.opacity),
+          outline: true,
+          outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color),
+          outlineWidth: this.defaultStyles.circle.width
+        },
+        position: center,
+        point: {
+          pixelSize: 5,
+          color: Cesium.Color.RED
+        }
+      })
+
+      const centerLL = this.cartesianToLatLng(center)
+      const entityData = {
+        id,
+        type: 'circle',
+        center: centerLL,
+        radius: radius,
+        positions: positions,
+        entity: entity,
+        color: this.defaultStyles.circle.color,
+        opacity: this.defaultStyles.circle.opacity,
+        width: this.defaultStyles.circle.width,
+        label: `圆形 ${this.entityCounter}`
+      }
+
+      this.allEntities.push(entityData)
+
+      entity.clickHandler = (e) => {
+        this.selectEntity(entityData)
+        e.stopPropagation()
+      }
+
+      return entityData
+    },
+
+    // ================== 工具方法 ==================
+
+    getClickPosition(pixelPosition) {
+      const cartesian = this.viewer.camera.pickEllipsoid(pixelPosition, this.viewer.scene.globe.ellipsoid)
+      return cartesian
+    },
+
+    cartesianToLatLng(cartesian) {
+      const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
+      return {
+        lat: Cesium.Math.toDegrees(cartographic.latitude),
+        lng: Cesium.Math.toDegrees(cartographic.longitude)
+      }
+    },
+
+    calculateRectangle(start, end) {
+      const startLL = this.cartesianToLatLng(start)
+      const endLL = this.cartesianToLatLng(end)
+
+      return Cesium.Rectangle.fromDegrees(
+        Math.min(startLL.lng, endLL.lng),
+        Math.min(startLL.lat, endLL.lat),
+        Math.max(startLL.lng, endLL.lng),
+        Math.max(startLL.lat, endLL.lat)
+      )
+    },
+
+    calculateCircle(center, radius, segments) {
+      const positions = []
+      const centerLL = Cesium.Cartographic.fromCartesian(center)
+
+      for (let i = 0; i < segments; i++) {
+        const angle = (i / segments) * Math.PI * 2
+        const lat = centerLL.latitude + (radius / 6378137) * Math.sin(angle)
+        const lon = centerLL.longitude + (radius / 6378137) * Math.cos(angle) / Math.cos(centerLL.latitude)
+
+        positions.push(Cesium.Cartesian3.fromRadians(lon, lat))
+      }
+
+      return positions
+    },
+
+    calculateLineLength(positions) {
+      let totalLength = 0
+      for (let i = 0; i < positions.length - 1; i++) {
+        totalLength += Cesium.Cartesian3.distance(positions[i], positions[i + 1])
+      }
+      return totalLength
+    },
+
+    calculatePolygonArea(positions) {
+      if (positions.length < 3) return 0
+
+      let area = 0
+      const n = positions.length
+
+      for (let i = 0; i < n; i++) {
+        const j = (i + 1) % n
+        const p1 = Cesium.Cartographic.fromCartesian(positions[i])
+        const p2 = Cesium.Cartographic.fromCartesian(positions[j])
+
+        area += p1.longitude * p2.latitude - p2.longitude * p1.latitude
+      }
+
+      area = Math.abs(area) * 6378137 * 6378137 / 2
+      return area
+    },
+
+    calculateRectangleArea(coordinates) {
+      const rect = coordinates.getValue ? coordinates.getValue() : coordinates
+      const width = Cesium.Cartesian3.distance(
+        Cesium.Cartesian3.fromRadians(rect.west, rect.north),
+        Cesium.Cartesian3.fromRadians(rect.east, rect.north)
+      )
+      const height = Cesium.Cartesian3.distance(
+        Cesium.Cartesian3.fromRadians(rect.west, rect.north),
+        Cesium.Cartesian3.fromRadians(rect.west, rect.south)
+      )
+
+      return width * height
+    },
+
+    // ================== 实体管理 ==================
+
+    selectEntity(entity) {
+      this.selectedEntity = entity
+
+      // 居中显示
+      if (entity.type === 'point') {
+        this.viewer.camera.flyTo({
+          destination: Cesium.Cartesian3.fromDegrees(entity.lng, entity.lat, 1000),
+          duration: 1.0
+        })
+      } else if (entity.positions && entity.positions.length > 0) {
+        const rectangle = Cesium.Rectangle.fromCartographicArray(
+          entity.positions.map(p => Cesium.Cartographic.fromCartesian(p))
+        )
+        this.viewer.camera.flyTo({
+          destination: rectangle,
+          duration: 1.0
+        })
+      }
+    },
+
+    updateEntityStyle() {
+      if (!this.selectedEntity || !this.selectedEntity.entity) return
+
+      const entity = this.selectedEntity.entity
+      const data = this.selectedEntity
+
+      switch(data.type) {
+        case 'point':
+          entity.point.color = Cesium.Color.fromCssColorString(data.color)
+          entity.point.pixelSize = data.size
+          break
+        case 'line':
+          entity.polyline.material = Cesium.Color.fromCssColorString(data.color)
+          entity.polyline.width = data.width
+          break
+        case 'polygon':
+          entity.polygon.material = Cesium.Color.fromCssColorString(data.color).withAlpha(data.opacity)
+          entity.polygon.outlineColor = Cesium.Color.fromCssColorString(data.color)
+          entity.polygon.outlineWidth = data.width
+          break
+        case 'rectangle':
+          entity.rectangle.material = Cesium.Color.fromCssColorString(data.color).withAlpha(data.opacity)
+          entity.rectangle.outlineColor = Cesium.Color.fromCssColorString(data.color)
+          entity.rectangle.outlineWidth = data.width
+          break
+        case 'circle':
+          entity.polygon.material = Cesium.Color.fromCssColorString(data.color).withAlpha(data.opacity)
+          entity.polygon.outlineColor = Cesium.Color.fromCssColorString(data.color)
+          entity.polygon.outlineWidth = data.width
+          break
+      }
+    },
+
+    updateEntityLabel() {
+      if (!this.selectedEntity || !this.selectedEntity.entity) return
+
+      const entity = this.selectedEntity.entity
+      entity.name = this.selectedEntity.label
+
+      // 如果是点，更新标签
+      if (this.selectedEntity.type === 'point') {
+        entity.label.text = this.selectedEntity.label
+      }
+    },
+
+    deleteSelectedEntity() {
+      if (this.selectedEntity) {
+        this.removeEntity(this.selectedEntity.id)
+        this.selectedEntity = null
+      }
+    },
+
+    removeEntity(id) {
+      const index = this.allEntities.findIndex(e => e.id === id)
+      if (index > -1) {
+        const entity = this.allEntities[index]
+
+        // 从地图中移除
+        if (entity.entity) {
+          this.viewer.entities.remove(entity.entity)
+        }
+
+        // 从数组中移除
+        this.allEntities.splice(index, 1)
+
+        // 如果删除的是选中的实体，清空选中状态
+        if (this.selectedEntity && this.selectedEntity.id === id) {
+          this.selectedEntity = null
+        }
+      }
+    },
+
+    clearAll() {
+      // 停止绘制
+      this.stopDrawing()
+      this.drawingMode = null
+
+      // 移除所有实体
+      this.allEntities.forEach(entity => {
+        if (entity.entity) {
+          this.viewer.entities.remove(entity.entity)
+        }
+      })
+
+      // 清空数组
+      this.allEntities = []
+      this.entityCounter = 0
+      this.selectedEntity = null
+      this.measurementResult = null
+
+      console.log('已清除所有图形')
+    },
+
+    // ================== 其他方法 ==================
+
+    getTypeName(type) {
+      const names = {
+        point: '点',
+        line: '线',
+        polygon: '面',
+        rectangle: '矩形',
+        circle: '圆形'
+      }
+      return names[type] || type
+    },
+
+    exportData() {
+      const data = {
+        version: '1.0',
+        date: new Date().toISOString(),
+        entities: this.allEntities.map(entity => ({
+          id: entity.id,
+          type: entity.type,
+          label: entity.label,
+          color: entity.color,
+          data: entity.type === 'point' ? {
+            lat: entity.lat,
+            lng: entity.lng
+          } : entity.type === 'line' || entity.type === 'polygon' ? {
+            points: entity.points
+          } : entity.type === 'rectangle' ? {
+            coordinates: entity.coordinates
+          } : {
+            center: entity.center,
+            radius: entity.radius
+          }
+        }))
+      }
+
+      const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = `cesium-drawing-${new Date().toISOString().slice(0, 10)}.json`
+      a.click()
+      URL.revokeObjectURL(url)
+
+      console.log('数据已导出', data)
+    },
+
+    initScaleBar() {
+      // ... 原有的比例尺代码保持不变
+    },
+
+    updateScaleBar() {
+      // ... 原有的比例尺更新代码保持不变
+    },
+
+    destroyViewer() {
+      this.stopDrawing()
+      this.clearAll()
+
+      if (this.viewer) {
+        this.viewer.destroy()
+        this.viewer = null
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.cesium-container {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+}
+
+#cesiumViewer {
+  width: 100%;
+  height: 100%;
+}
+
+/* 主工具栏 - 修改后 */
+.main-toolbar {
+  position: absolute;
+  top: 365px; /* 增大这个数值即可整体下移，比如从100px改成150px */
+  left: 62px;
+  z-index: 1000;
+  display: flex;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  transition: all 0.3s ease;
+}
+
+.main-toolbar.collapsed {
+  background: rgba(255, 255, 255, 0.9);
+}
+
+/* 工具栏内容 - 无需修改 */
+.toolbar-content {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  padding: 15px;
+  min-width: 180px;
+}
+
+/* 收起按钮 */
+.collapse-btn {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  cursor: pointer;
+  background: #f8f9fa;
+  border-top-left-radius: 12px;
+  border-bottom-left-radius: 12px;
+  border-right: 1px solid #e9ecef;
+  transition: all 0.3s ease;
+  user-select: none;
+}
+
+.collapse-btn:hover {
+  background: #e9ecef;
+}
+
+.collapse-icon {
+  font-size: 14px;
+  font-weight: bold;
+  color: #495057;
+  margin-right: 5px;
+}
+
+.collapse-text {
+  font-size: 12px;
+  color: #6c757d;
+  white-space: nowrap;
+}
+
+/* 工具栏组 */
+.toolbar-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #e9ecef;
+}
+
+.toolbar-group:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+/* 收起时的最小化工具栏 */
+.toolbar-minimized {
+  display: flex;
+  flex-direction: column;
+  padding: 10px 8px;
+  gap: 8px;
+}
+
+.min-tool-btn {
+  width: 36px;
+  height: 36px;
+  border: 2px solid #e9ecef;
+  border-radius: 8px;
+  background: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  color: #495057;
+  transition: all 0.3s ease;
+}
+
+.min-tool-btn:hover {
+  background: #f8f9fa;
+  border-color: #4dabf7;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.min-tool-btn.active {
+  background: #4dabf7;
+  color: white;
+  border-color: #4dabf7;
+}
+
+.min-tool-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none !important;
+}
+
+.min-tool-btn.danger {
+  color: #dc3545;
+}
+
+.min-tool-btn.danger:hover {
+  background: #f8d7da;
+  border-color: #dc3545;
+}
+
+.min-tool-btn.success {
+  color: #28a745;
+}
+
+.min-tool-btn.success:hover {
+  background: #d4edda;
+  border-color: #28a745;
+}
+
+.min-tool-separator {
+  height: 1px;
+  background: #e9ecef;
+  margin: 5px 0;
+}
+
+/* 原来的工具按钮样式保持不变，但添加展开/收起状态的调整 */
+.tool-btn {
+  padding: 10px 15px;
+  background: white;
+  border: 2px solid #e9ecef;
+  border-radius: 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #495057;
+  transition: all 0.3s ease;
+  min-width: 120px;
+}
+
+.tool-btn:hover {
+  background: #f8f9fa;
+  border-color: #4dabf7;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.tool-btn.active {
+  background: #4dabf7;
+  color: white;
+  border-color: #4dabf7;
+}
+
+.tool-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none !important;
+}
+
+.tool-btn.danger {
+  color: #dc3545;
+}
+
+.tool-btn.danger:hover {
+  background: #f8d7da;
+  border-color: #dc3545;
+}
+
+.tool-btn.success {
+  color: #28a745;
+}
+
+.tool-btn.success:hover {
+  background: #d4edda;
+  border-color: #28a745;
+}
+
+.tool-btn .icon {
+  font-size: 16px;
+  width: 20px;
+  text-align: center;
+}
+
+.tool-btn .text {
+  white-space: nowrap;
+}
+
+/* 其他样式保持不变... */
+
+/* 属性面板 */
+.property-panel {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  z-index: 1000;
+  background: rgba(255, 255, 255, 0.98);
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  min-width: 250px;
+  max-width: 300px;
+}
+
+/* 测量结果面板 */
+.measurement-panel {
+  position: absolute;
+  bottom: 80px;
+  left: 20px;
+  z-index: 1000;
+  background: rgba(255, 255, 255, 0.98);
+  border-radius: 12px;
+  padding: 15px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  min-width: 200px;
+}
+
+/* 自定义比例尺样式 */
+:deep(.scale-bar-container) {
+  user-select: none;
+  pointer-events: none;
+}
+
+/* 隐藏Cesium的默认控件 */
+:deep(.cesium-viewer-bottom) {
+  display: none !important;
+}
+
+:deep(.cesium-credit-logoContainer) {
+  display: none !important;
+}
+
+:deep(.cesium-credit-textContainer) {
+  display: none !important;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .main-toolbar {
+    right: 10px;
+    top: 80px;
+  }
+
+  .toolbar-content {
+    min-width: 150px;
+  }
+
+  .tool-btn {
+    min-width: 100px;
+    padding: 8px 12px;
+  }
+}
+</style>
diff --git a/ruoyi-ui/src/views/childRoom/index.vue b/ruoyi-ui/src/views/childRoom/index.vue
index 2101f41..e61d778 100644
--- a/ruoyi-ui/src/views/childRoom/index.vue
+++ b/ruoyi-ui/src/views/childRoom/index.vue
@@ -4,7 +4,7 @@
     <!-- 地图背景 -->
     <div id="gis-map-background" class="map-background">
       <!-- cesiummap组件 -->
-      <cesiumMap/>
+      <cesiumMap :drawDomClick="drawDom"/>
       <div class="map-overlay-text">
         <i class="el-icon-location-outline text-3xl mb-2 block"></i>
         <p>二维GIS地图区域</p>
@@ -430,6 +430,7 @@ export default {
   },
   data() {
     return {
+      drawDom:false,
       // 顶部导航
       activeTopNav: 'file',
       topNavItems: [
@@ -605,7 +606,10 @@ export default {
     
     selectMenu(item) {
       this.activeMenu = item.id;
-      
+      if(item.id === 'modify'){
+          this.drawDom = !this.drawDom
+          console.log(this.drawDom,999999)
+        }
       if (item.id === 'deduction') {
         // 点击推演按钮，显示/隐藏K时弹出框
         this.showKTimePopup = !this.showKTimePopup;
@@ -617,6 +621,7 @@ export default {
       } else {
         // 其他菜单的原有逻辑
         this.$message.info(`选择菜单: ${item.name}`);
+        
       }
     },