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;
};
欢迎补充,一起进步。
版权归原作者 爱编程的小透明 所有, 如有侵权,请联系我们删除。