1 方法目录

中文名	函数名
设置相机位置姿态	setCameraPosition
获取相机当前位置	getCameraPosition
获取两点直线距离	getDistance
获取两点测地距离。	getGeodesicDistance
WGS84坐标转笛卡尔坐标	WGS84_to_Cartesian3
笛卡尔坐标转WGS84坐标	Cartesian3_to_WGS84
WGS84坐标转屏幕坐标	WGS84_to_WindowCoordinates
弧度转度	rad2deg
度转弧度	deg2rad
从一串经纬度坐标获取中心坐标	getCenterOfLonlats
从一串笛卡尔坐标获取中心坐标	getCenterOfCartesians
添加场景包括雨、雪、雾等天气	addStage

使用之前；导入相关库

                                        
import {
    Ellipsoid,
    SceneTransforms,
    Viewer,
    CameraEventType,
    HeadingPitchRange,
    Cartesian3,
    Cartographic,
    EllipsoidGeodesic,
    Color,
    RectangleGeometry,
    Rectangle,
    ColorGeometryInstanceAttribute,
    Primitive,
    EllipsoidGeometry,
    ScreenSpaceEventHandler,
    Math as cesiumMath,
    Matrix4,
    defined,
    Transforms,
    HeadingPitchRoll,
    viewerCesium3DTilesInspectorMixin,
    HeightReference,
    PostProcessStage,
    freezeObject,
    knockout,
    Matrix3,
    UrlTemplateImageryProvider,
    WebMapTileServiceImageryProvider,
    ArcGisMapServerImageryProvider,
    createOpenStreetMapImageryProvider
} from 'cesium'
                                        
                                    

2 代码

👉 设置相机位置姿态

                                        
/**
 * 设置相机位置姿态
 * @param {*} lon 经度
 * @param {*} lat 纬度
 * @param {*} height 高度
 * @param {*} heading  机头朝向【左右方向】
 * @param {*} pitch  俯仰角【上下方向】
 * @param {*} roll 翻滚角【侧空翻】
 */
setCameraPosition(lon,lat,height,heading,pitch,roll) {
    this.viewer.scene.camera.setView({
        destination: new Cartesian3.fromDegrees(lon,lat,height),
        orientation: {
            heading: cesiumMath.toRadians(heading), // 默认方向为正北，正角度为向东旋转，即水平旋转，也叫偏航角。
            pitch: cesiumMath.toRadians(pitch),     // 默认旋转角度为一90,即朝向地面，正角度为平面之上，负角度为平面之下，即上下旋转，也叫俯仰角。
            roll: cesiumMath.toRadians(roll)        // 默认旋转角度为0，左右旋转.正角度向右旋转，负角度向左旋转，也叫翻滚角。
        }
    });
}
                                        
                                    

👉 获取相机当前位置

                                        
/**
 * 获取相机当前位置
 */
getCameraPosition() {
    //中心点位置
    var rectangle = this.viewer.camera.computeViewRectangle();
    var west = rectangle.west / Math.PI * 180;
    var north = rectangle.north / Math.PI * 180;
    var east = rectangle.east / Math.PI * 180;
    var south = rectangle.south / Math.PI * 180;
    var centerx = (west + east) / 2;
    var cnetery = (north + south) / 2;
    //获取当前相机高度
    let height = Math.ceil(this.viewer.camera.positionCartographic.height);
    let position = WGS84_to_Cartesian3({
        lng: centerx,
        lat: cnetery,
        alt: height
    })
    return position
}
                                        
                                    

👉 获取两点直线距离

                                        
/**
 * 获取两点之间的直线距离
 * @param {*} pt0 
 * @param {*} pt1 
 */
static getDistance(pt0, pt1) {
    let distance = 0
    // Cartesian3.distance 计算的是两点之间的直线距离，忽略了地球曲率。
    let s = Cartesian3.distance(pt0, pt1)
    distance = distance + s
    return distance
}
                                        
                                    

👉 获取两点测地距离

                                        
/**
 * 获取两点之间的测地距离。
 * @param {Cartesian3} pt1 第一个坐标点
 * @param {Cartesian3} pt2 第二个坐标点
 * @returns {Number} 返回两点之间的测地距离。
 */
