Cesium 常用操作【1-3】

AI_Stu

已于 2022-03-14 17:03:42 修改

阅读量1.5k

点赞数

分类专栏： Cesium 文章标签： javascript

于 2021-11-30 11:13:57 首次发布

本文链接：https://blog.csdn.net/qq_32813465/article/details/121604768

版权

Cesium 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

文章目录

声明：禁止商业转载！本文受益于互联网资料和个人总结，旨在学习交流非商业盈利，不存在版权纠纷。如有错误欢迎批评指正！
2021年11月29日编辑于湖北·武汉

1. 颜色

1.1 创建颜色

var Color = new Cesium.color(1, 0, 0, 1);
var Color = new Cesium.Color.fromBytes(255, 0, 0, 255);    /*rgba()格式*/
var Color = new Cesium.Color.fromCssColorString (#ff0000)  /*css#格式*/
var Color = new Cesium.Color.fromHsl (0, 100%, 50%, 1)     /*HSL 色相角、饱和度值、亮度值、Alpha*/

// 还原
var rgba = Color.toBytes()
var css = Color.toCssColorString()
var hsl = Color.toHsl()

1.2 随机颜色

minimum* 必须小于或等于maximum*

var Color = new Cesium.Color.fromRandom ({
	minimumRed : 0.75,
	maximumRed : 1,
    minimumGreen : 0.75,
    maximumGreen : 1,
    minimumBlue : 0.75,
    maximumBlue : 1,
    minalpha : 0.5,
    maxalpha : 1.0
})

2. 坐标

Cesium中坐标系：WGS84经纬度坐标系（没有实际的对象）、WGS84弧度坐标系（Cartographic）、笛卡尔空间直角坐标系（Cartesian3）、平面坐标系（Cartesian2），4D笛卡尔坐标系（Cartesian4）

2.1 经纬度坐标系转笛卡尔坐标系

方法一：直接转换
lng：经度(度)，lat：纬度(度)，alt：高度(米)

var Cartesian3 = Cesium.Cartesian3.fromDegrees(lng,lat,alt)

方法二：先转成弧度再转换
x：经度(弧度)，y：纬度(弧度)，z：高度(米)

var x = Cesium.CesiumMath.toRadians(lng)
var y = Cesium.CesiumMath.toRadians(lat)
var z = Cesium.CesiumMath.toRadians(alt)
var Cartesian3 = Cesium.Cartesian3.fromRadians (x, y, z)

方法三：先转成弧度再转换
lng：经度(度)，lat：纬度(度)，alt：高度(米)

var ellipsoid = viewer.scene.globe.ellipsoid;
var cartographic = Cesium.Cartographic.fromDegrees(lng,lat,alt);
var cartesian3 = ellipsoid.cartographicToCartesian(cartographic);
// or
var cartesian3 = Cesium.Cartographic.toCartesian(cartographic)

2.2 笛卡尔坐标系转经纬度坐标系

方法一：先转为弧度再转换

var cartographic = Cesium.Cartographic.fromCartesian(Cartesian3);
var lng = Cesium.Math.toDegrees(cartographic.longitude);
var lat = Cesium.Math.toDegrees(cartographic.latitude);
var height = cartographic.height;

方法二：先转为弧度再转换

var ellipsoid = viewer.scene.globe.ellipsoid;
var cartographic = ellipsoid.cartesianToCartographic(cartesian3);
var lng = Cesium.Math.toDegrees(cartographic.longitude);
var lat = Cesium.Math.toDegrees(cartographic.latitude);
var height = cartographic.height;

2.3 弧度坐标系转为和转出

转为弧度坐标系

var cartographic = Cesium.Cartographic.fromDegrees(longitude, latitude, height)  /*经纬度坐标直接转换弧度坐标系*/
var cartographic = Cesium.Cartographic.fromRadians(x, y, z)  /* 弧度坐标转弧度坐标系*/
var cartographic = Cesium.Cartographic.fromCartesian(Cartesian3) /*笛卡尔坐标表转弧度坐标系*/

弧度坐标系转出

/*弧度坐标系转换经纬度坐标*/
var lng = Cesium.Math.toDegrees(cartographic.longitude); 
var lat = Cesium.Math.toDegrees(cartographic.latitude);
var height = cartographic.height;

/*弧度坐标系转换笛卡尔度坐标*/
var Cartesian3 = Cesium.Cartesian3.fromRadians (
	cartographic.longitude, 
	cartographic.latitude, 
	cartographic.height
)

2.4 经纬度与弧度互转

弧度= π/180×经纬度角度
经纬度角度=180/π×弧度

var radians = Cesium.CesiumMath.toRadians(degrees); /*经纬度转弧度*/
var degrees = Cesium.CesiumMath.toDegrees(radians); /*弧度转经纬度*/

2.5 笛卡尔坐标与屏幕坐标互转

笛卡尔坐标转为屏幕坐标

var WindowPosition = viewer.scene.cartesianToCanvasCoordinates(Cartesian3);
//or 默认WGS84坐标下
var WindowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates (scene, Cartesian3)

示例：标签随鼠标移动

//*  lng, lat 为标签点经纬度
//*  InfoDiv 为Jq获取的标签div 元素
// 每一帧都去计算气泡的正确位置
viewer.scene.postRender.addEventListener(function () {
    try {
        var canvasHeight = viewer.scene.canvas.clientHeight;
        var Cartesian = Cesium.Cartesian3.fromDegrees(lng, lat);
        var newWindowPosition = viewer.scene.cartesianToCanvasCoordinates(Cartesian);
        if (newWindowPosition == undefined || newWindowPosition == null) {
            InfoDiv.css("display","none");
        } else {
            InfoDiv.css("display","");
            InfoDiv[0].style.bottom = (canvasHeight - newWindowPosition.y + 120) + 'px';
            InfoDiv[0].style.left = (newWindowPosition.x - 450) + 'px';
        }
    }
    catch (e) {}
})

屏幕坐标转为笛卡尔坐标

方法一：通过getPickRay(WindowPosition) 做视口到坐标点的一条射线；通过globe.pick(ray,scene) 找到射线与渲染的地球表面之间的交点，并以笛卡尔坐标输出。
方法二：scene.pickPosition(WindowPosition) 方法 【需开启深度检测】
方法三：camera.pickEllipsoid(WindowPosition, ellipsoid) 方法 【在加载地形的场景上获取的坐标有误差】

var WindowPosition= new Cesium.Cartesian2(x,y); // 屏幕坐标
var Cartesian = viewer.scene.globe.pick(viewer.camera.getPickRay(WindowPosition),scene);
// or
var Cartesian = viewer.scene.pickPosition(WindowPosition)
// or
var ellipsoid = viewer.scene.globe.ellipsoid;
var Cartesian= viewer.camera.pickEllipsoid(WindowPosition, ellipsoid);

示例：点击返回经纬度

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(e) {
     // 获取点击位置笛卡尔坐标
     var Cartesian = viewer.scene.pickPosition(e.position);
     if (!Cartesian ) {
         Cartesian = Cesium.Cartesian3.fromDegrees(0, 0, 0);
     }
     // 从笛卡尔坐标获取经纬度
     var cartographic = Cesium.Cartographic.fromCartesian(Cartesian);
     var longitude = Cesium.Math.toDegrees(cartographic.longitude);
     var latitude = Cesium.Math.toDegrees(cartographic.latitude);
     var height = cartographic.height;
 }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

3. 拾取（点击事件）

3.1 屏幕空间点击事件

var hander = Cesium.ScreenSpaceEventHander(scene.canves);
hander.setInputAction(function(e){
	// other
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

3.2 拾取实体

viewer.scene.pick(windowPosition)
返回处于该坐标下，场景中的第一个（顶部）具有‘primitive’属性的对象。

示例：结合屏幕点击事件修改选中实体属性

var hander = Cesium.ScreenSpaceEventHander(scene.canves);
hander.setInputAction(function (e) {
    var pickedObject = viewer.scene.pick(e.position);
    if (Cesium.defined(pickedObject)) {
       /* pickedObject.id.polygon['material'] = new Cesium.Color(1.0, 1.0, 1.0, 0.7);*/
        pickedObject.id.polygon['outline'] = true;
        pickedObject.id.polygon['outlineWidth'] = 2;
        pickedObject.id.polygon['outlineColor'] = new Cesium.Color(1.0, 0, 0, 0.7);
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)

viewer.scene.drillPick (windowPosition, limit , width , height )
返回处于该坐标下，具有‘primitive’属性的对象集。

实体拾取应用到具体场景中时，往往新增一个自定义属性，以适配多场景

entity = viewer.entities.add({
    polygon: {
        hierarchy: new Cesium.Cartesian3.fromDegreesArray(pos),
        material: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
    },
    clampToS3M: true
});
entity.addProperty("type");  // 新增实体属性
entity.type = "typeName";    // 属性名称

// 拾取后读取
console.log(pickedObject.id.type)

3.3 拾取位置、高度

三种方法。具体示例在2.5节-屏幕坐标转为笛卡尔坐标

拾取的坐标会不准确时建议开启深度检测：viewer.scene.globe.depthTestAgainstTerrain = true

viewer.camera.getPickRay(WindowPosition) + viewer.scene.globe.pick(ray,scene)； // 拾取带地形高度的地表坐标
viewer.scene.pickPosition (windowPosition)； // 实体entity高度
viewer.camera.pickEllipsoid(WindowPosition, ellipsoid)； // 仅拾取椭球体表面坐标

3.4 拾取图层

viewer.imageryLayers.pickImageryLayerFeatures(ray, scene);
异步返回与拾取射线相交的图像图层要素信息 <ImageryLayerFeatureInfo>

示例：拾取图层

var ray = viewer.camera.getPickRay(windowPosition);
var featuresPromise = viewer.imageryLayers.pickImageryLayerFeatures(ray, viewer.scene);
if (!Cesium.defined(featuresPromise)) {
    console.log('No features picked.');
} else {
	// 异步返回
    Cesium.when(featuresPromise, function(features) {
        console.log('Number of features: ' + features.length);
        if (features.length > 0) {
            console.log('First feature name: ' + features[0].name);
        }
    });
}