woka
/
cesium-map-object
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

xuanranyouhua

lbj
sd 2 months ago
parent
497e2fb7d8
commit
42595d2482
1 changed files with 47 additions and 39 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 86
      ruoyi-ui/src/views/cesiumMap/index.vue

86
ruoyi-ui/src/views/cesiumMap/index.vue
View File

@ -826,7 +826,14 @@ export default {
mapProjection: new Cesium.WebMercatorProjection(), mapProjection: new Cesium.WebMercatorProjection(),
imageryProvider: false, imageryProvider: false,
terrainProvider: new Cesium.EllipsoidTerrainProvider(), terrainProvider: new Cesium.EllipsoidTerrainProvider(),
baseLayer: false baseLayer: false,
contextOptions: {
webgl: {
antialias: true,
msaa: true,
msaaSamples: 8
}
}
}) })
this.viewer.cesiumWidget.creditContainer.style.display = "none" this.viewer.cesiumWidget.creditContainer.style.display = "none"
this.loadOfflineMap() this.loadOfflineMap()
@ -847,6 +854,8 @@ export default {
this.initMouseCoordinates() this.initMouseCoordinates()
console.log('Cesium离线二维地图已加载') console.log('Cesium离线二维地图已加载')
console.log('Cesium离线二维地图已加载') console.log('Cesium离线二维地图已加载')
// 启用 FXAA 后处理抗锯齿
this.viewer.scene.postProcessStages.fxaa.enabled = true
// 1. 定义全局拾取处理器 // 1. 定义全局拾取处理器
this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas); this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
this.handler.setInputAction((click) => { this.handler.setInputAction((click) => {
@ -1483,7 +1492,7 @@ export default {
width: this.defaultStyles.polygon.width, width: this.defaultStyles.polygon.width,
// 边框使用实线，表示正在编辑中 // 边框使用实线，表示正在编辑中
material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color), material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color),
clampToGround: true arcType: Cesium.ArcType.NONE
} }
}); });
} }
@ -1580,7 +1589,7 @@ export default {
}, false), }, false),
width: this.defaultStyles.rectangle.width, width: this.defaultStyles.rectangle.width,
material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color), material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color),
clampToGround: true // 贴地 arcType: Cesium.ArcType.NONE
} }
}); });
} }
@ -1640,7 +1649,7 @@ export default {
positions: borderPositions, positions: borderPositions,
width: this.defaultStyles.rectangle.width, width: this.defaultStyles.rectangle.width,
material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color), material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color),
clampToGround: true arcType: Cesium.ArcType.NONE
} }
}); });
// 4. 记录到实体列表 // 4. 记录到实体列表
@ -1787,10 +1796,9 @@ export default {
}, false), }, false),
// 设置填充颜色 // 设置填充颜色
material: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color).withAlpha(this.defaultStyles.circle.opacity), material: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color).withAlpha(this.defaultStyles.circle.opacity),
// 移除 outline 属性，改用 polyline 绘制边框 arcType: Cesium.ArcType.NONE
clampToGround: true
}, },
// 边框部分 // 边框部分 - 使用 polyline
polyline: { polyline: {
// 关键：使用 CallbackProperty 动态计算圆形边框线 // 关键：使用 CallbackProperty 动态计算圆形边框线
positions: new Cesium.CallbackProperty(() => { positions: new Cesium.CallbackProperty(() => {
@ -1811,7 +1819,7 @@ export default {
}, false), }, false),
width: this.defaultStyles.circle.width, width: this.defaultStyles.circle.width,
material: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color), material: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color),
clampToGround: true arcType: Cesium.ArcType.NONE
} }
}); });
} }
@ -1854,24 +1862,21 @@ export default {
// 生成圆形的点，用于绘制边框线 // 生成圆形的点，用于绘制边框线
const circlePositions = this.generateCirclePositions(centerPoint, radius); const circlePositions = this.generateCirclePositions(centerPoint, radius);
// 创建一个复合实体，包含填充和边框
const finalEntity = this.viewer.entities.add({ const finalEntity = this.viewer.entities.add({
id: id, id: id,
position: centerPoint, position: centerPoint,
// 填充部分
ellipse: { ellipse: {
semiMajorAxis: radius, semiMajorAxis: radius,
semiMinorAxis: radius, semiMinorAxis: radius,
// 设置填充颜色
material: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color).withAlpha(this.defaultStyles.circle.opacity), material: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color).withAlpha(this.defaultStyles.circle.opacity),
clampToGround: true arcType: Cesium.ArcType.NONE
}, },
// 边框部分 // 边框部分
polyline: { polyline: {
positions: circlePositions, positions: circlePositions,
width: this.defaultStyles.circle.width, width: this.defaultStyles.circle.width,
material: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color), material: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color),
clampToGround: true arcType: Cesium.ArcType.NONE
} }
}); });
// 4. 记录实体 // 4. 记录实体
@ -1903,8 +1908,7 @@ export default {
}, },
// 绘制扇形 // 绘制扇形
startSectorDrawing() { startSectorDrawing() {
// 重置绘制状态 this.drawingPoints = [];
this.drawingPoints = []; // 存储圆心、半径端点、角度端点
// 1. 清理旧实体 // 1. 清理旧实体
if (this.tempEntity) this.viewer.entities.remove(this.tempEntity); if (this.tempEntity) this.viewer.entities.remove(this.tempEntity);
if (this.tempPreviewEntity) this.viewer.entities.remove(this.tempPreviewEntity); if (this.tempPreviewEntity) this.viewer.entities.remove(this.tempPreviewEntity);
@ -1939,14 +1943,14 @@ export default {
color: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color), color: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color),
dashLength: 16 dashLength: 16
}), }),
clampToGround: true arcType: Cesium.ArcType.NONE
} }
}); });
} }
// --- 情况B：第二次点击（确定半径） --- // --- 情况B：第二次点击（确定半径） ---
else if (this.drawingPoints.length === 1) { else if (this.drawingPoints.length === 1) {
this.drawingPoints.push(position); this.drawingPoints.push(position);
this.activeCursorPosition = position; // 更新 activeCursorPosition 为实际点击位置 this.activeCursorPosition = position;
const centerPoint = this.drawingPoints[0]; const centerPoint = this.drawingPoints[0];
const radiusPoint = this.drawingPoints[1]; const radiusPoint = this.drawingPoints[1];
const fixedRadius = Cesium.Cartesian3.distance(centerPoint, radiusPoint); const fixedRadius = Cesium.Cartesian3.distance(centerPoint, radiusPoint);
@ -1973,9 +1977,7 @@ export default {
} }
return new Cesium.PolygonHierarchy([]); return new Cesium.PolygonHierarchy([]);
}, false), }, false),
// 设置填充颜色 material: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color).withAlpha(this.defaultStyles.sector.opacity)
material: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color).withAlpha(this.defaultStyles.sector.opacity),
clampToGround: true
}, },
// 边框部分 // 边框部分
polyline: { polyline: {
@ -1995,14 +1997,14 @@ export default {
}, false), }, false),
width: this.defaultStyles.sector.width, width: this.defaultStyles.sector.width,
material: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color), material: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color),
clampToGround: true arcType: Cesium.ArcType.NONE
} }
}); });
} }
// --- 情况C：第三次点击（确定角度） --- // --- 情况C：第三次点击（确定角度） ---
else if (this.drawingPoints.length === 2) { else if (this.drawingPoints.length === 2) {
this.drawingPoints.push(position); this.drawingPoints.push(position);
this.activeCursorPosition = null; // 停止动态更新 this.activeCursorPosition = null;
// 传递角度点位置去结束绘制 // 传递角度点位置去结束绘制
this.finishSectorDrawing(this.drawingPoints[0], this.drawingPoints[1], this.drawingPoints[2]); this.finishSectorDrawing(this.drawingPoints[0], this.drawingPoints[1], this.drawingPoints[2]);
} }
@ -2032,16 +2034,14 @@ export default {
// 填充部分 // 填充部分
polygon: { polygon: {
hierarchy: new Cesium.PolygonHierarchy(positions), hierarchy: new Cesium.PolygonHierarchy(positions),
// 设置填充颜色 material: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color).withAlpha(this.defaultStyles.sector.opacity)
material: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color).withAlpha(this.defaultStyles.sector.opacity),
clampToGround: true
}, },
// 边框部分 // 边框部分
polyline: { polyline: {
positions: positions, positions: positions,
width: this.defaultStyles.sector.width, width: this.defaultStyles.sector.width,
material: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color), material: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color),
clampToGround: true arcType: Cesium.ArcType.NONE
} }
}); });
// 4. 记录实体 // 4. 记录实体
@ -2055,8 +2055,8 @@ export default {
endAngle: endAngle, endAngle: endAngle,
positions: positions, positions: positions,
entity: finalEntity, entity: finalEntity,
color: this.defaultStyles.sector.color, // 填充颜色 color: this.defaultStyles.sector.color,
borderColor: this.defaultStyles.sector.color, // 边框颜色 borderColor: this.defaultStyles.sector.color,
opacity: 0.5, opacity: 0.5,
width: this.defaultStyles.sector.width, width: this.defaultStyles.sector.width,
label: `扇形 ${this.entityCounter}` label: `扇形 ${this.entityCounter}`
@ -2066,7 +2066,7 @@ export default {
this.drawingPoints = []; this.drawingPoints = [];
}, },
// 生成圆形的点，用于绘制边框线 // 生成圆形的点，用于绘制边框线
generateCirclePositions(center, radius, numPoints = 128) { generateCirclePositions(center, radius, numPoints = 1024) {
const positions = []; const positions = [];
const ellipsoid = this.viewer.scene.globe.ellipsoid; const ellipsoid = this.viewer.scene.globe.ellipsoid;
@ -2143,7 +2143,7 @@ export default {
// 确保角度差不为零 // 确保角度差不为零
angleDiff = Math.max(0.01, angleDiff); angleDiff = Math.max(0.01, angleDiff);
// 计算扇形的顶点数（根据角度差确定，确保平滑） // 计算扇形的顶点数（根据角度差确定，确保平滑）
const numPoints = Math.max(10, Math.ceil(angleDiff * 180 / Math.PI / 5)); const numPoints = Math.max(200, Math.ceil(angleDiff * 180 / Math.PI));
const angleStep = angleDiff / (numPoints - 1); const angleStep = angleDiff / (numPoints - 1);
// 生成扇形的顶点（顺时针方向） // 生成扇形的顶点（顺时针方向）
for (let i = 0; i < numPoints; i++) { for (let i = 0; i < numPoints; i++) {
@ -2158,6 +2158,14 @@ export default {
positions.push(center); positions.push(center);
return positions; return positions;
}, },
// 生成扇形边缘点
generateSectorEdgePoint(center, radius, angle) {
const centerLL = Cesium.Cartographic.fromCartesian(center);
const distance = radius / 6378137;
const lat = centerLL.latitude + Math.sin(angle) * distance;
const lng = centerLL.longitude + Math.cos(angle) * distance / Math.cos(centerLL.latitude);
return Cesium.Cartesian3.fromRadians(lng, lat);
},
// 计算两点之间的距离（米） // 计算两点之间的距离（米）
calculateDistance(point1, point2) { calculateDistance(point1, point2) {
return Cesium.Cartesian3.distance(point1, point2); return Cesium.Cartesian3.distance(point1, point2);
@ -2199,12 +2207,12 @@ export default {
} }
return []; return [];
}, false), }, false),
width: 8, // 增加宽度以获得更大的箭头头部 width: 12, // 增加宽度以获得更大的箭头头部
// 使用箭头材质 // 使用箭头材质
material: new Cesium.PolylineArrowMaterialProperty( material: new Cesium.PolylineArrowMaterialProperty(
Cesium.Color.fromCssColorString(this.defaultStyles.arrow.color) Cesium.Color.fromCssColorString(this.defaultStyles.arrow.color)
), ),
clampToGround: true, // 贴地 arcType: Cesium.ArcType.NONE,
widthInMeters: false // 使用像素宽度模式 widthInMeters: false // 使用像素宽度模式
} }
}); });
@ -2252,11 +2260,11 @@ export default {
name: `箭头 ${this.entityCounter}`, name: `箭头 ${this.entityCounter}`,
polyline: { polyline: {
positions: positions, positions: positions,
width: 8, // 增加宽度以获得更大的箭头头部 width: 12, // 增加宽度以获得更大的箭头头部
material: new Cesium.PolylineArrowMaterialProperty( material: new Cesium.PolylineArrowMaterialProperty(
Cesium.Color.fromCssColorString(this.defaultStyles.arrow.color) Cesium.Color.fromCssColorString(this.defaultStyles.arrow.color)
), ),
clampToGround: true, arcType: Cesium.ArcType.NONE,
// 使用像素宽度模式，确保箭头在缩放时保持比例 // 使用像素宽度模式，确保箭头在缩放时保持比例
widthInMeters: false widthInMeters: false
} }
@ -2584,7 +2592,7 @@ export default {
positions: polygonPositions, positions: polygonPositions,
width: this.defaultStyles.polygon.width, width: this.defaultStyles.polygon.width,
material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color), material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color),
clampToGround: true arcType: Cesium.ArcType.NONE
} }
}) })
const entityData = { const entityData = {
@ -2636,13 +2644,13 @@ export default {
position: center, // 圆心位置 position: center, // 圆心位置
// 【优化】使用 ellipse (椭圆) 绘制圆形 // 【优化】使用 ellipse (椭圆) 绘制圆形
ellipse: { ellipse: {
semiMinorAxis: validRadius, // 半短轴 = 半径 semiMinorAxis: validRadius,
semiMajorAxis: validRadius, // 半长轴 = 半径 semiMajorAxis: validRadius,
// 移除填充颜色，只显示边框
material: Cesium.Color.TRANSPARENT, material: Cesium.Color.TRANSPARENT,
outline: true, outline: true,
outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color), outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color),
outlineWidth: this.defaultStyles.circle.width outlineWidth: this.defaultStyles.circle.width,
arcType: Cesium.ArcType.NONE
} }
}) })
// 【重要修改】直接把 entity 推入数组 // 【重要修改】直接把 entity 推入数组

Write Preview
Loading…
Cancel
Save