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