Cesium开发学习笔记（三）---添加点，线，椭圆，多边形，扇形，飞机，广告牌以及模型的删除、运动

Cesium例子： https://sandcastle.cesium.com/index.html?src=3D%20Models.html&label=All

颜色

// 颜色自定义  
var xColors = new Cesium.Color(0.09412, 0.09804, 0.18431, 0.5); //深蓝 
var xColors2 = new Cesium.Color(1, 1, 1, 0.8);  //白色
var color = Cesium.Color.RED; //红色

点

//经纬度
var longitude = 118;
var latitude = 30;
// 点
viewer.entities.add({
	id:'点',
	name:'蓝点',
	show: true,  //显示.
    position: Cesium.Cartesian3.fromDegrees(longitude, latitude, 0.0),
    point: {
        color: Cesium.Color.BLUE, //颜色
        pixelSize: 5,//点大小
    }
});

线

let longitude1 = 119;
let latitude1 = 32;
// 线
var linePoint = [longitude, latitude, longitude1, latitude1];
viewer.entities.add({
    id: 'line',
    show: true,  //显示
    polyline: {
        positions: Cesium.Cartesian3.fromDegreesArray(linePoint),
        width: 1, //线条粗细
        followSurface: false, //取消弯曲
        material: Cesium.Color.YELLOW,  //线条材质
        clampToGround: true
    },
    label: {
        text: '超完美线条',  //文本
        show: true,  // 默认显示
        font: '12pt Source Han Sans CN',    //字体样式
        fillColor: xColors ,        //字体颜色
        backgroundColor: Cesium.Color.AQUA,    //背景颜色
        //showBackground:true,                //是否显示背景颜色
        style: Cesium.LabelStyle.FILL,        //label样式
        outlineWidth: 1,
        verticalOrigin: Cesium.VerticalOrigin.CENTER,//垂直位置
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,//水平位置
        pixelOffset: new Cesium.Cartesian2(5, 0)            //偏移
    }
});

椭圆、圆

// 椭圆
var imgaes = '../circle.png'
viewer.entities.add({
    description: "椭圆",  //描述
    position: Cesium.Cartesian3.fromDegrees(longitude, latitude, 0),
    show: true,
    ellipse: {
        semiMinorAxis: 100000,
        semiMajorAxis: 100000,
        height: 10,
        //rotation : Cesium.Math.toRadians(45),//旋转角
        material: new Cesium.ImageMaterialProperty({
            image: imgaes,
            //指定图像在每个方向上重复的次数,默认为Cesium.Cartesian2(1.0, 1.0),{Cartesian2}类型
            repeat: Cesium.Cartesian2(1.0, 1.0),  
            // 默认为false，当图像具有透明性时设置为true（例如，当png具有透明部分时）
            transparent: true,
            color: Cesium.Color.WHITE.withAlpha(0.5),  //透明度0.5
        })
    }
});

多边形

//三角形坐标
var list = [longitude,latitude,longitude1,latitude1,longitude2,latitude2];
viewer.entities.add({
	name: '多边形',
    polygon: {
         hierarchy: Cesium.Cartesian3.fromDegreesArray(list),
         outline: false,
         perPositionHeight: true, //允许三角形使用点的高度
         material: Cesium.Color.RED.withAlpha(0.4),
     }
});

扇形

var headings = Cesium.Math.toRadians(90);
viewer.entities.add({
    name : '扇形',
    position : Cesium.Cartesian3.fromDegrees(-102.0, 35.0, 20000.0),
    orientation : Cesium.Transforms.headingPitchRollQuaternion(
        Cesium.Cartesian3.fromDegrees(-102.0, 35.0, 20000.0),
        //new Cesium.HeadingPitchRoll(Cesium.Math.PI / 1.5, 0, 0.0)  // 1.5是扇形的朝向
       new Cesium.HeadingPitchRoll(headings, 0, 0.0) 
    ),
    ellipsoid : {
        radii : new Cesium.Cartesian3(500000.0, 500000.0, 500000.0),  // 扇形半径
        innerRadii : new Cesium.Cartesian3(1.0, 1.0, 1.0), // 内半径
        minimumClock : Cesium.Math.toRadians(-10), // 左右偏角
        maximumClock : Cesium.Math.toRadians(10), 
        minimumCone : Cesium.Math.toRadians(80),// 上下偏角  可以都设置为90
        maximumCone : Cesium.Math.toRadians(90),
        material : Cesium.Color.DARKCYAN.withAlpha(0.3),
        outline : true
    }
});

创建飞机

// 飞机模型
var url = '../../Apps/SampleData/models/CesiumAir/Cesium_Air.glb';
var heading = Cesium.Math.toRadians(60); //60度航向
var pitch = 0;
var roll = 0;
var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
var positions = Cesium.Cartesian3.fromDegrees(longitude, latitude, 0);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(positions, hpr);
viewer.entities.add({
    name: '飞机', // 名称
    show: true,  //显示
    id: '飞机', //id唯一
    position: positions,  // 飞机位置
    orientation: orientation, //飞机航向
    model: {
        uri: url,
        minimumPixelSize: 30, //模型最小
        maximumScale: 5000,  //模型最大
        color: Cesium.Color.ORANGE, // 模型颜色
        scale: 500, //当前比例
    }
});

广告牌

viewer.entities.add({
    show: true,
    id: '广告',
    position: Cesium.Cartesian3.fromDegrees(longitude, latitude, 0),
    billboard: {
        image: '../ship5.png',
        scale: 0.3, //比例
        color: Cesium.Color.WHITE.withAlpha(1)
    }
});

测距

function createDistance() {
    var point1 = new Cesium.Cartesian3.fromDegrees(longitude, latitude, 0.0)
    var point2 = new Cesium.Cartesian3.fromDegrees(longitude1, latitude1, 0.0)
    var linesMath = Cesium.Cartesian3.distance(point1, point2) //计算两点距离
    linesMath = linesMath.tofixed(6);  //保留6位数
    viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(longitude, latitude, 0.0),
        polyline: {   //划线
            positions: Cesium.Cartesian3.fromDegreesArray([longitude, latitude, longitude1, latitude1]),
            width: 3,
            followSurface: false, //取消弯曲
            material: Cesium.Color.RED,
            clampToGround: true
        },
        label: {
            text: linesMath + 'KM',
            font: '12pt Source Han Sans CN',    //字体样式
        }
    });
}

模型ID获取 删除 放大 位置更新

// 模型获取
var model = viewer.entities.getById('广告');
var lines = viewer.entities.getById('line');

model.show = false; //模型隐藏
viewer.entities.remove(model); // 模型移除
viewer.entities.removeAll(); // 移除全部模型
viewer.entities.removeById('广告');// id删除

// 模型当前位置获取
model.position.getValue(Viewer.clock.currentTime);
// 模型更新位置移动
model.position = Cesium.Cartesian3.fromDegrees(longitude, latitude, 0);
// 模型放大缩小
model.billboard.scale = 0.8;

// 线条连接
var cartog = Cesium.Cartesian3.fromDegrees(longitude, latitude);
var cartogarr = lines.polyline.positions.getValue();
cartogarr.push(cartog.clone());

此笔记仅仅为了记录自己在项目中所学到的知识，如果有问题，可以提出，我们可以共同探讨。