You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2159 lines
71 KiB
2159 lines
71 KiB
<template>
|
|
<div class="cesium-container">
|
|
<div id="cesiumViewer" ref="cesiumViewer"></div>
|
|
|
|
<drawing-toolbar
|
|
:draw-dom-click="drawDomClick"
|
|
:drawing-mode="drawingMode"
|
|
:has-entities="allEntities.length > 0"
|
|
@toggle-drawing="toggleDrawing"
|
|
@clear-all="clearAll"
|
|
@export-data="exportData"
|
|
@import-data="importData"
|
|
@locate="handleLocate"
|
|
/>
|
|
|
|
<measurement-panel
|
|
v-if="measurementResult"
|
|
:result="measurementResult"
|
|
@close="measurementResult = null"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as Cesium from 'cesium'
|
|
import 'cesium/Build/Cesium/Widgets/widgets.css'
|
|
import DrawingToolbar from './DrawingToolbar.vue'
|
|
import MeasurementPanel from './MeasurementPanel.vue'
|
|
import axios from 'axios'
|
|
import request from '@/utils/request'
|
|
import { getToken } from '@/utils/auth'
|
|
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,
|
|
|
|
// 绘制相关
|
|
drawingMode: null, // 'point', 'line', 'polygon', 'rectangle', 'circle'
|
|
drawingHandler: null,
|
|
tempEntity: null, // 最终实体
|
|
tempPreviewEntity: 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 },
|
|
sector: { color: '#FF6347', opacity: 0.5, width: 2 },
|
|
arrow: { color: '#FF0000', width: 6 },
|
|
text: { color: '#000000', font: '32px Microsoft YaHei, PingFang SC, sans-serif', backgroundColor: 'rgba(255, 255, 255, 0.8)' },
|
|
image: { width: 100, height: 100 }
|
|
}
|
|
}
|
|
},
|
|
components: {
|
|
DrawingToolbar,
|
|
MeasurementPanel
|
|
},
|
|
mounted() {
|
|
console.log(this.drawDomClick,999999)
|
|
// this.initMap()
|
|
this.checkCesiumLoaded()
|
|
},
|
|
|
|
beforeDestroy() {
|
|
this.destroyViewer()
|
|
},
|
|
|
|
methods: {
|
|
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 {
|
|
// 修改部分：将原来的 ArcGIS 卫星图替换为高德矢量行政图
|
|
const administrativeMap = new Cesium.UrlTemplateImageryProvider({
|
|
// 高德地图矢量瓦片服务（纯 2D 行政图风格）
|
|
url: 'https://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
|
|
minimumLevel: 0,
|
|
maximumLevel: 18,
|
|
// 高德不需要专门的 TilingScheme，默认即可，或者使用 WebMercator
|
|
tilingScheme: new Cesium.WebMercatorTilingScheme()
|
|
})
|
|
|
|
this.viewer.imageryLayers.addImageryProvider(administrativeMap)
|
|
|
|
// 如果需要叠加路网或注记，可以在这里再 add 一个图层
|
|
|
|
} 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
|
|
case 'sector':
|
|
this.startSectorDrawing()
|
|
break
|
|
case 'arrow':
|
|
this.startArrowDrawing()
|
|
break
|
|
case 'text':
|
|
this.startTextDrawing()
|
|
break
|
|
case 'image':
|
|
this.startImageDrawing()
|
|
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;
|
|
}
|
|
|
|
// 确保也清理预览实体
|
|
if (this.tempPreviewEntity) {
|
|
this.viewer.entities.remove(this.tempPreviewEntity);
|
|
this.tempPreviewEntity = 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.drawingPoints = [];
|
|
// 记录当前鼠标的实时位置
|
|
let activeCursorPosition = null;
|
|
|
|
// 清除可能存在的旧实体
|
|
if (this.tempEntity) this.viewer.entities.remove(this.tempEntity);
|
|
if (this.tempPreviewEntity) this.viewer.entities.remove(this.tempPreviewEntity);
|
|
this.tempEntity = null;
|
|
this.tempPreviewEntity = null;
|
|
|
|
// 1. 鼠标移动事件：仅更新坐标变量，不操作实体
|
|
this.drawingHandler.setInputAction((movement) => {
|
|
const newPosition = this.getClickPosition(movement.endPosition);
|
|
if (newPosition) {
|
|
activeCursorPosition = newPosition;
|
|
}
|
|
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|
|
|
// 2. 鼠标点击事件：确定点位
|
|
this.drawingHandler.setInputAction((click) => {
|
|
const position = this.getClickPosition(click.position);
|
|
if (position) {
|
|
this.drawingPoints.push(position);
|
|
|
|
// === 第一步：点击第一个点后，立即创建“动态虚线” ===
|
|
if (this.drawingPoints.length === 1) {
|
|
activeCursorPosition = position; // 初始化鼠标位置
|
|
|
|
// 创建预览虚线（只创建这一次，之后它会自动随数据更新）
|
|
this.tempPreviewEntity = this.viewer.entities.add({
|
|
polyline: {
|
|
// 关键：使用 CallbackProperty 动态获取位置
|
|
positions: new Cesium.CallbackProperty(() => {
|
|
// 只有当有点且鼠标位置存在时才渲染
|
|
if (this.drawingPoints.length > 0 && activeCursorPosition) {
|
|
// 获取最后一个已确认的点
|
|
const lastPoint = this.drawingPoints[this.drawingPoints.length - 1];
|
|
// 返回 [最后一个点, 当前鼠标位置]
|
|
return [lastPoint, activeCursorPosition];
|
|
}
|
|
return [];
|
|
}, false),
|
|
width: this.defaultStyles.line.width,
|
|
// 虚线材质
|
|
material: new Cesium.PolylineDashMaterialProperty({
|
|
color: Cesium.Color.fromCssColorString(this.defaultStyles.line.color),
|
|
dashLength: 16
|
|
}),
|
|
clampToGround: true // 贴地
|
|
}
|
|
});
|
|
}
|
|
// === 第二步：点击后续点时，绘制/延长“固定实线” ===
|
|
else {
|
|
// 移除旧的实线，重新画包含新点的实线
|
|
if (this.tempEntity) {
|
|
this.viewer.entities.remove(this.tempEntity);
|
|
}
|
|
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);
|
|
|
|
// 3. 右键完成绘制
|
|
this.drawingHandler.setInputAction(() => {
|
|
// 完成绘制前，移除那条动态虚线
|
|
if (this.tempPreviewEntity) {
|
|
this.viewer.entities.remove(this.tempPreviewEntity);
|
|
this.tempPreviewEntity = null;
|
|
}
|
|
|
|
if (this.drawingPoints.length > 1) {
|
|
this.finishLineDrawing();
|
|
} else {
|
|
this.cancelDrawing();
|
|
}
|
|
|
|
// 重置局部变量
|
|
activeCursorPosition = null;
|
|
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
|
},
|
|
|
|
finishLineDrawing() {
|
|
// 将预览线段转换为最终线段
|
|
if (this.drawingPoints.length > 1) {
|
|
// 移除预览线段
|
|
if (this.tempPreviewEntity) {
|
|
this.viewer.entities.remove(this.tempPreviewEntity);
|
|
this.tempPreviewEntity = null;
|
|
}
|
|
|
|
// 创建最终的实线实体
|
|
const entity = this.addLineEntity([...this.drawingPoints]);
|
|
|
|
// 计算长度
|
|
const length = this.calculateLineLength([...this.drawingPoints]);
|
|
this.measurementResult = {
|
|
distance: length,
|
|
type: 'line'
|
|
};
|
|
|
|
this.stopDrawing();
|
|
return entity;
|
|
} else {
|
|
this.cancelDrawing();
|
|
return null;
|
|
}
|
|
},
|
|
|
|
// 绘制多边形
|
|
startPolygonDrawing() {
|
|
this.drawingPoints = [];
|
|
let activeCursorPosition = null; // 存储鼠标实时位置
|
|
|
|
// 1. 清理旧实体
|
|
// 移除之前可能遗留的实体，确保干净的画布
|
|
if (this.tempEntity) this.viewer.entities.remove(this.tempEntity);
|
|
if (this.tempPreviewEntity) this.viewer.entities.remove(this.tempPreviewEntity);
|
|
this.tempEntity = null;
|
|
this.tempPreviewEntity = null;
|
|
|
|
// 2. 鼠标移动事件：只负责更新坐标变量，不涉及繁重的绘图逻辑
|
|
this.drawingHandler.setInputAction((movement) => {
|
|
const newPosition = this.getClickPosition(movement.endPosition);
|
|
if (newPosition) {
|
|
activeCursorPosition = newPosition;
|
|
}
|
|
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|
|
|
// 3. 鼠标点击事件：添加关键点
|
|
this.drawingHandler.setInputAction((click) => {
|
|
const position = this.getClickPosition(click.position);
|
|
if (position) {
|
|
this.drawingPoints.push(position);
|
|
|
|
// === 关键逻辑：点击第一个点时，创建唯一的“动态多边形” ===
|
|
if (this.drawingPoints.length === 1) {
|
|
activeCursorPosition = position; // 初始化鼠标位置
|
|
|
|
this.tempEntity = this.viewer.entities.add({
|
|
// --- 填充面配置 ---
|
|
polygon: {
|
|
// hierarchy 使用 CallbackProperty 实现动态填充
|
|
hierarchy: new Cesium.CallbackProperty(() => {
|
|
// 组合：已确定的点 + 当前鼠标位置
|
|
if (activeCursorPosition) {
|
|
return new Cesium.PolygonHierarchy([...this.drawingPoints, activeCursorPosition]);
|
|
}
|
|
return new Cesium.PolygonHierarchy(this.drawingPoints);
|
|
}, false),
|
|
// 使用半透明颜色，方便看到地图底图
|
|
material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color).withAlpha(0.5),
|
|
// 确保贴地
|
|
perPositionHeight: false
|
|
},
|
|
// --- 边框线配置 ---
|
|
polyline: {
|
|
// positions 使用 CallbackProperty 实现动态闭合线
|
|
positions: new Cesium.CallbackProperty(() => {
|
|
if (activeCursorPosition) {
|
|
// 闭合回路：[所有点, 鼠标位置, 回到起点]
|
|
return [...this.drawingPoints, activeCursorPosition, this.drawingPoints[0]];
|
|
}
|
|
return this.drawingPoints;
|
|
}, false),
|
|
width: this.defaultStyles.line.width,
|
|
// 边框使用虚线，表示正在编辑中
|
|
material: new Cesium.PolylineDashMaterialProperty({
|
|
color: Cesium.Color.fromCssColorString(this.defaultStyles.line.color),
|
|
dashLength: 16
|
|
}),
|
|
clampToGround: true
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
|
// 4. 右键完成绘制
|
|
this.drawingHandler.setInputAction(() => {
|
|
if (this.drawingPoints.length >= 3) {
|
|
this.finishPolygonDrawing(); // 调用原有的完成逻辑
|
|
} else {
|
|
this.cancelDrawing(); // 点数不够则取消
|
|
}
|
|
|
|
// 重置状态
|
|
activeCursorPosition = null;
|
|
}, 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() {
|
|
this.drawingPoints = []; // 存储起点和终点
|
|
let activeCursorPosition = null; // 实时鼠标位置
|
|
let startPoint = null; // 记录起点
|
|
|
|
// 1. 清理旧实体
|
|
if (this.tempEntity) this.viewer.entities.remove(this.tempEntity);
|
|
this.tempEntity = null;
|
|
|
|
// 2. 鼠标移动事件：更新鼠标位置
|
|
this.drawingHandler.setInputAction((movement) => {
|
|
const newPosition = this.getClickPosition(movement.endPosition);
|
|
if (newPosition) {
|
|
activeCursorPosition = newPosition;
|
|
}
|
|
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|
|
|
// 3. 鼠标点击事件
|
|
this.drawingHandler.setInputAction((click) => {
|
|
const position = this.getClickPosition(click.position);
|
|
if (position) {
|
|
// --- 情况A：第一次点击（确定起点） ---
|
|
if (!startPoint) {
|
|
startPoint = position;
|
|
this.drawingPoints.push(startPoint);
|
|
activeCursorPosition = startPoint; // 初始化鼠标位置
|
|
|
|
// 创建动态预览矩形
|
|
this.tempEntity = this.viewer.entities.add({
|
|
rectangle: {
|
|
// 关键：使用 CallbackProperty 动态计算矩形范围
|
|
coordinates: new Cesium.CallbackProperty(() => {
|
|
if (startPoint && activeCursorPosition) {
|
|
// 使用 Cesium 内置工具，根据两个点（对角）自动计算矩形范围
|
|
return Cesium.Rectangle.fromCartesianArray([startPoint, activeCursorPosition]);
|
|
}
|
|
return Cesium.Rectangle.fromDegrees(0, 0, 0, 0);
|
|
}, false),
|
|
// 样式：半透明填充 + 边框
|
|
material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color).withAlpha(0.5),
|
|
outline: true,
|
|
outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.line.color),
|
|
outlineWidth: 2,
|
|
clampToGround: true // 贴地
|
|
}
|
|
});
|
|
}
|
|
// --- 情况B：第二次点击（确定终点） ---
|
|
else {
|
|
this.drawingPoints.push(position);
|
|
// 停止监听鼠标移动，因为形状已确定
|
|
activeCursorPosition = null;
|
|
|
|
// 调用完成逻辑
|
|
this.finishRectangleDrawing();
|
|
}
|
|
}
|
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
|
// 4. 右键取消
|
|
this.drawingHandler.setInputAction(() => {
|
|
this.cancelDrawing();
|
|
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
|
},
|
|
|
|
finishRectangleDrawing() {
|
|
// 1. 获取最终的矩形范围对象
|
|
const rect = Cesium.Rectangle.fromCartesianArray(this.drawingPoints);
|
|
|
|
// 2. 移除动态预览的临时实体
|
|
if (this.tempEntity) {
|
|
this.viewer.entities.remove(this.tempEntity);
|
|
this.tempEntity = null;
|
|
}
|
|
|
|
// 3. 创建最终显示的静态实体
|
|
const finalEntity = this.viewer.entities.add({
|
|
id: 'rectangle-' + new Date().getTime(), // 给个唯一ID
|
|
rectangle: {
|
|
coordinates: rect,
|
|
material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color).withAlpha(0.5),
|
|
outline: true,
|
|
outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.line.color),
|
|
outlineWidth: 2,
|
|
clampToGround: true
|
|
}
|
|
});
|
|
|
|
// 4. 记录到实体列表
|
|
this.allEntities.push(finalEntity);
|
|
|
|
// 5. 计算并显示面积
|
|
const area = this.calculateRectangleArea(rect);
|
|
this.measurementResult = {
|
|
area: area,
|
|
type: 'rectangle'
|
|
};
|
|
|
|
// 6. 重置状态
|
|
this.stopDrawing();
|
|
},
|
|
|
|
// 计算矩形面积（辅助方法）
|
|
calculateRectangleArea(rectangle) {
|
|
// 获取地球椭球体对象
|
|
const ellipsoid = this.viewer.scene.globe.ellipsoid;
|
|
|
|
// 方法一：使用 Cesium 几何管道计算（更精确，但需要特定模块支持）
|
|
// const geometry = new Cesium.RectangleGeometry({ rectangle: rectangle });
|
|
// const geometryInstance = Cesium.RectangleGeometry.createGeometry(geometry);
|
|
// ...比较复杂
|
|
|
|
// 方法二：使用采样估算（简单且足够精确）
|
|
// 获取矩形的四个角（弧度）
|
|
const west = rectangle.west;
|
|
const south = rectangle.south;
|
|
const east = rectangle.east;
|
|
const north = rectangle.north;
|
|
|
|
// 计算中心点的纬度
|
|
const centerLat = (south + north) / 2;
|
|
|
|
// 计算宽度（东西向距离）：使用余弦定理校正纬度影响
|
|
// 地球半径约为 6378137 米
|
|
const R = 6378137;
|
|
const width = (east - west) * R * Math.cos(centerLat);
|
|
|
|
// 计算高度（南北向距离）
|
|
const height = (north - south) * R;
|
|
|
|
// 面积 = 宽 * 高
|
|
const area = Math.abs(width * height);
|
|
|
|
return area;
|
|
},
|
|
// 绘制圆形
|
|
startCircleDrawing() {
|
|
this.drawingPoints = []; // 存储圆心
|
|
let activeCursorPosition = null; // 实时鼠标位置
|
|
let centerPoint = null; // 圆心坐标
|
|
|
|
// 1. 清理旧实体
|
|
if (this.tempEntity) this.viewer.entities.remove(this.tempEntity);
|
|
this.tempEntity = null;
|
|
|
|
// 2. 鼠标移动事件
|
|
this.drawingHandler.setInputAction((movement) => {
|
|
const newPosition = this.getClickPosition(movement.endPosition);
|
|
if (newPosition) {
|
|
activeCursorPosition = newPosition;
|
|
}
|
|
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|
|
|
// 3. 鼠标点击事件
|
|
this.drawingHandler.setInputAction((click) => {
|
|
const position = this.getClickPosition(click.position);
|
|
if (position) {
|
|
// --- 情况A：第一次点击（确定圆心） ---
|
|
if (!centerPoint) {
|
|
centerPoint = position;
|
|
this.drawingPoints.push(centerPoint);
|
|
activeCursorPosition = centerPoint;
|
|
|
|
// 创建动态预览圆形
|
|
this.tempEntity = this.viewer.entities.add({
|
|
position: centerPoint, // 圆心固定
|
|
ellipse: {
|
|
// 关键：使用 CallbackProperty 动态计算半径（半长轴和半短轴）
|
|
semiMajorAxis: new Cesium.CallbackProperty(() => {
|
|
if (centerPoint && activeCursorPosition) {
|
|
return Cesium.Cartesian3.distance(centerPoint, activeCursorPosition);
|
|
}
|
|
return 0;
|
|
}, false),
|
|
semiMinorAxis: new Cesium.CallbackProperty(() => {
|
|
if (centerPoint && activeCursorPosition) {
|
|
return Cesium.Cartesian3.distance(centerPoint, activeCursorPosition);
|
|
}
|
|
return 0;
|
|
}, false),
|
|
// 样式设置
|
|
material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color).withAlpha(0.5),
|
|
outline: true,
|
|
outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.line.color),
|
|
outlineWidth: 2,
|
|
// height: 0, // 如果需要贴地可开启或使用 heightReference
|
|
}
|
|
});
|
|
}
|
|
// --- 情况B：第二次点击（确定边缘/半径） ---
|
|
else {
|
|
// 记录边缘点（虽然圆只需要圆心和半径，但记录下来方便后续处理）
|
|
this.drawingPoints.push(position);
|
|
activeCursorPosition = null; // 停止动态更新
|
|
|
|
// 传递边缘点位置去结束绘制
|
|
this.finishCircleDrawing(position);
|
|
}
|
|
}
|
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
|
// 4. 右键取消
|
|
this.drawingHandler.setInputAction(() => {
|
|
this.cancelDrawing();
|
|
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
|
},
|
|
|
|
finishCircleDrawing(edgePosition) {
|
|
const centerPoint = this.drawingPoints[0];
|
|
|
|
// 1. 计算最终半径
|
|
const radius = Cesium.Cartesian3.distance(centerPoint, edgePosition);
|
|
|
|
// 2. 移除动态预览实体
|
|
if (this.tempEntity) {
|
|
this.viewer.entities.remove(this.tempEntity);
|
|
this.tempEntity = null;
|
|
}
|
|
|
|
// 3. 创建最终显示的静态实体
|
|
const finalEntity = this.viewer.entities.add({
|
|
id: 'circle-' + new Date().getTime(),
|
|
position: centerPoint,
|
|
ellipse: {
|
|
semiMajorAxis: radius,
|
|
semiMinorAxis: radius,
|
|
material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color).withAlpha(0.5),
|
|
outline: true,
|
|
outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.line.color),
|
|
outlineWidth: 2
|
|
}
|
|
});
|
|
|
|
// 4. 记录实体
|
|
this.allEntities.push(finalEntity);
|
|
|
|
// 5. 计算面积 (π * r²) 并显示
|
|
// 半径单位是米，面积单位是平方米
|
|
const area = Math.PI * Math.pow(radius, 2);
|
|
|
|
this.measurementResult = {
|
|
radius: radius, // 也可以额外显示半径
|
|
area: area,
|
|
type: 'circle'
|
|
};
|
|
|
|
// 6. 结束绘制状态
|
|
this.stopDrawing();
|
|
},
|
|
|
|
// 绘制扇形
|
|
startSectorDrawing() {
|
|
this.drawingPoints = []; // 存储圆心、半径端点、角度端点
|
|
let activeCursorPosition = null; // 实时鼠标位置
|
|
let centerPoint = null; // 圆心坐标
|
|
let radiusPoint = null; // 半径端点
|
|
let radius = 0; // 半径长度
|
|
|
|
// 1. 清理旧实体
|
|
if (this.tempEntity) this.viewer.entities.remove(this.tempEntity);
|
|
if (this.tempPreviewEntity) this.viewer.entities.remove(this.tempPreviewEntity);
|
|
this.tempEntity = null;
|
|
this.tempPreviewEntity = null;
|
|
|
|
// 2. 鼠标移动事件
|
|
this.drawingHandler.setInputAction((movement) => {
|
|
const newPosition = this.getClickPosition(movement.endPosition);
|
|
if (newPosition) {
|
|
activeCursorPosition = newPosition;
|
|
}
|
|
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|
|
|
// 3. 鼠标点击事件
|
|
this.drawingHandler.setInputAction((click) => {
|
|
const position = this.getClickPosition(click.position);
|
|
if (position) {
|
|
// --- 情况A：第一次点击（确定圆心） ---
|
|
if (!centerPoint) {
|
|
centerPoint = position;
|
|
this.drawingPoints.push(centerPoint);
|
|
activeCursorPosition = centerPoint;
|
|
|
|
// 创建动态预览半径线
|
|
this.tempPreviewEntity = this.viewer.entities.add({
|
|
polyline: {
|
|
positions: new Cesium.CallbackProperty(() => {
|
|
if (centerPoint && activeCursorPosition) {
|
|
return [centerPoint, activeCursorPosition];
|
|
}
|
|
return [];
|
|
}, false),
|
|
width: this.defaultStyles.sector.width,
|
|
material: new Cesium.PolylineDashMaterialProperty({
|
|
color: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color),
|
|
dashLength: 16
|
|
}),
|
|
clampToGround: true
|
|
}
|
|
});
|
|
}
|
|
// --- 情况B：第二次点击（确定半径） ---
|
|
else if (!radiusPoint) {
|
|
radiusPoint = position;
|
|
this.drawingPoints.push(radiusPoint);
|
|
radius = Cesium.Cartesian3.distance(centerPoint, radiusPoint);
|
|
|
|
// 移除半径预览线
|
|
if (this.tempPreviewEntity) {
|
|
this.viewer.entities.remove(this.tempPreviewEntity);
|
|
this.tempPreviewEntity = null;
|
|
}
|
|
|
|
// 创建动态预览扇形
|
|
this.tempEntity = this.viewer.entities.add({
|
|
polygon: {
|
|
hierarchy: new Cesium.CallbackProperty(() => {
|
|
if (centerPoint && activeCursorPosition) {
|
|
const currentRadius = Cesium.Cartesian3.distance(centerPoint, activeCursorPosition);
|
|
const startAngle = this.calculatePointAngle(centerPoint, radiusPoint);
|
|
const endAngle = this.calculatePointAngle(centerPoint, activeCursorPosition);
|
|
const positions = this.generateSectorPositions(centerPoint, currentRadius, startAngle, endAngle);
|
|
return new Cesium.PolygonHierarchy(positions);
|
|
}
|
|
return new Cesium.PolygonHierarchy([]);
|
|
}, false),
|
|
material: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color).withAlpha(0.5),
|
|
outline: true,
|
|
outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color),
|
|
outlineWidth: this.defaultStyles.sector.width
|
|
}
|
|
});
|
|
}
|
|
// --- 情况C：第三次点击（确定角度） ---
|
|
else {
|
|
const anglePoint = position;
|
|
this.drawingPoints.push(anglePoint);
|
|
activeCursorPosition = null; // 停止动态更新
|
|
|
|
// 传递角度点位置去结束绘制
|
|
this.finishSectorDrawing(centerPoint, radiusPoint, anglePoint);
|
|
}
|
|
}
|
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
|
// 4. 右键取消
|
|
this.drawingHandler.setInputAction(() => {
|
|
this.cancelDrawing();
|
|
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
|
},
|
|
|
|
// 完成扇形绘制
|
|
finishSectorDrawing(centerPoint, radiusPoint, anglePoint) {
|
|
const radius = Cesium.Cartesian3.distance(centerPoint, anglePoint);
|
|
const startAngle = this.calculatePointAngle(centerPoint, radiusPoint);
|
|
const endAngle = this.calculatePointAngle(centerPoint, anglePoint);
|
|
|
|
// 1. 移除动态预览实体
|
|
if (this.tempEntity) {
|
|
this.viewer.entities.remove(this.tempEntity);
|
|
this.tempEntity = null;
|
|
}
|
|
|
|
// 2. 生成扇形顶点
|
|
const positions = this.generateSectorPositions(centerPoint, radius, startAngle, endAngle);
|
|
|
|
// 3. 创建最终显示的静态实体
|
|
const finalEntity = this.viewer.entities.add({
|
|
id: 'sector-' + new Date().getTime(),
|
|
name: `扇形 ${this.entityCounter}`,
|
|
polygon: {
|
|
hierarchy: new Cesium.PolygonHierarchy(positions),
|
|
material: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color).withAlpha(0.5),
|
|
outline: true,
|
|
outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color),
|
|
outlineWidth: this.defaultStyles.sector.width,
|
|
perPositionHeight: false
|
|
}
|
|
});
|
|
|
|
// 4. 记录实体
|
|
this.entityCounter++;
|
|
const entityData = {
|
|
id: `sector_${this.entityCounter}`,
|
|
type: 'sector',
|
|
center: this.cartesianToLatLng(centerPoint),
|
|
radius: radius,
|
|
startAngle: startAngle,
|
|
endAngle: endAngle,
|
|
positions: positions,
|
|
entity: finalEntity,
|
|
color: this.defaultStyles.sector.color,
|
|
opacity: 0.5,
|
|
width: this.defaultStyles.sector.width,
|
|
label: `扇形 ${this.entityCounter}`
|
|
};
|
|
this.allEntities.push(entityData);
|
|
|
|
// 5. 结束绘制状态
|
|
this.stopDrawing();
|
|
},
|
|
|
|
// 计算角度
|
|
calculateAngle(center, start, end) {
|
|
const startLL = Cesium.Cartographic.fromCartesian(start);
|
|
const endLL = Cesium.Cartographic.fromCartesian(end);
|
|
const centerLL = Cesium.Cartographic.fromCartesian(center);
|
|
|
|
// 计算两点相对于圆心的角度
|
|
const startAngle = Math.atan2(startLL.longitude - centerLL.longitude, startLL.latitude - centerLL.latitude);
|
|
const endAngle = Math.atan2(endLL.longitude - centerLL.longitude, endLL.latitude - centerLL.latitude);
|
|
|
|
// 返回角度差
|
|
return endAngle - startAngle;
|
|
},
|
|
|
|
// 计算角度差
|
|
calculateAngleDiff(center, start, end) {
|
|
const startLL = Cesium.Cartographic.fromCartesian(start);
|
|
const endLL = Cesium.Cartographic.fromCartesian(end);
|
|
const centerLL = Cesium.Cartographic.fromCartesian(center);
|
|
|
|
// 计算两点相对于圆心的角度
|
|
const startAngle = Math.atan2(startLL.longitude - centerLL.longitude, startLL.latitude - centerLL.latitude);
|
|
const endAngle = Math.atan2(endLL.longitude - centerLL.longitude, endLL.latitude - centerLL.latitude);
|
|
|
|
// 计算角度差（确保为正值）
|
|
let angleDiff = endAngle - startAngle;
|
|
if (angleDiff < 0) {
|
|
angleDiff += 2 * Math.PI;
|
|
}
|
|
|
|
// 确保角度差在合理范围内
|
|
return Math.max(0.1, Math.min(Math.PI * 2, angleDiff));
|
|
},
|
|
|
|
// 计算点相对于圆心的角度
|
|
calculatePointAngle(center, point) {
|
|
const pointLL = Cesium.Cartographic.fromCartesian(point);
|
|
const centerLL = Cesium.Cartographic.fromCartesian(center);
|
|
|
|
// 计算点相对于圆心的角度
|
|
const angle = Math.atan2(pointLL.longitude - centerLL.longitude, pointLL.latitude - centerLL.latitude);
|
|
return angle;
|
|
},
|
|
|
|
// 生成扇形顶点位置
|
|
generateSectorPositions(center, radius, startAngle, endAngle) {
|
|
const positions = [];
|
|
const centerLL = Cesium.Cartographic.fromCartesian(center);
|
|
|
|
// 添加圆心
|
|
positions.push(center);
|
|
|
|
// 计算角度差
|
|
let angleDiff = endAngle - startAngle;
|
|
if (angleDiff < 0) {
|
|
angleDiff += 2 * Math.PI;
|
|
}
|
|
|
|
// 确保角度差不为零
|
|
angleDiff = Math.max(0.01, angleDiff);
|
|
|
|
// 计算扇形的顶点数（根据角度差确定，确保平滑）
|
|
const numPoints = Math.max(5, Math.ceil(angleDiff * 180 / Math.PI / 10));
|
|
const angleStep = angleDiff / (numPoints - 1);
|
|
|
|
// 生成扇形的顶点
|
|
for (let i = 0; i < numPoints; i++) {
|
|
const currentAngle = startAngle + i * angleStep;
|
|
const distance = radius / 6378137; // 转换为弧度
|
|
|
|
const lat = centerLL.latitude + Math.cos(currentAngle) * distance;
|
|
const lng = centerLL.longitude + Math.sin(currentAngle) * distance / Math.cos(centerLL.latitude);
|
|
|
|
const position = Cesium.Cartesian3.fromRadians(lng, lat);
|
|
positions.push(position);
|
|
}
|
|
|
|
// 闭合扇形
|
|
positions.push(center);
|
|
|
|
return positions;
|
|
},
|
|
|
|
// 计算两点之间的距离（米）
|
|
calculateDistance(point1, point2) {
|
|
return Cesium.Cartesian3.distance(point1, point2);
|
|
},
|
|
|
|
// 绘制箭头
|
|
startArrowDrawing() {
|
|
this.drawingPoints = []; // 存储起点和终点
|
|
let activeCursorPosition = null; // 实时鼠标位置
|
|
|
|
// 1. 清理旧实体
|
|
if (this.tempEntity) this.viewer.entities.remove(this.tempEntity);
|
|
if (this.tempPreviewEntity) this.viewer.entities.remove(this.tempPreviewEntity);
|
|
this.tempEntity = null;
|
|
this.tempPreviewEntity = null;
|
|
|
|
// 2. 鼠标移动事件
|
|
this.drawingHandler.setInputAction((movement) => {
|
|
const newPosition = this.getClickPosition(movement.endPosition);
|
|
if (newPosition) {
|
|
activeCursorPosition = newPosition;
|
|
}
|
|
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|
|
|
// 3. 鼠标点击事件
|
|
this.drawingHandler.setInputAction((click) => {
|
|
const position = this.getClickPosition(click.position);
|
|
if (position) {
|
|
this.drawingPoints.push(position);
|
|
|
|
// --- 情况A：第一次点击（确定起点） ---
|
|
if (this.drawingPoints.length === 1) {
|
|
activeCursorPosition = position; // 初始化鼠标位置
|
|
|
|
// 创建动态预览箭头
|
|
this.tempPreviewEntity = this.viewer.entities.add({
|
|
polyline: {
|
|
// 使用 CallbackProperty 动态获取位置
|
|
positions: new Cesium.CallbackProperty(() => {
|
|
// 只有当有点且鼠标位置存在时才渲染
|
|
if (this.drawingPoints.length > 0 && activeCursorPosition) {
|
|
// 获取最后一个已确认的点
|
|
const lastPoint = this.drawingPoints[this.drawingPoints.length - 1];
|
|
// 返回 [最后一个点, 当前鼠标位置]
|
|
return [lastPoint, activeCursorPosition];
|
|
}
|
|
return [];
|
|
}, false),
|
|
width: 8, // 增加宽度以获得更大的箭头头部
|
|
// 使用箭头材质
|
|
material: new Cesium.PolylineArrowMaterialProperty(
|
|
Cesium.Color.fromCssColorString(this.defaultStyles.arrow.color)
|
|
),
|
|
clampToGround: true, // 贴地
|
|
widthInMeters: false // 使用像素宽度模式
|
|
}
|
|
});
|
|
}
|
|
// --- 情况B：第二次点击（确定终点） ---
|
|
else {
|
|
// 停止监听鼠标移动，因为形状已确定
|
|
activeCursorPosition = null;
|
|
|
|
// 调用完成逻辑
|
|
this.finishArrowDrawing();
|
|
}
|
|
}
|
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
|
// 4. 右键取消
|
|
this.drawingHandler.setInputAction(() => {
|
|
this.cancelDrawing();
|
|
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
|
},
|
|
|
|
// 完成箭头绘制
|
|
finishArrowDrawing() {
|
|
// 将预览箭头转换为最终箭头
|
|
if (this.drawingPoints.length > 1) {
|
|
// 移除预览箭头
|
|
if (this.tempPreviewEntity) {
|
|
this.viewer.entities.remove(this.tempPreviewEntity);
|
|
this.tempPreviewEntity = null;
|
|
}
|
|
|
|
// 创建最终的箭头实体
|
|
const entity = this.addArrowEntity([...this.drawingPoints]);
|
|
|
|
this.stopDrawing();
|
|
return entity;
|
|
} else {
|
|
this.cancelDrawing();
|
|
return null;
|
|
}
|
|
},
|
|
|
|
// 添加箭头实体
|
|
addArrowEntity(positions) {
|
|
this.entityCounter++
|
|
const id = `arrow_${this.entityCounter}`
|
|
|
|
// 创建箭头实体，使用固定宽度以确保等比例放大
|
|
const entity = this.viewer.entities.add({
|
|
id: id,
|
|
name: `箭头 ${this.entityCounter}`,
|
|
polyline: {
|
|
positions: positions,
|
|
width: 8, // 增加宽度以获得更大的箭头头部
|
|
material: new Cesium.PolylineArrowMaterialProperty(
|
|
Cesium.Color.fromCssColorString(this.defaultStyles.arrow.color)
|
|
),
|
|
clampToGround: true,
|
|
// 使用像素宽度模式，确保箭头在缩放时保持比例
|
|
widthInMeters: false
|
|
}
|
|
})
|
|
|
|
const entityData = {
|
|
id,
|
|
type: 'arrow',
|
|
points: positions.map(p => this.cartesianToLatLng(p)),
|
|
positions: positions,
|
|
entity: entity,
|
|
color: this.defaultStyles.arrow.color,
|
|
width: this.defaultStyles.arrow.width,
|
|
label: `箭头 ${this.entityCounter}`
|
|
}
|
|
|
|
this.allEntities.push(entityData)
|
|
|
|
entity.clickHandler = (e) => {
|
|
this.selectEntity(entityData)
|
|
e.stopPropagation()
|
|
}
|
|
|
|
return entityData
|
|
},
|
|
|
|
// 绘制文本框
|
|
startTextDrawing() {
|
|
// 1. 清理旧实体
|
|
if (this.tempEntity) this.viewer.entities.remove(this.tempEntity);
|
|
this.tempEntity = null;
|
|
|
|
// 2. 鼠标点击事件
|
|
this.drawingHandler.setInputAction((click) => {
|
|
const position = this.getClickPosition(click.position);
|
|
if (position) {
|
|
// 弹出输入框，让用户输入文本内容
|
|
const text = prompt('请输入文本内容:', '文本');
|
|
if (text) {
|
|
// 创建文本实体
|
|
this.addTextEntity(position, text);
|
|
}
|
|
}
|
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
|
// 3. 右键取消
|
|
this.drawingHandler.setInputAction(() => {
|
|
this.cancelDrawing();
|
|
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
|
},
|
|
|
|
// 添加文本实体
|
|
addTextEntity(position, text) {
|
|
this.entityCounter++
|
|
const id = `text_${this.entityCounter}`
|
|
|
|
// 获取经纬度坐标
|
|
const { lat, lng } = this.cartesianToLatLng(position)
|
|
|
|
const entity = this.viewer.entities.add({
|
|
id: id,
|
|
name: `文本 ${this.entityCounter}`,
|
|
position: position,
|
|
label: {
|
|
text: text,
|
|
font: this.defaultStyles.text.font,
|
|
fillColor: Cesium.Color.fromCssColorString(this.defaultStyles.text.color),
|
|
outlineColor: Cesium.Color.BLACK,
|
|
outlineWidth: 2,
|
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
|
verticalOrigin: Cesium.VerticalOrigin.CENTER,
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
backgroundColor: Cesium.Color.fromCssColorString(this.defaultStyles.text.backgroundColor),
|
|
backgroundPadding: new Cesium.Cartesian2(10, 5),
|
|
pixelOffset: new Cesium.Cartesian2(0, 0),
|
|
// 随地图缩放调整大小
|
|
scaleByDistance: new Cesium.NearFarScalar(
|
|
1000, // 近距离（米）
|
|
1.0, // 近距离时的缩放比例
|
|
1000000, // 远距离（米）
|
|
0.0 // 远距离时的缩放比例
|
|
)
|
|
}
|
|
})
|
|
|
|
const entityData = {
|
|
id,
|
|
type: 'text',
|
|
lat,
|
|
lng,
|
|
text: text,
|
|
position: position,
|
|
entity: entity,
|
|
color: this.defaultStyles.text.color,
|
|
font: this.defaultStyles.text.font,
|
|
backgroundColor: this.defaultStyles.text.backgroundColor,
|
|
label: `文本 ${this.entityCounter}`
|
|
}
|
|
|
|
this.allEntities.push(entityData)
|
|
|
|
entity.clickHandler = (e) => {
|
|
this.selectEntity(entityData)
|
|
e.stopPropagation()
|
|
}
|
|
|
|
return entityData
|
|
},
|
|
|
|
// 绘制图片
|
|
startImageDrawing() {
|
|
// 1. 清理旧实体
|
|
if (this.tempEntity) this.viewer.entities.remove(this.tempEntity);
|
|
this.tempEntity = null;
|
|
|
|
// 2. 鼠标点击事件
|
|
this.drawingHandler.setInputAction((click) => {
|
|
const position = this.getClickPosition(click.position);
|
|
if (position) {
|
|
// 创建一个隐藏的文件输入元素
|
|
const fileInput = document.createElement('input');
|
|
fileInput.type = 'file';
|
|
fileInput.accept = 'image/*';
|
|
|
|
// 监听文件选择事件
|
|
fileInput.onchange = (e) => {
|
|
const file = e.target.files[0];
|
|
if (file) {
|
|
// 创建 FormData 对象用于上传
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
// 上传文件到服务器
|
|
this.uploadImage(formData, position);
|
|
}
|
|
};
|
|
|
|
// 触发文件选择对话框
|
|
fileInput.click();
|
|
}
|
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
|
// 3. 右键取消
|
|
this.drawingHandler.setInputAction(() => {
|
|
this.cancelDrawing();
|
|
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
|
},
|
|
|
|
// 上传图片
|
|
uploadImage(formData, position) {
|
|
// 显示加载状态
|
|
this.$modal.loading('图片上传中，请稍候...');
|
|
|
|
try {
|
|
// 创建请求配置
|
|
const config = {
|
|
headers: {
|
|
'Content-Type': 'multipart/form-data'
|
|
}
|
|
};
|
|
|
|
// 发送请求 - 使用项目封装的 request 实例
|
|
request.post('/common/upload', formData, config)
|
|
.then((response) => {
|
|
this.$modal.closeLoading();
|
|
|
|
if (response.code === 200) {
|
|
// 上传成功，获取图片 URL
|
|
let imageUrl = response.url;
|
|
// 创建图片实体
|
|
this.addImageEntity(position, imageUrl);
|
|
} else {
|
|
this.$modal.msgError('图片上传失败：' + (response.msg || '未知错误'));
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
this.$modal.closeLoading();
|
|
|
|
if (error.response) {
|
|
// 服务器返回错误
|
|
if (error.response.data && error.response.data.msg) {
|
|
this.$modal.msgError('图片上传失败：' + error.response.data.msg);
|
|
} else {
|
|
this.$modal.msgError('图片上传失败：服务器返回错误 ' + error.response.status);
|
|
}
|
|
} else if (error.request) {
|
|
// 请求发送但没有收到响应
|
|
this.$modal.msgError('图片上传失败：无法连接到服务器，请检查网络');
|
|
} else {
|
|
// 请求配置错误
|
|
this.$modal.msgError('图片上传失败：' + error.message);
|
|
}
|
|
});
|
|
} catch (error) {
|
|
this.$modal.closeLoading();
|
|
this.$modal.msgError('图片上传失败：' + error.message);
|
|
}
|
|
},
|
|
|
|
// 添加图片实体
|
|
addImageEntity(position, imageUrl) {
|
|
this.entityCounter++
|
|
const id = `image_${this.entityCounter}`
|
|
|
|
// 获取经纬度坐标
|
|
const { lat, lng } = this.cartesianToLatLng(position)
|
|
|
|
const entity = this.viewer.entities.add({
|
|
id: id,
|
|
name: `图片 ${this.entityCounter}`,
|
|
position: position,
|
|
billboard: {
|
|
image: imageUrl,
|
|
width: this.defaultStyles.image.width,
|
|
height: this.defaultStyles.image.height,
|
|
verticalOrigin: Cesium.VerticalOrigin.CENTER,
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
// 随地图缩放调整大小
|
|
scaleByDistance: new Cesium.NearFarScalar(
|
|
1000, // 近距离（米）
|
|
1.0, // 近距离时的缩放比例
|
|
1000000, // 远距离（米）
|
|
0.0 // 远距离时的缩放比例
|
|
)
|
|
}
|
|
})
|
|
|
|
const entityData = {
|
|
id,
|
|
type: 'image',
|
|
lat,
|
|
lng,
|
|
imageUrl: imageUrl,
|
|
position: position,
|
|
entity: entity,
|
|
width: this.defaultStyles.image.width,
|
|
height: this.defaultStyles.image.height,
|
|
label: `图片 ${this.entityCounter}`
|
|
}
|
|
|
|
this.allEntities.push(entityData)
|
|
|
|
entity.clickHandler = (e) => {
|
|
this.selectEntity(entityData)
|
|
e.stopPropagation()
|
|
}
|
|
|
|
return entityData
|
|
},
|
|
|
|
// ================== 实体创建方法 ==================
|
|
|
|
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
|
|
}
|
|
})
|
|
|
|
// 【重要修改】直接把 entity 推入数组，修复清除功能的 bug
|
|
this.allEntities.push(entity)
|
|
|
|
return entity
|
|
},
|
|
addCircleEntity(center, radius) {
|
|
// 确保半径有效
|
|
const validRadius = Math.max(radius, 1)
|
|
|
|
this.entityCounter++
|
|
const id = `circle_${this.entityCounter}`
|
|
|
|
const entity = this.viewer.entities.add({
|
|
id: id,
|
|
name: `圆形 ${this.entityCounter}`,
|
|
position: center, // 圆心位置
|
|
|
|
// 【优化】使用 ellipse (椭圆) 绘制圆形
|
|
ellipse: {
|
|
semiMinorAxis: validRadius, // 半短轴 = 半径
|
|
semiMajorAxis: validRadius, // 半长轴 = 半径
|
|
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
|
|
}
|
|
})
|
|
|
|
// 【重要修改】直接把 entity 推入数组
|
|
this.allEntities.push(entity)
|
|
|
|
return entity
|
|
},
|
|
|
|
// ================== 工具方法 ==================
|
|
|
|
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
|
|
},
|
|
|
|
|
|
|
|
// ================== 实体管理 ==================
|
|
|
|
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() {
|
|
// 1. 检查数组是否有内容
|
|
if (this.allEntities && this.allEntities.length > 0) {
|
|
|
|
// 2. 遍历每一个对象进行删除
|
|
this.allEntities.forEach(item => {
|
|
try {
|
|
// 情况 A: 数组里存的是原生的 Cesium Entity (点、线通常是这种情况)
|
|
if (item instanceof Cesium.Entity) {
|
|
this.viewer.entities.remove(item);
|
|
}
|
|
// 情况 B: 数组里存的是包装对象 (你的矩形、圆可能是这种 { entity: ... })
|
|
else if (item.entity && item.entity instanceof Cesium.Entity) {
|
|
this.viewer.entities.remove(item.entity);
|
|
}
|
|
// 情况 C: 兜底方案，尝试通过 ID 删除
|
|
else if (item.id) {
|
|
this.viewer.entities.removeById(item.id);
|
|
}
|
|
} catch (e) {
|
|
console.warn('删除实体失败:', e);
|
|
}
|
|
});
|
|
}
|
|
|
|
// 3. 清空数组
|
|
this.allEntities = [];
|
|
|
|
// 4. 清理可能残留的绘制过程中的临时图形
|
|
if (this.tempEntity) {
|
|
this.viewer.entities.remove(this.tempEntity);
|
|
this.tempEntity = null;
|
|
}
|
|
if (this.tempPreviewEntity) {
|
|
this.viewer.entities.remove(this.tempPreviewEntity);
|
|
this.tempPreviewEntity = null;
|
|
}
|
|
|
|
// 5. 重置其他状态（如测量面板、绘制状态）
|
|
this.measurementResult = null;
|
|
this.stopDrawing();
|
|
},
|
|
|
|
// ================== 其他方法 ==================
|
|
|
|
getTypeName(type) {
|
|
const names = {
|
|
point: '点',
|
|
line: '线',
|
|
polygon: '面',
|
|
rectangle: '矩形',
|
|
circle: '圆形',
|
|
sector: '扇形',
|
|
arrow: '箭头',
|
|
text: '文本',
|
|
image: '图片'
|
|
}
|
|
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)
|
|
},
|
|
|
|
importData() {
|
|
const input = document.createElement('input')
|
|
input.type = 'file'
|
|
input.accept = '.json'
|
|
input.onchange = (e) => {
|
|
const file = e.target.files[0]
|
|
if (!file) return
|
|
|
|
const reader = new FileReader()
|
|
reader.onload = (event) => {
|
|
try {
|
|
const data = JSON.parse(event.target.result)
|
|
if (data.entities && Array.isArray(data.entities)) {
|
|
data.entities.forEach(entityData => {
|
|
this.importEntity(entityData)
|
|
})
|
|
console.log('数据已导入', data)
|
|
this.$message.success(`成功导入 ${data.entities.length} 个实体`)
|
|
} else {
|
|
this.$message.error('文件格式不正确')
|
|
}
|
|
} catch (error) {
|
|
console.error('导入失败', error)
|
|
this.$message.error('文件解析失败')
|
|
}
|
|
}
|
|
reader.readAsText(file)
|
|
}
|
|
input.click()
|
|
},
|
|
|
|
importEntity(entityData) {
|
|
let entity
|
|
const color = entityData.color || '#008aff'
|
|
|
|
switch (entityData.type) {
|
|
case 'point':
|
|
entity = this.viewer.entities.add({
|
|
position: Cesium.Cartesian3.fromDegrees(entityData.data.lng, entityData.data.lat),
|
|
point: {
|
|
pixelSize: 10,
|
|
color: Cesium.Color.fromCssColorString(color),
|
|
outlineColor: Cesium.Color.WHITE,
|
|
outlineWidth: 2
|
|
},
|
|
label: {
|
|
text: entityData.label || '点',
|
|
font: '14px sans-serif',
|
|
fillColor: Cesium.Color.WHITE,
|
|
outlineColor: Cesium.Color.BLACK,
|
|
outlineWidth: 2,
|
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
pixelOffset: new Cesium.Cartesian2(0, -10)
|
|
}
|
|
})
|
|
break
|
|
|
|
case 'line':
|
|
const linePositions = entityData.data.points.map(p => Cesium.Cartesian3.fromDegrees(p.lng, p.lat))
|
|
entity = this.viewer.entities.add({
|
|
polyline: {
|
|
positions: linePositions,
|
|
width: 3,
|
|
material: Cesium.Color.fromCssColorString(color),
|
|
clampToGround: true
|
|
},
|
|
label: {
|
|
text: entityData.label || '线',
|
|
font: '14px sans-serif',
|
|
fillColor: Cesium.Color.WHITE,
|
|
outlineColor: Cesium.Color.BLACK,
|
|
outlineWidth: 2,
|
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
|
position: linePositions[0]
|
|
}
|
|
})
|
|
break
|
|
|
|
case 'polygon':
|
|
const polygonPositions = entityData.data.points.map(p => Cesium.Cartesian3.fromDegrees(p.lng, p.lat))
|
|
entity = this.viewer.entities.add({
|
|
polygon: {
|
|
hierarchy: polygonPositions,
|
|
material: Cesium.Color.fromCssColorString(color).withAlpha(0.5),
|
|
outline: true,
|
|
outlineColor: Cesium.Color.fromCssColorString(color),
|
|
outlineWidth: 2
|
|
},
|
|
label: {
|
|
text: entityData.label || '面',
|
|
font: '14px sans-serif',
|
|
fillColor: Cesium.Color.WHITE,
|
|
outlineColor: Cesium.Color.BLACK,
|
|
outlineWidth: 2,
|
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
|
position: polygonPositions[0]
|
|
}
|
|
})
|
|
break
|
|
|
|
case 'rectangle':
|
|
const rectCoords = entityData.data.coordinates
|
|
entity = this.viewer.entities.add({
|
|
rectangle: {
|
|
coordinates: Cesium.Rectangle.fromDegrees(rectCoords.west, rectCoords.south, rectCoords.east, rectCoords.north),
|
|
material: Cesium.Color.fromCssColorString(color).withAlpha(0.5),
|
|
outline: true,
|
|
outlineColor: Cesium.Color.fromCssColorString(color),
|
|
outlineWidth: 2
|
|
},
|
|
label: {
|
|
text: entityData.label || '矩形',
|
|
font: '14px sans-serif',
|
|
fillColor: Cesium.Color.WHITE,
|
|
outlineColor: Cesium.Color.BLACK,
|
|
outlineWidth: 2,
|
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
|
position: Cesium.Cartesian3.fromDegrees((rectCoords.west + rectCoords.east) / 2, (rectCoords.south + rectCoords.north) / 2)
|
|
}
|
|
})
|
|
break
|
|
|
|
case 'circle':
|
|
// 检查半径是否有效
|
|
const radius = entityData.data.radius || 1000
|
|
if (radius <= 0) {
|
|
this.$message.error('圆形半径必须大于0')
|
|
return
|
|
}
|
|
entity = this.viewer.entities.add({
|
|
position: Cesium.Cartesian3.fromDegrees(entityData.data.center.lng, entityData.data.center.lat),
|
|
ellipse: {
|
|
semiMinorAxis: radius,
|
|
semiMajorAxis: radius,
|
|
material: Cesium.Color.fromCssColorString(color).withAlpha(0.5),
|
|
outline: true,
|
|
outlineColor: Cesium.Color.fromCssColorString(color),
|
|
outlineWidth: 2
|
|
},
|
|
label: {
|
|
text: entityData.label || '圆形',
|
|
font: '14px sans-serif',
|
|
fillColor: Cesium.Color.WHITE,
|
|
outlineColor: Cesium.Color.BLACK,
|
|
outlineWidth: 2,
|
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
pixelOffset: new Cesium.Cartesian2(0, -10)
|
|
}
|
|
})
|
|
break
|
|
}
|
|
|
|
if (entity) {
|
|
this.allEntities.push({
|
|
id: entity.id,
|
|
type: entityData.type,
|
|
label: entityData.label,
|
|
color: color,
|
|
...entityData.data
|
|
})
|
|
}
|
|
},
|
|
|
|
handleLocate() {
|
|
const h = this.$createElement
|
|
this.$msgbox({
|
|
title: '定位',
|
|
message: h('div', { style: 'padding: 10px 0;' }, [
|
|
h('div', { style: 'margin-bottom: 15px;' }, [
|
|
h('label', { style: 'display: block; margin-bottom: 5px; color: #606266;' }, '经度：'),
|
|
h('input', {
|
|
attrs: {
|
|
type: 'number',
|
|
placeholder: '例如 116.40',
|
|
step: '0.000001',
|
|
value: '116.3974'
|
|
},
|
|
style: 'width: 100%; padding: 8px; border: 1px solid #dcdfe6; border-radius: 4px; box-sizing: border-box;',
|
|
ref: 'lngInput'
|
|
})
|
|
]),
|
|
h('div', null, [
|
|
h('label', { style: 'display: block; margin-bottom: 5px; color: #606266;' }, '纬度：'),
|
|
h('input', {
|
|
attrs: {
|
|
type: 'number',
|
|
placeholder: '例如 39.90',
|
|
step: '0.000001',
|
|
value: '39.9093'
|
|
},
|
|
style: 'width: 100%; padding: 8px; border: 1px solid #dcdfe6; border-radius: 4px; box-sizing: border-box;',
|
|
ref: 'latInput'
|
|
})
|
|
])
|
|
]),
|
|
showCancelButton: true,
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
beforeClose: (action, instance, done) => {
|
|
if (action === 'confirm') {
|
|
const lngInput = instance.$el.querySelector('input[placeholder="例如 116.40"]')
|
|
const latInput = instance.$el.querySelector('input[placeholder="例如 39.90"]')
|
|
const lng = parseFloat(lngInput.value)
|
|
const lat = parseFloat(latInput.value)
|
|
|
|
if (!lng || !lat || isNaN(lng) || isNaN(lat)) {
|
|
this.$message.error('请输入有效的经度和纬度！')
|
|
return
|
|
}
|
|
if (lng < -180 || lng > 180 || lat < -90 || lat > 90) {
|
|
this.$message.error('经纬度超出有效范围！')
|
|
return
|
|
}
|
|
|
|
if (this.viewer) {
|
|
this.viewer.camera.flyTo({
|
|
destination: Cesium.Cartesian3.fromDegrees(lng, lat, 5000),
|
|
orientation: {
|
|
heading: Cesium.Math.toRadians(0.0),
|
|
pitch: Cesium.Math.toRadians(-90.0),
|
|
roll: 0.0
|
|
},
|
|
duration: 2
|
|
})
|
|
this.$message.success(`已定位到经度 ${lng.toFixed(4)}，纬度 ${lat.toFixed(4)}`)
|
|
}
|
|
done()
|
|
} else {
|
|
this.$message.info('已取消定位')
|
|
done()
|
|
}
|
|
}
|
|
}).catch(() => {
|
|
this.$message.info('已取消定位')
|
|
})
|
|
},
|
|
|
|
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%;
|
|
}
|
|
|
|
/* 自定义比例尺样式 */
|
|
: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;
|
|
}
|
|
</style>
|
|
|
|
|