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
Split 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(),
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 推入数组

Write Preview
Loading…
Cancel
Save