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

编辑图形只有边框

lbj
sd 2 months ago
parent
4e14d47edc
commit
3159a1fc12
3 changed files with 226 additions and 71 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. 4
      ruoyi-ui/src/views/cesiumMap/ContextMenu.vue
  2. 285
      ruoyi-ui/src/views/cesiumMap/index.vue
  3. 8
      ruoyi-ui/src/views/childRoom/index.vue

4
ruoyi-ui/src/views/cesiumMap/ContextMenu.vue
View File

@ -150,7 +150,7 @@
<div class="menu-item" @click="toggleColorPicker('borderColor')">
<span class="menu-icon">🖌️</span>
<span>边框色</span>
<span class="menu-preview" :style="{backgroundColor: entityData.color}"></span>
<span class="menu-preview" :style="{backgroundColor: entityData.borderColor || entityData.color}"></span>
</div>
<!-- 边框颜色选择器 -->
<div class="color-picker-container" v-if="showColorPickerFor === 'borderColor'">
@ -309,7 +309,7 @@ export default {
],
presetWidths: [1, 2, 3, 4, 5, 6, 8, 10, 12],
presetSizes: [6, 8, 10, 12, 14, 16, 18, 20, 24],
presetOpacities: [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
presetOpacities: [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
presetFontSizes: [8, 10, 12, 14, 16, 18, 20, 24, 28, 32]
}
},

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

