cesium初使用
作者：互联网
cesium初使用
var viewer = new Cesium.Viewer('cesiumContainer');
//创建长方形
var wyoming = viewer.entities.add({
name : 'Wyoming',
polygon : {
hierarchy : Cesium.Cartesian3.fromDegreesArray([
-109.080842,45.002073,
-105.91517,45.002073,
-104.058488,44.996596,
-104.053011,43.002989,
-104.053011,41.003906,
-105.728954,40.998429,
-107.919731,41.003906,
-109.04798,40.998429,
-111.047063,40.998429,
-111.047063,42.000709,
-111.047063,44.476286,
-111.05254,45.002073]),
height : 0,
material : Cesium.Color.RED.withAlpha(0.5),
outline : true,
outlineColor : Cesium.Color.BLACK
}
});
viewer.zoomTo(wyoming);
//创建一个椭圆
var entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
ellipse : {
semiMinorAxis : 250000.0,
semiMajorAxis : 400000.0,
material : Cesium.Color.BLUE.withAlpha(0.5)
}
});
viewer.zoomTo(viewer.entities);
var ellipse = entity.ellipse;
// ellipse.material = '//cesiumjs.org/tutorials/images/cats.jpg'；//显示图片
//网格显示
ellipse.material = new Cesium.CheckerboardMaterialProperty({
evenColor : Cesium.Color.WHITE,
oddColor : Cesium.Color.BLACK,
repeat : new Cesium.Cartesian2(4, 4)
});
//条纹显示
ellipse.material = new Cesium.StripeMaterialProperty({
evenColor : Cesium.Color.WHITE,
oddColor : Cesium.Color.BLACK,
repeat : 32
});
//网格显示
ellipse.material = new Cesium.GridMaterialProperty({
color : Cesium.Color.YELLOW,
cellAlpha : 0.2,
lineCount : new Cesium.Cartesian2(8, 8),
lineThickness : new Cesium.Cartesian2(2.0, 2.0)
});
//和 fill属性不太一样，outline没有对应的材质配置，而是用两个独立的属性outlineColor和outlineWidth。
//注意outlineWidth属性仅仅在非windows系统上有效，比如Android, iOS, Linux, 和OS X。
ellipse.fill = false;
ellipse.outline = true;
ellipse.outlineColor = Cesium.Color.YELLOW;
ellipse.outlineWidth = 2.0;
折线
折线是个特例，他没有填充或者边线属性。除了颜色它有专门的材质属性。由于这种特殊材质，折线宽度和折线的边线宽度，在所有系统都有效。
var viewer = new Cesium.Viewer('cesiumContainer');
var entity = viewer.entities.add({
polyline : {
positions : Cesium.Cartesian3.fromDegreesArray([-77, 35,
-77.1, 35]),
width : 5,
material : Cesium.Color.RED
}});
viewer.zoomTo(viewer.entities);
var polyline = entity.polyline // For upcoming examples
//折线边线
polyline.material = new Cesium.PolylineOutlineMaterialProperty({
color : Cesium.Color.ORANGE,
outlineWidth : 3,
outlineColor : Cesium.Color.BLACK
});
//折线辉光
polyline.material = new Cesium.PolylineGlowMaterialProperty({
glowPower : 0.2,
color : Cesium.Color.BLUE
});
//创建立体高空显示得图像
var viewer = new Cesium.Viewer('cesiumContainer');
var wyoming = viewer.entities.add({
name : 'Wyoming',
polygon : {
hierarchy : Cesium.Cartesian3.fromDegreesArray([
-109.080842,45.002073,
-105.91517,45.002073,
-104.058488,44.996596,
-104.053011,43.002989,
-104.053011,41.003906,
-105.728954,40.998429,
-107.919731,41.003906,
-109.04798,40.998429,
-111.047063,40.998429,
-111.047063,42.000709,
-111.047063,44.476286,
-111.05254,45.002073]),
height : 0,
material : Cesium.Color.RED.withAlpha(0.5),
outline : true,
outlineColor : Cesium.Color.BLACK
}
});
viewer.zoomTo(wyoming);
//下面代码创建一个从200,000米到 250,000米的体 。也就是说这个体的高度是50000米。
wyoming.polygon.height = 200000;
wyoming.polygon.extrudedHeight = 250000;
var heading = Cesium.Math.toRadians(90);
var pitch = Cesium.Math.toRadians(-30);
viewer.zoomTo(wyoming, new Cesium.HeadingPitchRange(heading, pitch));
viewer.flyTo(wyoming).then(function(result){
if (result) {
viewer.selectedEntity = wyoming;
}
});
wyoming.position = Cesium.Cartesian3.fromDegrees(-107.724, 42.68);
viewer.trackedEntity = wyoming;
viewer.entities.add({
id : 'uniqueId'
});
var entity = viewer.entities.getById('uniqueId');
//创建一个点或者标注非常简单，只需要设置entity 的 position 属性，以及point 或者label 可视化对象。
//创建一个坐标点显示
var viewer = new Cesium.Viewer('cesiumContainer');
var citizensBankPark = viewer.entities.add({
name : 'Citizens Bank Park',
position : Cesium.Cartesian3.fromDegrees(-75.166493, 39.9060534),
point : {
pixelSize : 5,
color : Cesium.Color.RED,
outlineColor : Cesium.Color.WHITE,
outlineWidth : 2
},
label : {
text : 'Citizens Bank Park',
font : '14pt monospace',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth : 2,
verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
pixelOffset : new Cesium.Cartesian2(0, -9)
}
});
viewer.zoomTo(viewer.entities);
//获取实体
var getByIdBox = viewer.entities.getById('Box');
//删除添加的实体
错误方法：viewer.entities.remove(boxEntity);
正确方法：
//方法一(针对性删除某一个)
viewer.entities.remove(redBox);
//方法二（通过id删除）
viewer.entities.remove(getByIdBox);
//方法三（删除所有实体）
viewer.entities.removeAll();
标签方式写法
下拉框
<select data-bind="options: colorBlendModes, value: colorBlendMode"></select>
滑动框
<input type="range" min="0.0" max="1.0" step="0.01" data-bind="value: alpha, valueUpdate: 'input'">
相机提供得函数转移视角
camera.lookAt（）绑定飞机视角
camera.lookAtTransform( 参数Cesium.Matrix4.IDENTITY) 解除飞机绑定视角
设置展示出来的数据和可选框或者是下拉，下拉滑动展示
var viewModel = {
color: "Red",
colors: ["White", "Red", "Green", "Blue", "Yellow", "Gray"],
alpha: 1.0,
colorBlendMode: "Highlight",
colorBlendModes: ["Highlight", "Replace", "Mix"],
colorBlendAmount: 0.5,
colorBlendAmountEnabled: false,
silhouetteColor: "Red",
silhouetteColors: ["Red", "Green", "Blue", "Yellow", "Gray"],
silhouetteAlpha: 1.0,
silhouetteSize: 2.0,
};
Cesium.knockout.track(viewModel)绑定成响应式
var toolbar = document.getElementById（'toolbar绑定标签'）
Cesium.knockou.applyBindings（viewModel，toolbar） 进行数据绑定展示
3维窗口触发操作 当colorBlendMode变化时候把他的值改成最新的值
Cesium.knockout.getObservable(viewModel,'colorBlendMode‘）.subscribe(
function(newValue){
var colorBlendMode = getColorBlendMode(newValue);
同过viewmode进行之后在这里面来改值
model.colorBlendMode = colorBlendMode;
viewModel.colorBlendAmountEnabled = (colorBlendMode === Cesium.ColorBlebd.MIX)
}
)
var viewer = new Cesium.Viewer("cesiumContainer");
var entity = viewer.entities.add({
name: "box",
position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
box: {
show: true,
dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0), // Cartesian3类型，用于指定框的长度，宽度和高度
// 指定距实体位置的高度是相对于什么的高度。 default: HeightReference.NONE
// NONE 位置绝对；CLAMP_TO_GROUND 位置固定在地形上；RELATIVE_TO_GROUND 位置高度是指地形上方的高度。
heightReference: Cesium.HeightReference.NONE,
fill: true,
// MaterialProperty|Color default:Color.WHITE
material: Cesium.Color.RED.withAlpha(0.5),
outline: true,
// type:Property|Color default:Color.BLACK
outlineColor: Cesium.Color.BLACK,
outlineWidth: 1.0,
// type:ShadowMode default:ShadowMode.DISABLED
// DISABLED 对象不投射或接收阴影；ENABLED 对象投射并接收阴影；CAST_ONLY 对象仅投射阴影；RECEIVE_ONLY 该对象仅接收阴影。
shadows: Cesium.ShadowMode.DISABLED,
// type:DistanceDisplayCondition
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
// 1.0e3,
// 2.0e3
// ),
},
});
var entity = viewer.entities.add({
name: "corridor",
corridor: {
// show: true,
// 指定定义走廊中心线的 Cartesian3 位置的数组 type: Cartesian3
positions: Cesium.Cartesian3.fromDegreesArray([
-80.0,
40.0,
-85.0,
40.0,
-84.0,
35.0,
]),
width: 200000.0,
height: 200000.0,
heightReference: Cesium.HeightReference.NONE,
extrudedHeight: 100000.0,
extrudedHeightReference: Cesium.HeightReference.NONE,
// 拐角的样式 type:CornerType default:CornerType.ROUNDED
// ROUNDED 角有光滑的边缘；MITERED 拐角点是相邻边的交点；BEVELED 角被修剪
cornerType: Cesium.CornerType.ROUNDED,
granularity: Cesium.Math.RADIANS_PER_DEGREE, // 每个纬度和经度之间的距离
fill: true,
// 材质 type:MaterialProperty|Color default:Color.WHITE
material: Cesium.Color.BLUE.withAlpha(0.5),
outline: true, // height or extrudedHeight must be set for outlines to display
outlineColor: Cesium.Color.WHITE,
outlineWidth: 1.0,
shadows: Cesium.ShadowMode.DISABLED,
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
// 1.0e3,
// 2.0e3
// ),
// 走廊在地面上时将对地形，3D tiles还是对两者进行分类 type:ClassificationType default:ClassificationType.BOTH
// TERRAIN 将仅对地形进行分类;CESIUM_3D_TILE 将仅对3D Tiles进行分类;BOTH 将同时对Terrain和3D Tiles进行分类。
classificationType: Cesium.ClassificationType.BOTH,
},
});
var entity = viewer.entities.add({
name: "cylinder",
position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 200000.0),
cylinder: {
// show: true,
length: 400000.0, // 圆柱体长度
topRadius: 200000.0, // 圆柱体顶部半径
bottomRadius: 200000.0, // 圆柱体底部半径
heightReference: Cesium.HeightReference.NONE,
fill: true,
material: Cesium.Color.GREEN.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.DARK_GREEN,
outlineWidth: 1.0,
numberOfVerticalLines: 16, // 沿轮廓的周长绘制的垂直线的数量
shadows: Cesium.ShadowMode.DISABLED,
slices: 128, // 圆柱周围的边缘数量
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
// 1.0e3,
// 2.0e3
// ),
},
});
var entity = viewer.entities.add({
name: "Circles and Ellipses",
position: Cesium.Cartesian3.fromDegrees(-9500, 40.0, 100000.0),
ellipse: {
show: true,
semiMajorAxis: 300000.0, // 长半轴距离
semiMinorAxis: 150000.0, // 短半轴距离
height: 20000.0,
heightReference: Cesium.HeightReference.NONE,
extrudedHeight: 20000.0,
extrudedHeightReference: Cesium.HeightReference.NONE,
// rotation: Cesium.Math.toRadians(45), // 从北方逆时针旋转
stRotation: 0.0, // 纹理从北方逆时针旋转
granularity: Cesium.Math.RADIANS_PER_DEGREE, // 椭圆上各点之间的角距离
material: Cesium.Color.BLUE.withAlpha(0.5),
fill: true,
outline: true,
outlineColor: Cesium.Color.DARK_GREEN,
outlineWidth: 1.0,
numberOfVerticalLines: 16, // 沿轮廓的周长绘制的垂直线的数量
shadows: Cesium.ShadowMode.DISABLED,
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
// 1.0e3,
// 2.0e3
// ),
// 在地面上时将对地形，3D tiles还是对两者进行分类 type:ClassificationType default:ClassificationType.BOTH
// TERRAIN 将仅对地形进行分类;CESIUM_3D_TILE 将仅对3D瓷砖进行分类;BOTH 将同时对Terrain和3D Tile进行分类。
classificationType: Cesium.ClassificationType.BOTH,
},
});
var entity = viewer.entities.add({
name: "Spheres and Ellipsoids",
position: Cesium.Cartesian3.fromDegrees(-90.0, 40.0, 300000.0),
ellipsoid: {
show: true,
radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0), // 椭球半径
// innerRadii: new Cesium.Cartesian3(0.0, 0.0, 0.0), // 椭球内部半径
minimumClock: 0.0, // 最小时钟角度
maximumClock: 2 * Math.PI, // 最大时钟角度
minimumCone: 0.0, // 最小圆锥角
maximumCone: Math.PI, // 最大圆锥角
heightReference: Cesium.HeightReference.NONE,
fill: true,
material: Cesium.Color.BLUE.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.YELLOW,
outlineWidth: 1.0,
stackPartitions: 64, // 延纬度线切割的次数
slicePartitions: 64, // 延经度线切割的次数
subdivisions: 128, // 每个轮廓环的样本数，确定曲率的粒度
shadows: Cesium.ShadowMode.DISABLED,
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
// 1.0e3,
// 2.0e3
// ),
},
});
标签：entities,viewer,var,Cesium,Color,使用,cesium,new 来源： https://www.cnblogs.com/ly1368489670/p/14697103.html