|
|
|
@ -492,7 +492,7 @@ export default { |
|
|
|
}, false), |
|
|
|
width: 3, |
|
|
|
material: Cesium.Color.fromCssColorString('#800080'), |
|
|
|
clampToGround: true |
|
|
|
arcType: Cesium.ArcType.NONE |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
@ -700,7 +700,7 @@ export default { |
|
|
|
positions: linePositions, |
|
|
|
width: 3, |
|
|
|
material: Cesium.Color.fromCssColorString('#008aff'), |
|
|
|
clampToGround: true, |
|
|
|
arcType: Cesium.ArcType.NONE, |
|
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY |
|
|
|
} |
|
|
|
}); |
|
|
|
@ -1110,7 +1110,7 @@ export default { |
|
|
|
finalPathPositions.push(exit); |
|
|
|
this.viewer.entities.add({ |
|
|
|
id: `hold-line-${routeId}-${i}`, |
|
|
|
polyline: { positions: [entry, ...arcPoints.slice(1), exit], width: 8, material: Cesium.Color.ORANGE, clampToGround: true, zIndex: 20 }, |
|
|
|
polyline: { positions: [entry, ...arcPoints.slice(1), exit], width: 8, material: Cesium.Color.ORANGE, arcType: Cesium.ArcType.NONE, zIndex: 20 }, |
|
|
|
properties: { routeId: routeId } |
|
|
|
}); |
|
|
|
lastPos = exit; |
|
|
|
@ -1127,7 +1127,7 @@ export default { |
|
|
|
const arcPoints = this.computeArcPositions(lastPos, currPos, nextLogical, radius); |
|
|
|
this.viewer.entities.add({ |
|
|
|
id: `arc-line-${routeId}-${i}`, |
|
|
|
polyline: { positions: arcPoints, width: lineWidth, material: lineMaterial, clampToGround: true, zIndex: 20 }, |
|
|
|
polyline: { positions: arcPoints, width: lineWidth, material: lineMaterial, arcType: Cesium.ArcType.NONE, zIndex: 20 }, |
|
|
|
properties: { routeId: routeId } |
|
|
|
}); |
|
|
|
// 转弯半径两侧航点与航线整体航点风格一致,点击均打开原航点编辑(dbId 为当前 wp.id) |
|
|
|
@ -1178,7 +1178,7 @@ export default { |
|
|
|
positions: finalPathPositions, |
|
|
|
width: lineWidth, |
|
|
|
material: lineMaterial, |
|
|
|
clampToGround: true, |
|
|
|
arcType: Cesium.ArcType.NONE, |
|
|
|
zIndex: 1 |
|
|
|
}, |
|
|
|
properties: {isMissionRouteLine: true, routeId: routeId} |
|
|
|
@ -1688,16 +1688,16 @@ export default { |
|
|
|
imageryProvider: false, |
|
|
|
terrainProvider: new Cesium.EllipsoidTerrainProvider(), |
|
|
|
baseLayer: false, |
|
|
|
// 按需渲染:仅在场景变化时渲染,降低空闲时 CPU/GPU 占用(若某处界面不刷新可主动调用 viewer.scene.requestRender()) |
|
|
|
requestRenderMode: true, |
|
|
|
maximumRenderTimeChange: Infinity, |
|
|
|
// 允许截图时读取 canvas 内容(若截图仅用 readPixels 可改为 false 以提升性能) |
|
|
|
contextOptions: { |
|
|
|
preserveDrawingBuffer: true, |
|
|
|
antialias: true // 开启 WebGL 全局抗锯齿 |
|
|
|
}, |
|
|
|
// 多重采样抗锯齿(WebGL2 下生效,常用 2/4/8,数值越大越平滑、性能消耗越高) |
|
|
|
msaaSamples: 4 |
|
|
|
webgl: { |
|
|
|
antialias: true, |
|
|
|
msaa: true, |
|
|
|
msaaSamples: 8 |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
this.viewer.cesiumWidget.creditContainer.style.display = "none" |
|
|
|
// 按需渲染时:实体增删改后主动请求一帧,避免界面不刷新 |
|
|
|
@ -1735,6 +1735,7 @@ export default { |
|
|
|
console.log('Cesium离线二维地图已加载') |
|
|
|
|
|
|
|
// 1. 定义全局拾取处理器(含防抖,避免双击误触导致相机高度剧烈变化) |
|
|
|
this.viewer.scene.postProcessStages.fxaa.enabled = true |
|
|
|
this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas); |
|
|
|
this.handler.setInputAction((click) => { |
|
|
|
// 隐藏右键菜单 |
|
|
|
@ -2505,7 +2506,7 @@ export default { |
|
|
|
positions: this.drawingPoints, |
|
|
|
width: this.defaultStyles.line.width, |
|
|
|
material: Cesium.Color.fromCssColorString(this.defaultStyles.line.color), |
|
|
|
clampToGround: true |
|
|
|
arcType: Cesium.ArcType.NONE |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
@ -2523,7 +2524,7 @@ export default { |
|
|
|
color: Cesium.Color.fromCssColorString(this.defaultStyles.line.color), |
|
|
|
dashLength: 16 |
|
|
|
}), |
|
|
|
clampToGround: true |
|
|
|
arcType: Cesium.ArcType.NONE |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
@ -2638,7 +2639,7 @@ export default { |
|
|
|
width: this.defaultStyles.polygon.width, |
|
|
|
// 边框使用实线,表示正在编辑中 |
|
|
|
material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color), |
|
|
|
clampToGround: true |
|
|
|
arcType: Cesium.ArcType.NONE |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
@ -2706,9 +2707,7 @@ export default { |
|
|
|
} |
|
|
|
return Cesium.Rectangle.fromDegrees(0, 0, 0, 0); |
|
|
|
}, false), |
|
|
|
// 设置填充颜色 |
|
|
|
material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color).withAlpha(this.defaultStyles.rectangle.opacity), |
|
|
|
clampToGround: true // 贴地 |
|
|
|
material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color).withAlpha(this.defaultStyles.rectangle.opacity) |
|
|
|
}, |
|
|
|
// 边框部分 |
|
|
|
polyline: { |
|
|
|
@ -2735,7 +2734,7 @@ export default { |
|
|
|
}, false), |
|
|
|
width: this.defaultStyles.rectangle.width, |
|
|
|
material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color), |
|
|
|
clampToGround: true // 贴地 |
|
|
|
arcType: Cesium.ArcType.NONE |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
@ -2787,15 +2786,14 @@ export default { |
|
|
|
// 填充部分 |
|
|
|
rectangle: { |
|
|
|
coordinates: rect, |
|
|
|
material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color).withAlpha(this.defaultStyles.rectangle.opacity), |
|
|
|
clampToGround: true |
|
|
|
material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color).withAlpha(this.defaultStyles.rectangle.opacity) |
|
|
|
}, |
|
|
|
// 边框部分 |
|
|
|
polyline: { |
|
|
|
positions: borderPositions, |
|
|
|
width: this.defaultStyles.rectangle.width, |
|
|
|
material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color), |
|
|
|
clampToGround: true |
|
|
|
arcType: Cesium.ArcType.NONE |
|
|
|
} |
|
|
|
}); |
|
|
|
// 4. 记录到实体列表 |
|
|
|
@ -2942,10 +2940,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(() => { |
|
|
|
@ -2966,7 +2963,7 @@ export default { |
|
|
|
}, false), |
|
|
|
width: this.defaultStyles.circle.width, |
|
|
|
material: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color), |
|
|
|
clampToGround: true |
|
|
|
arcType: Cesium.ArcType.NONE |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
@ -3009,24 +3006,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. 记录实体 |
|
|
|
@ -3079,8 +3073,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); |
|
|
|
@ -3115,14 +3108,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); |
|
|
|
@ -3149,9 +3142,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: { |
|
|
|
@ -3171,14 +3162,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]); |
|
|
|
} |
|
|
|
@ -3208,16 +3199,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. 记录实体 |
|
|
|
@ -3231,8 +3220,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}` |
|
|
|
@ -3242,7 +3231,7 @@ export default { |
|
|
|
this.drawingPoints = []; |
|
|
|
}, |
|
|
|
// 生成圆形的点,用于绘制边框线 |
|
|
|
generateCirclePositions(center, radius, numPoints = 128) { |
|
|
|
generateCirclePositions(center, radius, numPoints = 1024) { |
|
|
|
const positions = []; |
|
|
|
const ellipsoid = this.viewer.scene.globe.ellipsoid; |
|
|
|
|
|
|
|
@ -3319,7 +3308,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++) { |
|
|
|
@ -3334,6 +3323,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); |
|
|
|
@ -3375,12 +3372,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 // 使用像素宽度模式 |
|
|
|
} |
|
|
|
}); |
|
|
|
@ -3428,11 +3425,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 |
|
|
|
} |
|
|
|
@ -3717,7 +3714,7 @@ export default { |
|
|
|
positions: positions, |
|
|
|
width: this.defaultStyles.line.width, |
|
|
|
material: Cesium.Color.fromCssColorString(this.defaultStyles.line.color), |
|
|
|
clampToGround: true |
|
|
|
arcType: Cesium.ArcType.NONE |
|
|
|
} |
|
|
|
}) |
|
|
|
const entityData = { |
|
|
|
@ -3751,16 +3748,14 @@ export default { |
|
|
|
// 填充部分 |
|
|
|
polygon: { |
|
|
|
hierarchy: new Cesium.PolygonHierarchy(polygonPositions), |
|
|
|
// 初始无填充 |
|
|
|
material: Cesium.Color.TRANSPARENT, |
|
|
|
clampToGround: true |
|
|
|
material: Cesium.Color.TRANSPARENT |
|
|
|
}, |
|
|
|
// 边框部分 |
|
|
|
polyline: { |
|
|
|
positions: polygonPositions, |
|
|
|
width: this.defaultStyles.polygon.width, |
|
|
|
material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color), |
|
|
|
clampToGround: true |
|
|
|
arcType: Cesium.ArcType.NONE |
|
|
|
} |
|
|
|
}) |
|
|
|
const entityData = { |
|
|
|
@ -3812,13 +3807,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 推入数组 |
|
|
|
@ -4483,7 +4478,7 @@ export default { |
|
|
|
positions: linePositions, |
|
|
|
width: 3, |
|
|
|
material: Cesium.Color.fromCssColorString(color), |
|
|
|
clampToGround: true |
|
|
|
arcType: Cesium.ArcType.NONE |
|
|
|
}, |
|
|
|
label: { |
|
|
|
text: entityData.label || '线', |
|
|
|
@ -4886,7 +4881,7 @@ export default { |
|
|
|
positions: newPositions, |
|
|
|
width: selectedLineEntity.width, |
|
|
|
material: Cesium.Color.fromCssColorString(selectedLineEntity.color), |
|
|
|
clampToGround: true |
|
|
|
arcType: Cesium.ArcType.NONE |
|
|
|
} |
|
|
|
}) |
|
|
|
// 更新线实体的引用和位置数组 |
|
|
|
@ -5093,13 +5088,13 @@ export default { |
|
|
|
semiMinorAxis: radiusInMeters, |
|
|
|
semiMajorAxis: radiusInMeters, |
|
|
|
material: Cesium.Color.RED.withAlpha(0), |
|
|
|
clampToGround: true |
|
|
|
arcType: Cesium.ArcType.NONE |
|
|
|
}, |
|
|
|
polyline: { |
|
|
|
positions: circlePositions, |
|
|
|
width: 2, |
|
|
|
material: Cesium.Color.RED, |
|
|
|
clampToGround: true |
|
|
|
arcType: Cesium.ArcType.NONE |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
|