@ -153,10 +153,10 @@ export default {
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 },
polygon: { color: '#0000FF', opacity: 0, width: 3 },
rectangle: { color: '#FFA500', opacity: 0, width: 3 },
circle: { color: '#800080', opacity: 0, width: 3 },
sector: { color: '#FF6347', opacity: 0, width: 3 },
arrow: { color: '#FF0000', width: 6 },
text: { color: '#000000', font: '48px Microsoft YaHei, PingFang SC, sans-serif', backgroundColor: 'rgba(255, 255, 255, 0.8)' },
image: { width: 150, height: 150 }
@ -1256,8 +1256,8 @@ export default {
}
return new Cesium.PolygonHierarchy(this.drawingPoints);
}, false),
// 使用半透明颜色，方便看到地图底图
material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color).withAlpha(0.5),
// 不填充颜色
material: Cesium.Color.TRANSPARENT,
// 确保贴地
perPositionHeight: false
},
@ -1271,12 +1271,9 @@ export default {
}
return this.drawingPoints;
}, false),
width: this.defaultStyles.line.width,
// 边框使用虚线，表示正在编辑中
material: new Cesium.PolylineDashMaterialProperty({
color: Cesium.Color.fromCssColorString(this.defaultStyles.line.color),
dashLength: 16
}),
width: this.defaultStyles.polygon.width,
// 边框使用实线，表示正在编辑中
material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color),
clampToGround: true
}
});
@ -1335,6 +1332,7 @@ export default {
this.activeCursorPosition = position; // 初始化鼠标位置
// 创建动态预览矩形
this.tempEntity = this.viewer.entities.add({
// 填充部分
rectangle: {
// 关键：使用 CallbackProperty 动态计算矩形范围
coordinates: new Cesium.CallbackProperty(() => {
@ -1344,11 +1342,35 @@ export default {
}
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,
// 设置填充颜色
material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color).withAlpha(this.defaultStyles.rectangle.opacity),
clampToGround: true // 贴地
},
// 边框部分
polyline: {
// 关键：使用 CallbackProperty 动态计算矩形边框线
positions: new Cesium.CallbackProperty(() => {
if (this.drawingPoints.length > 0 && this.activeCursorPosition) {
// 计算矩形的四个角点
const rect = Cesium.Rectangle.fromCartesianArray([this.drawingPoints[0], this.activeCursorPosition]);
const west = rect.west;
const south = rect.south;
const east = rect.east;
const north = rect.north;
// 创建四个角点的笛卡尔坐标
const southwest = Cesium.Cartesian3.fromRadians(west, south);
const southeast = Cesium.Cartesian3.fromRadians(east, south);
const northeast = Cesium.Cartesian3.fromRadians(east, north);
const northwest = Cesium.Cartesian3.fromRadians(west, north);
// 返回闭合的边框线位置数组
return [southwest, southeast, northeast, northwest, southwest];
}
return [];
}, false),
width: this.defaultStyles.rectangle.width,
material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color),
clampToGround: true // 贴地
}
});
@ -1379,14 +1401,36 @@ export default {
// 3. 创建最终显示的静态实体
this.entityCounter++;
const id = `rectangle_${this.entityCounter}`;
// 计算矩形的四个角点
const west = rect.west;
const south = rect.south;
const east = rect.east;
const north = rect.north;
// 创建四个角点的笛卡尔坐标
const southwest = Cesium.Cartesian3.fromRadians(west, south);
const southeast = Cesium.Cartesian3.fromRadians(east, south);
const northeast = Cesium.Cartesian3.fromRadians(east, north);
const northwest = Cesium.Cartesian3.fromRadians(west, north);
// 创建边框线的位置数组（闭合）
const borderPositions = [southwest, southeast, northeast, northwest, southwest];
// 创建一个复合实体，包含填充和边框
const finalEntity = this.viewer.entities.add({
id: id,
// 填充部分
rectangle: {
coordinates: rect,
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,
material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color).withAlpha(this.defaultStyles.rectangle.opacity),
clampToGround: true
},
// 边框部分
polyline: {
positions: borderPositions,
width: this.defaultStyles.rectangle.width,
material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color),
clampToGround: true
}
});
@ -1397,9 +1441,10 @@ export default {
points: this.drawingPoints.map(p => this.cartesianToLatLng(p)),
positions: this.drawingPoints,
entity: finalEntity,
color: this.defaultStyles.polygon.color,
opacity: this.defaultStyles.polygon.opacity,
width: this.defaultStyles.polygon.width,
color: this.defaultStyles.rectangle.color, // 填充颜色
borderColor: this.defaultStyles.rectangle.color, // 边框颜色
opacity: this.defaultStyles.rectangle.opacity,
width: this.defaultStyles.rectangle.width,
label: `矩形 ${this.entityCounter}`
};
this.allEntities.push(entityData);
@ -1531,12 +1576,33 @@ export default {
return initialRadius;
}
}, 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
// 设置填充颜色
material: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color).withAlpha(this.defaultStyles.circle.opacity),
// 移除 outline 属性，改用 polyline 绘制边框
clampToGround: true
},
// 边框部分
polyline: {
// 关键：使用 CallbackProperty 动态计算圆形边框线
positions: new Cesium.CallbackProperty(() => {
try {
if (this.activeCursorPosition && this.drawingPoints.length > 0 && this.drawingPoints[0]) {
const center = this.drawingPoints[0];
const edge = this.activeCursorPosition;
if (center && edge && typeof center.x === 'number' && typeof edge.x === 'number') {
const radius = Cesium.Cartesian3.distance(center, edge);
const validRadius = isFinite(radius) && radius > 0 ? radius : initialRadius;
return this.generateCirclePositions(center, validRadius);
}
}
return [];
} catch (e) {
return [];
}
}, false),
width: this.defaultStyles.circle.width,
material: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color),
clampToGround: true
}
});
}
@ -1575,16 +1641,28 @@ export default {
// 3. 创建最终显示的静态实体
this.entityCounter++;
const id = `circle_${this.entityCounter}`;
// 生成圆形的点，用于绘制边框线
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.polygon.color).withAlpha(this.defaultStyles.polygon.opacity),
outline: true,
outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color),
outlineWidth: this.defaultStyles.polygon.width
// 设置填充颜色
material: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color).withAlpha(this.defaultStyles.circle.opacity),
clampToGround: true
},
// 边框部分
polyline: {
positions: circlePositions,
width: this.defaultStyles.circle.width,
material: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color),
clampToGround: true
}
});
// 4. 记录实体
@ -1594,9 +1672,10 @@ export default {
points: [centerPoint, edgePosition].map(p => this.cartesianToLatLng(p)),
positions: [centerPoint, edgePosition],
entity: finalEntity,
color: this.defaultStyles.polygon.color,
opacity: this.defaultStyles.polygon.opacity,
width: this.defaultStyles.polygon.width,
color: this.defaultStyles.circle.color, // 填充颜色
borderColor: this.defaultStyles.circle.color, // 边框颜色
opacity: this.defaultStyles.circle.opacity,
width: this.defaultStyles.circle.width,
radius: radius,
label: `圆形 ${this.entityCounter}`
};
@ -1669,6 +1748,7 @@ export default {
}
// 创建动态预览扇形
this.tempEntity = this.viewer.entities.add({
// 填充部分
polygon: {
hierarchy: new Cesium.CallbackProperty(() => {
if (this.drawingPoints.length > 1 && this.activeCursorPosition) {
@ -1684,10 +1764,29 @@ export default {
}
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
// 设置填充颜色
material: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color).withAlpha(this.defaultStyles.sector.opacity),
clampToGround: true
},
// 边框部分
polyline: {
positions: new Cesium.CallbackProperty(() => {
if (this.drawingPoints.length > 1 && this.activeCursorPosition) {
const centerPoint = this.drawingPoints[0];
const radiusPoint = this.drawingPoints[1];
if (!isFinite(fixedRadius) || fixedRadius === 0) {
return [];
}
const startAngle = this.calculatePointAngle(centerPoint, radiusPoint);
const endAngle = this.calculatePointAngle(centerPoint, this.activeCursorPosition);
const positions = this.generateSectorPositions(centerPoint, fixedRadius, startAngle, endAngle);
return positions;
}
return [];
}, false),
width: this.defaultStyles.sector.width,
material: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color),
clampToGround: true
}
});
}
@ -1721,13 +1820,19 @@ export default {
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
// 设置填充颜色
material: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color).withAlpha(this.defaultStyles.sector.opacity),
clampToGround: true
},
// 边框部分
polyline: {
positions: positions,
width: this.defaultStyles.sector.width,
material: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color),
clampToGround: true
}
});
// 4. 记录实体
@ -1741,7 +1846,8 @@ export default {
endAngle: endAngle,
positions: positions,
entity: finalEntity,
color: 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}`
@ -1750,6 +1856,35 @@ export default {
// 5. 重置状态，保持绘制状态以继续绘制
this.drawingPoints = [];
},
// 生成圆形的点，用于绘制边框线
generateCirclePositions(center, radius, numPoints = 64) {
const positions = [];
const ellipsoid = this.viewer.scene.globe.ellipsoid;
// 计算圆心的经纬度
const centerCartographic = Cesium.Cartographic.fromCartesian(center);
const centerLatitude = centerCartographic.latitude;
const centerLongitude = centerCartographic.longitude;
// 生成圆形的点
for (let i = 0; i <= numPoints; i++) {
const angle = (i / numPoints) * Math.PI * 2;
// 计算点的经纬度
// 注意：这里使用简单的方法计算，实际应该考虑地球曲率
const deltaLatitude = (radius / ellipsoid.maximumRadius) * Math.sin(angle);
const deltaLongitude = (radius / ellipsoid.maximumRadius) * Math.cos(angle) / Math.cos(centerLatitude);
const latitude = centerLatitude + deltaLatitude;
const longitude = centerLongitude + deltaLongitude;
// 转换为笛卡尔坐标
const position = Cesium.Cartesian3.fromRadians(longitude, latitude);
positions.push(position);
}
return positions;
},
// 计算角度
calculateAngle(center, start, end) {
const startLL = Cesium.Cartographic.fromCartesian(start);
@ -2224,16 +2359,23 @@ export default {
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
// 初始无填充
material: Cesium.Color.TRANSPARENT,
clampToGround: true
},
// 边框部分
polyline: {
positions: polygonPositions,
width: this.defaultStyles.polygon.width,
material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color),
clampToGround: true
}
})
const entityData = {
@ -2243,7 +2385,8 @@ export default {
positions: polygonPositions,
entity: entity,
color: this.defaultStyles.polygon.color,
opacity: this.defaultStyles.polygon.opacity,
borderColor: this.defaultStyles.polygon.color,
opacity: 0,
width: this.defaultStyles.polygon.width,
label: `面 ${this.entityCounter}`
}
@ -2262,8 +2405,8 @@ export default {
name: `矩形 ${this.entityCounter}`,
rectangle: {
coordinates: coordinates,
material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color)
.withAlpha(this.defaultStyles.rectangle.opacity),
// 移除填充颜色，只显示边框
material: Cesium.Color.TRANSPARENT,
outline: true,
outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color),
outlineWidth: this.defaultStyles.rectangle.width
@ -2286,8 +2429,8 @@ export default {
ellipse: {
semiMinorAxis: validRadius, // 半短轴 = 半径
semiMajorAxis: validRadius, // 半长轴 = 半径
material: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color)
.withAlpha(this.defaultStyles.circle.opacity),
// 移除填充颜色，只显示边框
material: Cesium.Color.TRANSPARENT,
outline: true,
outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color),
outlineWidth: this.defaultStyles.circle.width
@ -2480,29 +2623,37 @@ export default {
case 'polygon':
if (entity.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
}
if (entity.polyline) {
entity.polyline.material = Cesium.Color.fromCssColorString(data.borderColor || data.color)
entity.polyline.width = data.width
}
break
case 'rectangle':
if (entity.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
}
if (entity.polyline) {
entity.polyline.material = Cesium.Color.fromCssColorString(data.borderColor || data.color)
entity.polyline.width = data.width
}
break
case 'circle':
if (entity.ellipse) {
entity.ellipse.material = Cesium.Color.fromCssColorString(data.color).withAlpha(data.opacity)
entity.ellipse.outlineColor = Cesium.Color.fromCssColorString(data.color)
entity.ellipse.outlineWidth = data.width
}
if (entity.polyline) {
entity.polyline.material = Cesium.Color.fromCssColorString(data.borderColor || data.color)
entity.polyline.width = data.width
}
break
case 'sector':
if (entity.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
}
if (entity.polyline) {
entity.polyline.material = Cesium.Color.fromCssColorString(data.borderColor || data.color)
entity.polyline.width = data.width
}
break
case 'arrow':
@ -2553,6 +2704,10 @@ export default {
const entityData = this.contextMenu.entityData
// 更新实体数据
entityData[property] = value
// 当修改填充色时，默认设置透明度为 20%
if (property === 'color' && (entityData.type === 'polygon' || entityData.type === 'rectangle' || entityData.type === 'circle' || entityData.type === 'sector')) {
entityData.opacity = 0.2
}
// 更新实体样式
this.updateEntityStyle(entityData)
// 隐藏右键菜单

8
ruoyi-ui/src/views/childRoom/index.vue
View File

@ -341,13 +341,13 @@ export default {
showScaleDialog: false,
currentScale: {
scaleNumerator: 1,
scaleDenominator: 1000,
unit: 'm'
scaleDenominator: 20,
unit: 'km'
},
scaleConfig: {
scaleNumerator: 1,
scaleDenominator: 1000,
unit: 'm'
scaleDenominator: 20,
unit: 'km'
},
showExternalParamsDialog: false,
currentExternalParams: {},

Write Preview
Loading…
Cancel
Save