1.viewer.value.scene.screenSpaceCameraController.enableRotate = false; //禁止地图拖拽
2.存储矩形各点坐标 westSouthEastNorth
3.监听鼠标事件
4.计算两点的距离
5.计算两点的中点坐标
6.westSouthEastNorth坐标数组包括五组坐标（第一个和最后一个坐标相同，方向分别是左上、左下、右下、右上）
代码如下
const drawRectangleInfo = () => {
viewer.value.scene.screenSpaceCameraController.enableRotate = false; //禁止地图拖拽
/**
* 矩形四点坐标
*/
let westSouthEastNorth: any = [];
/**实体的唯一标注 */
let id: any = null;
/**地图点击对象 */
handler.value = new Cesium.ScreenSpaceEventHandler(
viewer.value.scene.canvas
);
handler.value.setInputAction((click: any) => {
/**点击位置笛卡尔坐标 */
let cartesian = viewer.value.camera.pickEllipsoid(
click.position,
viewer.value.scene.globe.ellipsoid
);
/**笛卡尔转弧度坐标 */
let cartographic = Cesium.Cartographic.fromCartesian(
cartesian,
viewer.value.scene.globe.ellipsoid,
new Cesium.Cartographic()
);
/**点击位置经度 */
let lng1: any = Cesium.Math.toDegrees(cartographic.longitude);
/**点击位置维度 */
let lat1: any = Cesium.Math.toDegrees(cartographic.latitude);
/**边框坐标 */
westSouthEastNorth = [lng1, lat1];
id = new Date().getTime();
if (westSouthEastNorth) {
handler.value.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN);
}
/**面实例对象 */
rectangleId.value = viewer.value.entities.add({
name: "rectangle",
id: "rectangle",
polygon: {
hierarchy: new Cesium.CallbackProperty(function () {
return {
positions: Cesium.Cartesian3.fromDegreesArray(westSouthEastNorth),
};
}, false),
height: 0,
// 填充的颜色，withAlpha透明度
material: Cesium.Color.GREEN.withAlpha(0.0),
// 是否被提供的材质填充
fill: true,
// 是否显示
show: true,
},
polyline: {
positions: new Cesium.CallbackProperty(function () {
return Cesium.Cartesian3.fromDegreesArray(westSouthEastNorth);
}, false),
material: config.borderColor,
width: config.borderWidth,
zIndex: 1,
},
});
handler.value.setInputAction((move: any) => {
let cartesian = viewer.value.camera.pickEllipsoid(
move.endPosition,
viewer.value.scene.globe.ellipsoid
);
let cartographic = Cesium.Cartographic.fromCartesian(
cartesian,
viewer.value.scene.globe.ellipsoid,
new Cesium.Cartographic()
);
let lng: any = Cesium.Math.toDegrees(cartographic.longitude);
let lat: any = Cesium.Math.toDegrees(cartographic.latitude);
if (width.value) {
width.value.label.show = false;
}
if (height.value) {
height.value.label.show = false;
}
width.value = viewer.value.entities.add({
position: measureCenterByCartesian(
Cesium.Cartesian3.fromDegrees(lng1, lat1),
Cesium.Cartesian3.fromDegrees(lng1, lat)
),
name: "text",
label: {
show: true,
text: getTwoPointDistance([lng1, lat1], [lng1, lat]),
font: "18px sans-serif",
fillColor: Cesium.Color.GOLD,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
},
});
height.value = viewer.value.entities.add({
position: measureCenterByCartesian(
Cesium.Cartesian3.fromDegrees(lng1, lat1),
Cesium.Cartesian3.fromDegrees(lng, lat1)
),
name: "text",
label: {
show: true,
text: getTwoPointDistance([lng1, lat1], [lng, lat1]),
font: "18px sans-serif",
fillColor: Cesium.Color.GOLD,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
},
});
westSouthEastNorth = [
lng1,
lat1,
lng1,
lat,
lng,
lat,
lng,
lat1,
lng1,
lat1,
];
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
handler.value.setInputAction(() => {
infoDetail.value.rectangle.push({ id: id, position: westSouthEastNorth });
// handler.value.destroy()
handler.value.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
viewer.value.scene.screenSpaceCameraController.enableRotate = true; //允许地图拖拽
}, Cesium.ScreenSpaceEventType.LEFT_UP);
}
/**计算出两点的中点 */
const measureCenterByCartesian = (from: any, to: any) => {
// 转换为Cartographic
let carto1 = Cesium.Ellipsoid.WGS84.cartesianToCartographic(from);
let carto2 = Cesium.Ellipsoid.WGS84.cartesianToCartographic(to);
// 计算中心点的经纬度
let lon = (carto1.longitude + carto2.longitude) / 2;
let lat = (carto1.latitude + carto2.latitude) / 2;
let center = Cesium.Cartographic.fromRadians(lon, lat);
// 将中心点的经纬度转换回Cartesian3
let centerPoint = Cesium.Ellipsoid.WGS84.cartographicToCartesian(center);
return centerPoint;
};
/**计算两点距离 */
const getTwoPointDistance = (position: any, position2: any) => {
let textDisance: any = "";
//叠加测量点
let distance = Cesium.Cartesian3.distance(
Cesium.Cartesian3.fromDegrees(position[0], position[1]),
Cesium.Cartesian3.fromDegrees(position2[0], position2[1])
);
if (distance > 10000) {
textDisance = (distance / 1000).toFixed(2) + "km";
} else {
textDisance = distance.toFixed(2) + "m";
}
return textDisance;
};
欢迎补充，一起进步。
