Cesium合并Primitive
2021-10-12 本文已影响0人
姜治宇
cesium提供了两种方式添加实体，分别是entity与primitive。
如果是多个实体，我们可以将其合并为一个大Geometry，这样可以大大减轻CPU负担，从而更好的使用GPU。
entity与primitive
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./Cesium/Widgets/widgets.css">
<script src="./Cesium/Cesium.js"> </script>
</head>
<body>
<div id="cesiumContainer"></div>
</body>
</html>
<script>
var viewer = new Cesium.Viewer('cesiumContainer');
//entity方式
viewer.entities.add({
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(110.20, 34.55, 111.20, 35.55),
material: new Cesium.StripeMaterialProperty({
evenColor: Cesium.Color.WHITE,
oddColor: Cesium.Color.RED,
repeat: 5
})
}
});
//primitive方式
var instance = new Cesium.GeometryInstance({
geometry: new Cesium.RectangleGeometry({
rectangle: Cesium.Rectangle.fromDegrees(105.20, 30.55, 106.20, 31.55),
vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEXT_FORMAT
})
});
var scene = viewer.scene;
scene.primitives.add(new Cesium.Primitive({
geometryInstances: instance,
appearance: new Cesium.EllipsoidSurfaceAppearance({
material: Cesium.Material.fromType('Stripe')
})
}));
</script>
合并实体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./Cesium/Widgets/widgets.css">
<script src="./Cesium/Cesium.js"> </script>
</head>
<body>
<div id="cesiumContainer"></div>
</body>
</html>
<script>
var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;
var instances = [];
for (var lon = -180.0; lon < 180.0; lon += 5.0) {
for (var lat = -90.0; lat < 90.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)
}),
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromRandom({
alpha: 0.5
}))
}
}));
}
}
scene.primitives.add(new Cesium.Primitive({
geometryInstances: instances, //合并
//某些外观允许每个几何图形实例分别指定某个属性，例如：
appearance: new Cesium.PerInstanceColorAppearance()
}));
</script>
绘制效果：
demo.png
参考文章：https://www.jianshu.com/p/5a74c607a591
