Cesium基础知识-创建几何模型

原创已于 2022-01-20 10:05:53 修改 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html

于 2022-01-19 14:42:32 首次发布

菜鸟学习编程之路同时被 3 个专栏收录

254 篇文章

订阅专栏

Cesium

43 篇文章

订阅专栏

JavaScript

41 篇文章

订阅专栏

本文介绍如何使用 Cesium 库进行三维地图的绘制，包括创建条纹、几何图形、墙体等元素，并演示了如何通过代码实现动态颜色更改等功能。

viewer = new Cesium.Viewer('cesiumContainer');
//创建条纹
function CreateTiaoWen() {
viewer.entities.add({
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
material: new Cesium.StripeMaterialProperty({
evenColor: Cesium.Color.RED,
oddColor: Cesium.Color.BLUE,
repeat: 5
})
}
});
}
//CreateTiaoWen();
//使用几何图形和外观
function CreateTiaoWen2() {
var scene = viewer.scene;
var instance = new Cesium.GeometryInstance({
geometry: new Cesium.RectangleGeometry({
rectangle: Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
})
});
scene.primitives.add(new Cesium.Primitive({
geometryInstances: instance,
appearance: new Cesium.EllipsoidSurfaceAppearance({
material: Cesium.Material.fromType('Stripe')
})
}));
}
//CreateTiaoWen2();
//使用几何图形和外观
function CreateTiaoWen3() {
var scene = viewer.scene;
var instance = new Cesium.GeometryInstance({
geometry: new Cesium.RectangleGeometry({
rectangle: Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
})
});
var anotherInstance = new Cesium.GeometryInstance({
geometry: new Cesium.RectangleGeometry({
rectangle: Cesium.Rectangle.fromDegrees(-85.0, 20.0, -75.0, 30.0),
vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
})
});
scene.primitives.add(new Cesium.Primitive({
geometryInstances: [instance, anotherInstance],
appearance: new Cesium.EllipsoidSurfaceAppearance({
material: Cesium.Material.fromType('Stripe')
})
}));
}
//CreateTiaoWen3();
//使用几何图形和外观
function CreateTiaoWen4() {
var scene = viewer.scene;
var instance = new Cesium.GeometryInstance({
geometry: new Cesium.RectangleGeometry({
rectangle: Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
}),
attributes: {
color: new Cesium.ColorGeometryInstanceAttribute(0.0, 0.0, 1.0, 0.8)
}
});
var anotherInstance = new Cesium.GeometryInstance({
geometry: new Cesium.RectangleGeometry({
rectangle: Cesium.Rectangle.fromDegrees(-85.0, 20.0, -75.0, 30.0),
vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
}),
attributes: {
color: new Cesium.ColorGeometryInstanceAttribute(1.0, 0.0, 0.0, 0.8)
}
});
scene.primitives.add(new Cesium.Primitive({
geometryInstances: [instance, anotherInstance],
appearance: new Cesium.PerInstanceColorAppearance()
}));
}
//CreateTiaoWen4();
//使用几何图形和外观
function CreateTiaoWen5() {
var scene = viewer.scene;
var instances = [];
for (var lon = -180.0; lon < 180.0; lon += 5.0) {
for (var lat = -85.0; lat < 85.0; lat += 5.0) {
instances.push(new Cesium.GeometryInstance({
geometry: new Cesium.RectangleGeometry({
rectangle: Cesium.Rectangle.fromDegrees(lon, lat, lon + 5.0, lat + 5.0),
vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
}),
id: 'rectangle:' + lon + "---" + lat,
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromRandom({
alpha: 0.5
}))
}
}));
}
}
scene.primitives.add(new Cesium.Primitive({
geometryInstances: instances,
appearance: new Cesium.PerInstanceColorAppearance()
}));
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (movement) {
var pick = scene.pick(movement.position);
if (Cesium.defined(pick)) {
console.log('Mouse clicked rectangle:' + pick.id);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
//CreateTiaoWen5();
//使用几何图形和外观
function CreateTiaoWen6() {
var scene = viewer.scene;
var instance = new Cesium.GeometryInstance({
geometry: new Cesium.RectangleGeometry({
rectangle: Cesium.Rectangle.fromDegrees(-100.0, 30.0, -90.0, 40.0),
vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
}),
id: 'my rectangle',
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
}
});
scene.primitives.add(new Cesium.Primitive({
geometryInstances: instance,
appearance: new Cesium.PerInstanceColorAppearance()
}));
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (movement) {
var pick = scene.pick(movement.position);
if (Cesium.defined(pick) && (pick.id === 'my rectangle')) {
console.log('Mouse clicked rectangle.');
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
//CreateTiaoWen6();
//使用几何球体EllipsoidGeometry创建
function CreateTuoYuanQiu() {
var scene = viewer.scene;
var ellipsoidGeometry = new Cesium.EllipsoidGeometry({
vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
radii: new Cesium.Cartesian3(300000.0, 200000.0, 150000.0)
});
var cyanEllipsoidInstance = new Cesium.GeometryInstance({
geometry: ellipsoidGeometry,
modelMatrix: Cesium.Matrix4.multiplyByTranslation(
Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-100.0, 40.0)),
new Cesium.Cartesian3(0.0, 0.0, 150000.0),
new Cesium.Matrix4()
),
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.CYAN)
}
});
var orangeEllipsoidInstance = new Cesium.GeometryInstance({
geometry: ellipsoidGeometry,
modelMatrix: Cesium.Matrix4.multiplyByTranslation(
Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-100.0, 40.0)),
new Cesium.Cartesian3(0.0, 0.0, 450000.0),
new Cesium.Matrix4()
),
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.ORANGE)
}
});
scene.primitives.add(new Cesium.Primitive({
geometryInstances: [cyanEllipsoidInstance, orangeEllipsoidInstance],
appearance: new Cesium.PerInstanceColorAppearance({
translucent: false,
closed: true
})
}));
}
//CreateTuoYuanQiu();
//使用几何球体EllipsoidGeometry创建,修改颜色
function ChangeColor() {
var scene = viewer.scene;
var circleInstance = new Cesium.GeometryInstance({
geometry: new Cesium.CircleGeometry({
center: Cesium.Cartesian3.fromDegrees(-95.0, 43.0),
radius: 250000.0,
vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
}),
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 0.0, 0.0, 0.5))
},
id: 'circle'
});
var primitive = new Cesium.Primitive({
geometryInstances: circleInstance,
appearance: new Cesium.PerInstanceColorAppearance({
translucent: false,
closed: true
})
});
scene.primitives.add(primitive);
setInterval(function () {
var attributes = primitive.getGeometryInstanceAttributes('circle');
attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(Cesium.Color.fromRandom({
alpha: 1.0
}));
}, 2000);
}
//ChangeColor();
//使用几何球体EllipsoidGeometry创建,修改颜色
function ChangeColor1() {
var appearance = new Cesium.PerInstanceColorAppearance({
translucent: false,
closed: true
});
var anotherAppearance = new Cesium.PerInstanceColorAppearance({
renderState: {
depthTest: {
enabled: true
},
cull: {
enabled: true,
face: Cesium.CullFace.BACK
}
}
});
var wall = Cesium.WallGeometry.fromConstantHeights({
positions : Cesium.Cartesian3.fromDegreesArray([
19.0, 47.0,
19.0, 48.0,
20.0, 48.0,
20.0, 47.0,
19.0, 47.0,
]),
minimumHeight : 20000.0,
maximumHeight : 10000.0
});
var geometry = Cesium.WallGeometry.createGeometry(wall);
viewer.entities.add(geometry);
viewer.zoomTo(viewer.entities);
}
ChangeColor1();
//创建墙
function CreateWall() {
var redWall = viewer.entities.add({
name: "Red wall at height",
wall: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-115.0,
44.0,
200000.0,
-90.0,
44.0,
200000.0,
]),
minimumHeights: [100000.0, 100000.0],
material: Cesium.Color.RED,
},
});
var greenWall = viewer.entities.add({
name: "Green wall from surface with outline",
wall: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-107.0,
43.0,
100000.0,
-97.0,
43.0,
100000.0,
-97.0,
40.0,
100000.0,
-107.0,
40.0,
100000.0,
-107.0,
43.0,
100000.0,
]),
material: Cesium.Color.GREEN,
outline: true,
},
});
var blueWall = viewer.entities.add({
name: "Blue wall with sawtooth heights and outline",
wall: {
positions: Cesium.Cartesian3.fromDegreesArray([
-115.0,
50.0,
-112.5,
50.0,
-110.0,
50.0,
-107.5,
50.0,
-105.0,
50.0,
-102.5,
50.0,
-100.0,
50.0,
-97.5,
50.0,
-95.0,
50.0,
-92.5,
50.0,
-90.0,
50.0,
]),
maximumHeights: [
100000,
200000,
100000,
200000,
100000,
200000,
100000,
200000,
100000,
200000,
100000,
],
minimumHeights: [
0,
100000,
0,
100000,
0,
100000,
0,
100000,
0,
100000,
0,
],
material: Cesium.Color.BLUE.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.BLACK,
},
});
viewer.zoomTo(viewer.entities);
}
//CreateWall();