Cesium-绘图接口Geometries笔记

保存在学习官网绘图示例的笔记

绘图接口

正方体

var box = viewer.entities.add({
    name : 'Blue box',
    position: this.options.position,        // 位置
    box : {
        dimensions : new Cesium.Cartesian3(400.0, 300.0, 5000.0),
        fill : true,       // 是否填充实体
        material : Cesium.Color.BLUE,       // 填充颜色
        outline : true,     // 显示框线
        outlineColor : Cesium.Color.YELLOW // 显示框的线颜色
    }
});

viewer.zoomTo(box);

椭圆/体

// 椭圆
var entity = viewer.entities.add({
    position: pos,
    name : 'Green circle at height with outline',
    ellipse : {
        semiMinorAxis : 300.0,  // 副轴
        semiMajorAxis : 300.0,  // 主轴
        height: 2000.0,         // 高度
        extrudedHeight : 1000.0,    // 实体高度
        rotation : Cesium.Math.toRadians(45), // 旋转角度
        // material : Cesium.Color.GREEN,
        material : Cesium.Color.BLUE.withAlpha(0.5),    // 填充材料
        outline : true // height must be set for outline to display
    }
});

幅度地形图

// 笛卡尔空间直角坐标 转换为 地理坐标(弧度制)
var cartographic=Cesium.Cartographic.fromCartesian(
    this.options.position);

var entity = viewer.entities.add({
    name : 'Red corridor on surface with rounded corners',
    corridor : {
        positions : Cesium.Cartesian3.fromRadiansArrayHeights([ // 弧度制的坐标值
            cartographic.longitude, cartographic.latitude, cartographic.height, 
            cartographic.longitude+0.0001, cartographic.latitude, cartographic.height + 1000, 
            cartographic.longitude, cartographic.latitude+0.0002, cartographic.height + 3000, 
        ]),
        width : 200.0,
        cornerType: Cesium.CornerType.MITERED,
        extrudedHeight : 1000.0,
        material : Cesium.Color.RED.withAlpha(0.8)
    }
});

viewer.zoomTo(entity);

perPositionHeight ：属性 DataSources / PolygonGraphics.js 240
获取或设置布尔值，指定是否使用每个位置的高度。如果为true，则形状将具有由每个PolygonGraphics#hierarchy位置的高度定义的非均匀高度。如果为false，则形状将具有指定的恒定高度PolygonGraphics#height。

// A boolean specifying whether or not the the height of each position is used.


// 多边形中画出洞洞
holes : [{
    positions : Cesium.Cartesian3.fromDegreesArray([
        -93.0, 34.0,
        -91.0, 34.0,
        -91.0, 36.0,
        -93.0, 36.0
    ])
}]

// 画线
polyline

material : new Cesium.PolylineDashMaterialProperty  // 虚线

// 可以根据二进制数来决定线型
dashPattern: parseInt('110000001111', 2)

其他知识

polylineVolume : {
        positions : Cesium.Cartesian3.fromDegreesArray([-85.0, 32.0,  // 坐标位置
                                                        -85.0, 36.0,
                                                        -89.0, 36.0]),
        shape : computeCircle(60000.0),


// shape 定义每个点要显示出的形状



// 旋转45度
rotation : Cesium.Math.toRadians(45),





function getRotationValue() {
    rotation += 0.105;
    return rotation;
}


// 旋转角度
rotation: new Cesium.CallbackProperty(getRotationValue, false),
stRotation: new Cesium.CallbackProperty(getRotationValue, false),



radii : new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),

坐标变换

笛卡尔空间直角坐标 转换为 地理坐标(弧度制)
var cartographic=Cesium.Cartographic.fromCartesian(cartesian)

地理坐标(弧度制) 转换为 笛卡尔空间直角坐标
var position = Cesium.Cartesian3.fromRadians(lng, lat, height)

笛卡尔空间直角坐标 转换为 地理坐标(经纬度)
var cartographic=Cesium.Cartographic.fromCartesian(cartesian) 
var lat=Cesium.Math.toDegrees(cartographic.latitude);
var lng=Cesium.Math.toDegrees(cartographic.longitude);
var height=cartographic.height;

地理坐标(经纬度) 转换为 笛卡尔空间直角坐标
var position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height)

度数与弧度互转 
Cesium.Math.toDegrees(radians) 
Cesium.Math.toRadians(degrees)

点击实体出现信息框

new Cesium.Viewer('cesiumContainer', {
    infoBox: true,  // 点击实体, 弹出信息框
	...

// js 深度拷贝
var pos = JSON.parse(JSON.stringify(this.options.position));

pos.x += 1000;

// 从 度数 
// Cesium.Cartesian3.fromDegreesArrayHeights
// A list of longitude, latitude and height values. Values alternate [longitude, latitude, height, longitude, latitude, height...].
var positions = Cesium.Cartesian3.fromDegreesArrayHeights([-115.0, 37.0, 100000.0, -107.0, 33.0, 150000.0]);


[-2243692.116360001, 5311185.269344628, ]

Cesium.CornerType.ROUNDED
Cesium.CornerType.MITERED
Cesium.CornerType.BEVELED