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());
此笔记仅仅为了记录自己在项目中所学到的知识,如果有问题,可以提出,我们可以共同探讨。