static getGeodesicDistance(pt1, pt2) {
    const pickedPointCartographic = Ellipsoid.WGS84.cartesianToCartographic(
        pt1
    )
    const lastPointCartographic = Ellipsoid.WGS84.cartesianToCartographic(
        pt2
    )
    const geodesic = new EllipsoidGeodesic(
        pickedPointCartographic,
        lastPointCartographic
    )
    return geodesic.surfaceDistance
}
                                        
                                    

👉 WGS84坐标转笛卡尔坐标

                                        
/**
 * WGS84坐标系转笛卡尔坐标系
 * @param point
 * @return {{x: *, y: *, z: *}}
 * @constructor
 */
static WGS84_to_Cartesian3(point) {
    var car33 = Cartesian3.fromDegrees(point.lng, point.lat, point.alt);
    var x = car33.x;
    var y = car33.y;
    var z = car33.z;
    return new Cartesian3(x, y, z);
}
                                        
                                    

👉 笛卡尔坐标转WGS84坐标

                                        
/**
 * 笛卡尔坐标系转WGS84坐标系
 * @param point
 * @return {{lat: *, lng: *, alt: *}}
 * @constructor
 */
static Cartesian3_to_WGS84(cartesian3) {
    var cartographic = Cartographic.fromCartesian(cartesian3);
    var lat = cesiumMath.toDegrees(cartographic.latitude);
    var lng = cesiumMath.toDegrees(cartographic.longitude);
    var alt = cartographic.height;
    return [lng,lat,alt]
}
                                        
                                    

👉 WGS84坐标转屏幕坐标

                                        
/**
 * WGS84坐标转换到屏幕坐标
 * @param {*} scene 
 * @param {*} point 
 */
static WGS84_to_WindowCoordinates(scene, point) {
    let car33 = Cartesian3.fromDegrees(point.lng, point.lat, point.alt);
    return SceneTransforms.wgs84ToWindowCoordinates(scene, car33);
}
                                        
                                    

👉 弧度转度

                                        
/**
 * 弧度转度
 * @param {*} rad 
 */
static rad2deg(rad){
    return rad*180/Math.PI;
}
                                        
                                    

👉 度转弧度

                                        
/**
 * 度转弧度
 * @param {*} degree 
 */
static deg2rad(degree){
    return degree*Math.PI/180;
}
                                        
                                    

👉 从一串经纬度坐标获取中心坐标

                                        
/**
 * 获取中心点坐标 （从经纬度坐标）
 * @param {Array} points 
 * @returns 
 */
static getCenterOfLonlats(points){
    let lons=[],lats=[];
    for(let i=0;i<points.length;i++){
        lons.push(points[i][0]);
        lats.push(points[i][1])
    }
    lons.sort(function(a,b){
        return a-b;
    })
    lats.sort(function(a,b){
        return a-b;
    })
    let centerLon=(lons[0]+lons[lons.length-1])/2;
    let centerLat=(lats[0]+lats[lats.length-1])/2;

    return [centerLon,centerLat]

}
                                        
                                    

👉 从一串笛卡尔坐标获取中心坐标

                                        
/**
 * 获取中心点坐标 （从笛卡尔坐标）
 * @param {Array} cartesians 
 * @returns 
 */
static getCenterOfCartesians(cartesians){
    let x_arr=[],y_arr=[],z_arr=[];
    for(let i=0;i<cartesians.length;i++){
        x_arr.push(cartesians[i].x);
        y_arr.push(cartesians[i].y);
        z_arr.push(cartesians[i].z);
    }
    x_arr.sort(function(a,b){
        return a-b;
    })
    y_arr.sort(function(a,b){
        return a-b;
    })
    z_arr.sort(function(a,b){
        return a-b;
    })
    let centerX=(x_arr[0]+x_arr[x_arr.length-1])/2;
    let centerY=(y_arr[0]+y_arr[y_arr.length-1])/2;
    let centerZ=(z_arr[0]+z_arr[z_arr.length-1])/2;
    return new Cartesian3(centerX, centerY, centerZ)

}
                                        
                                    

