cesium添加圆锥方法

var handler = null;
var circle_center_entity = null; // 池火灾 圆心点 entity
var temporary_circle_entity = null; // 临时圆形entity
var circle_entity = null; // 结果圆形entity
var circle_end_point = null; // 结束点
var circle_center_point = null; // 圆心点
var Viewer = null;
var SaveData = []

var polyBtnInfo = {
FontName: “面标绘”,
FontColor: “#409EFF”,
FontSize: 12,
LineWidth: 1,
LineColor: “rgba(255,255,0,1)”,
fillColor: “rgba(255,255,0,0.5)”,
explain: “”,
}

let spot = {
lon: “”,
lat: ‘’,
alt: ‘’
}

function communal(Viewer1, type,) {
Viewer = Viewer1
// console.log(‘type’, type)
switch (type) {
//绘制圆
case ‘circleBtn’:
click_draw_circle()
break;
//清除所有实体
//绘制圆
case ‘circleBtn1’:
return circleBtn1()
break;
//清除所有实体
case ‘clearHandle’:
clearHandle()
break
default:
break;
}
}
function circleBtn1() {
return SaveData
}
function changeData(data) {
polyBtnInfo = data

}

function click_draw_circle() {
// 再次点击的时候，清除已绘制的中心点，临时圆和结果圆，初始化参数
if (circle_entity !== null) {
// Viewer.entities.remove(circle_center_entity);
// Viewer.entities.remove(temporary_circle_entity);
// Viewer.entities.remove(circle_entity);
circle_center_entity = null;
temporary_circle_entity = null;
circle_entity = null;
circle_end_point = null;
circle_center_point = null;
}

// 清除所有点击事件
if (handler) {
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
    handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}

handler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);

// 鼠标点击左键
handler.setInputAction(event => {
    let position = event;
    //根据屏幕坐标获取坐标位置
    const point = Cartesian3_to_WGS84(getPointFromWindowPoint(event.position));
    // const point = GV.GeoPoint.fromScreen(position.position.x, position.position.y, Viewer);
    if (!point) {
        alert('请点击地球获取坐标！')
        return;
    }

    // 判断圆心是否已经绘制，如果绘制了，再次点击左键的时候，就是绘制最终结果圆形
    if (circle_center_entity) {
        // 设置最终点
        circle_end_point = {
            lon: point.lon.toFixed(10),
            lat: point.lat.toFixed(10),
            height: 0
        }
        // 绘制结果多边形
        draw_circle();
        // 清除事件
        handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
        handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
        // 清除 绘制的中心点和临时圆
        // Viewer.entities.remove(circle_center_entity);
        Viewer.entities.remove(temporary_circle_entity);
    } else {
        // console.log(point)
        // 设置中心点坐标和结束点坐标
        circle_end_point = circle_center_point = {
            lon: point.lon.toFixed(10),
            lat: point.lat.toFixed(10),
            height: 0
        }
        spot.lon = point.lon.toFixed(10)
        spot.lat = point.lat.toFixed(10),
            spot.alt = point.alt
        // 绘制圆心点
        create_circle_center_point([point.lon.toFixed(10), point.lat.toFixed(10), point.alt]);
        // 开始绘制动态圆形
        draw_dynamic_circle(circle_center_point)
    }

}, Cesium.ScreenSpaceEventType.LEFT_CLICK)

