cesium中rectangle是水平垂直于正北方向的,rectangle的属性中有rotation,但是rotation是以矩形的中心点进行旋转的,旋转过程中矩形的形状可能会变形,如果需要以矩形的顶点为原点进行旋转,可以采用entity的方式添加polygon,并根据顶点重新计算其他三个点的坐标。
用Primitive的方式参考cesium 指定点旋转rectangle Primitive方式 矩阵篇-CSDN博客
一、rectangle属性
二、用entity添加rectangle,设置rotation旋转
let p1 = [113.389, 38.094669];
let p2 = [113.390968, 38.095338];
// 添加两个标签,方便看矩形的两个顶点位置
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(...p1),
label: {
text: '1',
},
});
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(...p2),
label: {
text: '2',
},
});
viewer.entities.add({
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(...p1, ...p2),
rotation: Cesium.Math.toRadians(30), // 以矩形的中心点为原点旋转
material: Cesium.Color.fromAlpha(Cesium.Color.RED, 1)
},
});
三、用entity添加polygon,polygon的四个顶点取自rectangle的四个顶点,实现矩形效果
let polygon = viewer.entities.add({
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray(
[
...p1,
p2[0], p1[1],
...p2,
p1[0], p2[1]
]
),
material: Cesium.Color.fromAlpha(Cesium.Color.GREEN, 0.9)
},
});
4、根据步骤3中的polygon,以p1为原点从正北方向顺时针旋转30度,重新计算其他三个点的位置,需要用到tuf
turf中用到的几个方法参考turf rhumbBearing distance destination-CSDN博客
let r = 30; // 以p1为原点,从正北方向顺时针旋转30度
let t1 = turf.point(p1);
let t2 = turf.point(p2);
let length = turf.distance(t1, t2, { units: 'miles' });
let bearing = turf.rhumbBearing(t1, t2);
let leny = Math.cos(bearing / 180 * Math.PI) * length;
let dest1 = turf.destination(p1, leny, 0 + r, { units: 'miles' })
let dest2 = turf.destination(p1, length, bearing + r, { units: 'miles' })
let lenx = Math.cos((90 - bearing) / 180 * Math.PI) * length;
let dest3 = turf.destination(p1, lenx, 90 + r, { units: 'miles' });
// polygon为步骤三中添加的entity
polygon.polygon.hierarchy.setValue(new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(
[
...p1,
...dest1.geometry.coordinates,
...dest2.geometry.coordinates,
...dest3.geometry.coordinates,
]
)))