👉 添加场景包括雨、雪、雾等天气

                                        
/**
 * 添加场景
 * @param {Viewer} viewer  viewer视图
 * @param {String} type    场景类型
 */
addStage(type) {
    let stageGlsl = {
        snow: ` uniform sampler2D colorTexture;\n\
                varying vec2 v_textureCoordinates;\n\
                \n\
                float snow(vec2 uv,float scale)\n\
                    {\n\
                        float time = czm_frameNumber / 60.0;\n\
                        float w=smoothstep(1.,0.,-uv.y*(scale/10.));if(w<.1)return 0.;\n\
                        uv+=time/scale;uv.y+=time*2./scale;uv.x+=sin(uv.y+time*.5)/scale;\n\
                        uv*=scale;vec2 s=floor(uv),f=fract(uv),p;float k=3.,d;\n\
                        p=.5+.35*sin(11.*fract(sin((s+p+scale)*mat2(7,3,6,5))*5.))-f;d=length(p);k=min(d,k);\n\
                        k=smoothstep(0.,k,sin(f.x+f.y)*0.01);\n\
                        return k*w;\n\
                    }\n\
                    \n\
                    void main(void){\n\
                        vec2 resolution = czm_viewport.zw;\n\
                        vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);\n\
                        vec3 finalColor=vec3(0);\n\
                        float c = 0.0;\n\
                        c+=snow(uv,30.)*.0;\n\
                        c+=snow(uv,20.)*.0;\n\
                        c+=snow(uv,15.)*.0;\n\
                        c+=snow(uv,10.);\n\
                        c+=snow(uv,8.);\n\
                        c+=snow(uv,6.);\n\
                        c+=snow(uv,5.);\n\
                        finalColor=(vec3(c)); \n\
                        gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(finalColor,1), 0.5); \n\
                    \n\
                    }\n\ `,
        rain: ` uniform sampler2D colorTexture;\n\
                varying vec2 v_textureCoordinates;\n\
                \n\
                float hash(float x){\n\
                    return fract(sin(x*133.3)*13.13);\n\
                }\n\
                \n\
                void main(void){\n\
                \n\
                    float time = czm_frameNumber / 60.0;\n\
                    vec2 resolution = czm_viewport.zw;\n\
                    \n\
                    vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);\n\
                    vec3 c=vec3(.6,.7,.8);\n\
                    \n\
                    float a=-.4;\n\
                    float si=sin(a),co=cos(a);\n\
                    uv*=mat2(co,-si,si,co);\n\
                    uv*=length(uv+vec2(0,4.9))*.3+1.;\n\
                    \n\
                    float v=1.-sin(hash(floor(uv.x*100.))*2.);\n\
                    float b=clamp(abs(sin(20.*time*v+uv.y*(5./(2.+v))))-.95,0.,1.)*20.;\n\
                    c*=v*b; \n\
                    \n\
                    gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(c,1), 0.5);  \n\
                }\n\
`,
        fog: `   uniform sampler2D colorTexture;\n\
                uniform sampler2D depthTexture;\n\
                varying vec2 v_textureCoordinates;\n\
                void main(void)\n\
                {\n\
                    vec4 origcolor=texture2D(colorTexture, v_textureCoordinates);\n\
                    vec4 fogcolor=vec4(0.8,0.8,0.8,0.5);\n\
                    \n\
                    float depth = czm_readDepth(depthTexture, v_textureCoordinates);\n\
                    vec4 depthcolor=texture2D(depthTexture, v_textureCoordinates);\n\
                    \n\
                    float f=(depthcolor.r-0.22)/0.2;\n\
                    if(f<0.0) f=0.0;\n\
                    else if(f>1.0) f=1.0;\n\
                    gl_FragColor = mix(origcolor,fogcolor,f);\n\
                }\n\
            `
    };
    try {
        if (type && typeof type == 'string') {
            let postProcessStages = this.viewer.scene.postProcessStages;
            let fs_Type = stageGlsl[type];
            let stage = new PostProcessStage({
                name: `BN_${type}`,
                fragmentShader: fs_Type
            });
            postProcessStages.add(stage);
            return stage;
        } else {
            throw ''
        }
    } catch (e) {
        console.log('场景类型参数未定义，或者不是要求的字符串类型');
    }

}