// 鼠标移动--实时绘制圆形
handler.setInputAction((event) => {
    let position = event;
    // console.log(position)
    //根据屏幕坐标获取坐标位置
    const point = Cartesian3_to_WGS84(getPointFromWindowPoint(event.endPosition));
    // console.log(point)
    // const point = GV.GeoPoint.fromScreen(position.endPosition.x, position.endPosition.y, Viewer);
    if (point) {
        if (temporary_circle_entity) {
            // 修改结束点-用于动态绘制圆形
            circle_end_point = {
                lon: point.lon.toFixed(10),
                lat: point.lat.toFixed(10),
                height: 0
            }
        }
    }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

}
//笛卡尔坐标系转WGS84坐标系
function Cartesian3_to_WGS84(point) {
var cartesian33 = new Cesium.Cartesian3(point.x, point.y, point.z);
var cartographic = Cesium.Cartographic.fromCartesian(cartesian33);
var lat = Cesium.Math.toDegrees(cartographic.latitude);
var lng = Cesium.Math.toDegrees(cartographic.longitude);
var alt = cartographic.height;
return { lat: lat, lon: lng, alt: alt };
}

// 创建圆心点
function create_circle_center_point(point_arr) {
// console.log(“create_circle_center_point”,point_arr)
circle_center_entity = Viewer.entities.add({
// fromDegrees（经度，纬度，高度）以度为单位的经度和纬度值返回Cartesian3位置
position: Cesium.Cartesian3.fromDegrees(point_arr[0], point_arr[1], point_arr[2]),
point: {
// 点的大小（像素）
pixelSize: 5,
// 点位颜色，fromCssColorString 可以直接使用CSS颜色
color: Cesium.Color.YELLOW,
// 边框颜色
outlineColor: Cesium.Color.fromCssColorString(‘#fff’),
// 边框宽度(像素)
outlineWidth: 2,
// 是否显示
show: true
},
label: {
// 文本。支持显式换行符“ \ n”
text: polyBtnInfo.FontName,
// 字体样式，以CSS语法指定字体
font: ${polyBtnInfo.FontSize}pt Source Han Sans CN,
// 字体颜色
fillColor:
Cesium.Color.fromCssColorString(polyBtnInfo.FontColor),
// 背景颜色
backgroundColor: Cesium.Color.AQUA,
// 字体边框
outline: true,
// 字体边框尺寸
outlineWidth: 10,
// 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
scale: 1.0,
// 设置样式：FILL：填写标签的文本，但不要勾勒轮廓；OUTLINE：概述标签的文本，但不要填写；FILL_AND_OUTLINE：填写并概述标签文本。
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
// 相对于坐标的水平位置
verticalOrigin: Cesium.VerticalOrigin.CENTER,
// 相对于坐标的水平位置
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
// 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
pixelOffset: new Cesium.Cartesian2(0, -30),
// 是否显示
show: true
}
});
}

// 绘制动态圆
function draw_dynamic_circle(point) {
temporary_circle_entity = Viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(point.lon, point.lat),
ellipse: {
// 半短轴（画圆：半短轴和半长轴一致即可）
semiMinorAxis: new Cesium.CallbackProperty(() => {
// PolygonHierarchy 定义多边形及其孔的线性环的层次结构（空间坐标数组）
return two_points_distance(point, circle_end_point);
}, false),
// 半长轴
semiMajorAxis: new Cesium.CallbackProperty(() => {
// PolygonHierarchy 定义多边形及其孔的线性环的层次结构（空间坐标数组）
return two_points_distance(point, circle_end_point);
}, false),
// 填充色
// material: Cesium.Color.RED.withAlpha(0.5),
material: Cesium.Color.fromCssColorString(polyBtnInfo.fillColor),
// 是否有边框
outline: true,
// 边框颜色
outlineColor: Cesium.Color.WHITE,
// 边框宽度
outlineWidth: 4
},
});
}

// 绘制结果圆形
function draw_circle() {

// 存储数据信息
let obj = {
    FontColor: polyBtnInfo.FontColor,
    FontName: polyBtnInfo.FontName,
    FontSize: polyBtnInfo.FontSize,
    explain: polyBtnInfo.explain,
    fillColor: polyBtnInfo.fillColor,
    points: Array(2),
    position: [],
    r: two_points_distance(circle_center_point, circle_end_point),
    tempLat: spot.lat,
    tempLon: spot.lon,
    alt: spot.alt,
    type: polyBtnInfo.type,
    CylinderHeight: polyBtnInfo.CylinderHeight
}
SaveData.push(obj)

// 绘制圆柱(锥)
circle_entity = Viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(obj.tempLon, obj.tempLat, obj.alt),
    cylinder: {
        length: obj.CylinderHeight, // 圆柱的高
        topRadius: obj.r, //圆柱底部大小
        topRadius: 0.0, //圆柱顶部大小
        bottomRadius: obj.r, //圆柱低部大小
        outline: true,
        outlineColor: Cesium.Color.WHITE,
        outlineWidth: 4,
        material: Cesium.Color.fromCssColorString(polyBtnInfo.fillColor),
    },
});
// console.log(cylinder)

}

// 根据经纬度计算两点之前的直线距离
function two_points_distance(start_point, end_point) {
// 经纬度转换为世界坐标
var start_position = Cesium.Cartesian3.fromDegrees(start_point.lon, start_point.lat, start_point.height);
var end_position = Cesium.Cartesian3.fromDegrees(end_point.lon, end_point.lat, end_point.height);
// 返回两个坐标的距离（单位：米）
return Cesium.Cartesian3.distance(start_position, end_position);
}

function getPointFromWindowPoint(point) {
if (
Viewer.scene.terrainProvider.constructor.name ==
“EllipsoidTerrainProvider”
) {
return Viewer.camera.pickEllipsoid(
point,
Viewer.scene.globe.ellipsoid
);
} else {
var ray = Viewer.scene.camera.getPickRay(point);
return Viewer.scene.globe.pick(ray, Viewer.scene);
}
}

//清除所有Entity和ImageryLayers
function clearHandle() {
//移除所有实体Entity
Viewer.entities.removeAll();
}

export default {
communal, changeData, clearHandle
}