qiusj
/
learning_cesium
0
0
Fork 0
Code Issues Issues Pull Requests Releases Wiki Wiki Activity
learning_cesium/加载primiive对象.html

421 lines
18 KiB
HTML
Raw Normal View History

init project
2024-03-19 18:06:25 +08:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="./Build/CesiumUnminified/Cesium.js"></script>
<link href="./Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
<style>
@import url(./Build/Cesium/Widgets/widgets.css);
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
Cesium.Ion.defaultAccessToken =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8";
var viewer = new Cesium.Viewer("cesiumContainer", {
// terrainProvider: Cesium.createWorldTerrain({
// requestVertexNormal: true, //添加地形光照
// requestWaterMask: true, //添加水面波浪效果
// }),
// baseLayerPicker: false, //底图选择器
// mapProjection : new Cesium.WebMercatorProjection(),
// geocoder:false,//位置查找
// homeButton:false,//视图返回初始位置
// sceneModePicker:false,//视角选择器
// navigationHelpButton:false,//导航帮助按钮
// animation:false,//动画控制器
// // creditContainer:"credit",//版权显示,指定dom对象的id,再通过id样式可以隐藏CESIUM 版本图标
// timeline:false,//时间线
// fullscreenButton:false,//全屏控件
// vrButton:false,
// infoBox:true ,
// shouldAnimate:true,
// scene3DOnly:true,//默认false，若为true,所有几何体实例将仅会在3D模式中渲染(在GPU内存中)
// terrainProvider: Cesium.createWorldTerrain({
// requestVertexNormal: true, //添加地形光照
// requestWaterMask: true, //添加水面波浪效果
// }),
});
viewer.imageryLayers.removeAll();
// 添加 Mapbox tile provider
const mapboxAccess =
"pk.eyJ1IjoicWl1c2hpamllIiwiYSI6ImNsMDNvdDRybDEyc2YzZG9kbWZoY2FuOW0ifQ.4FH-BUupi46Z0zQ-CEm_Ig";
// 样式id查看：https://docs.mapbox.com/api/maps/styles/
// URL格式的 mapbox://styles/:owner/:style， 其中 :owner 是您的 Mapbox 账户名 :style 是样式 ID 。
// 可选值：streets-v10、outdoors-v10 、light-v9、dark-v9、satellite-v9、satellite-streets-v10
const mapboxStyleImagery = new Cesium.MapboxStyleImageryProvider({
styleId: "dark-v9",
accessToken: mapboxAccess,
// proxy: new Cesium.DefaultProxy("http://127.0.0.1:8080/proxy/"),
});
viewer.imageryLayers.addImageryProvider(mapboxStyleImagery);
/**
* Cesium中的矢量数据可以分为两类：
* 1. Primitive
* 2. Entity
*
* 对于矢量数据的文件，CesiumJS提供了DataSource接口，它会将文件中的数据转换为一个 EntityCollection 实体集合
* DataSource接口的实现类有：
* - GeoJsonDataSource
* - KmlDataSource
* - CzmlDataSource
* - GpxDataSource
* - CustomDataSource
* - DataSourceCollection
*/
/**
* Primitive
* 一个 Primitive 由 geometry 实例和一个 Appearance (包含Material材料和和RenderState渲染状态)组成，代表Scene场景中的一个geometry几何对象。
* geometry实例定义了结构和位置，Appearance定义了视觉特征。
* 将多个实例组合成一个Primitive称为`batching`，可以显著提高静态数据的性能，实例也可以单独的被拾取(picked)到。
* 使用Scene场景的picked方法可以获得到geometry实例的id,也可以使用appearance的实例定义primitive的外表，如使用 PerInstanceColorAppearance为每个实例定义不同大颜色
*
* primitive配置项options:
* geometryInstances ：几何实例
* appearance ：着色器，appearance定义了完整的GLSL顶点着色器和片段着色器以及用于绘制primitive的渲染状态
* show : 是否展示
* allowPicking ：是否允许被拾取
* asynchronous ：异步
* shadows ：确定此primitive是否投射或接收来自光源的阴影。ShadowMode.DISABLED
* releaseGeometryInstances:是否清空原来的geometryInstances
*
* GeometryInstance 实例的配置项：
* geometry ：几何实例对象.
* modelMatrix ：将geometry从模型转换为世界坐标的模型矩阵
* id ：是一个用户自定义的Object对象(可以用于存储自定义属性)，当geometryInstance 被 Scene#pick 拾取到时会被返回 or get/set per-instance attributes with Primitive#getGeometryInstanceAttributes.
* attributes ：每个实例的属性，如下面示例中的显示或颜色属性。
*
* geometry 的基础配置项和类型：
* options：
* attributes :是一个GeometryAttributes类型
* primitiveType ：可选值：POINTS、LINES、LINE_LOOP、LINE_STRIP、TRIANGLES、TRIANGLE_STRIP、TRIANGLE_FAN
* indices :是一个 Uint16Array | Uint32Array 用于确定几何图形中的primitive的可选索引数据.
boundingSphere : BoundingSphere 一个可选的将几何图形完全包围的边界球
*
PolylineGeometry ：线要素
SimplePolylineGeometry : 轮廓线
PolygonGeometry ：面要素
RectangleGeometry ：矩形
EllipseGeometry ：椭圆
CircleGeometry ：圆形
WallGeometry
BoxGeometry
EllipsoidGeometry
*/
/**
* appearance
* 基础配置项options:
* translucent ：geometry 应该是半透明的，所以 Appearance#renderState启用了alpha混合
* closed ：是否关闭渲染状态
* material ：材质
* vertexShaderSource ：
* fragmentShaderSource ：
* renderState ：渲染状态
*
MaterialAppearance ：支持各种geometry类型的外观，支持使用材质来定义着色
EllipsoidSurfaceAppearance ：是MaterialAppearance的一个版本。假设几何图形与地面是平行的，并且以此来进行顶点属性的计算
PerInstanceColorAppearance ：让每个实例使用自定义的颜色着色
DebugAppearance ：
PolylineColorAppearance : 使用每顶点或者每片段的颜色来着色多线段。可以用于渲染 PolylineGeometry or GroundPolylineGeometry.
PolylineMaterialAppearance : 支持使用材质来着色多线段。PolylineGeometry支持材质渲染的类
*/
var scene = viewer.scene;
// ================================ 几何对象Geometry =================================
// 1、创建线要素，可以设置线型、颜色、宽度、拐角类型等属性。
// A polyline with two connected line segments
scene.primitives.add(new Cesium.Primitive({
geometryInstances : new Cesium.GeometryInstance({
geometry: new Cesium.BoxGeometry({
vertexFormat : Cesium.VertexFormat.ALL ,
maximum : new Cesium.Cartesian3(5000000.0, 5000000.0, 5000000.0),
minimum : new Cesium.Cartesian3(2500000.0, 2500000.0, 2500000.0)
}),
attributes : {
// 通过attributes属性统一指定线段颜色
color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 1.0, 1.0, 0.6))
},
id:"BoxGeometry"
}),
appearance : new Cesium.MaterialAppearance({
material : Cesium.Material.fromType('Color'),
faceForward : true
})
}));
viewer.camera.flyTo({
// destination: Cesium.Cartesian3.fromDegrees(112.0, 23.0,4000000),
destination: new Cesium.Cartesian3(5000000.0, 5000000.0, 5000000.0),
orientation: {
heading: Cesium.Math.toRadians(0),
pitch: Cesium.Math.toRadians(-90),
roll: Cesium.Math.toRadians(0),
},
});
// scene.primitives.add(new Cesium.Primitive({
// geometryInstances : new Cesium.GeometryInstance({
// geometry: new Cesium.PolylineGeometry({
// positions : Cesium.Cartesian3.fromDegreesArray([
// 112, 23,
// 122, 24,
// 130, 22,
// 112, 20
// ]),
// width : 10.0,
// // arcType:Cesium.ArcType.RHUMB,//ArcType. GEODESIC， NONE ， RHUMB
// colors:[Cesium.Color.RED,Cesium.Color.THISTLE,Cesium.Color.TURQUOISE],//指定线段每段的颜色，数量必须与线段数相同
// }),
// // attributes : {
// // // 通过attributes属性统一指定线段颜色
// // color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 1.0, 1.0, 0.6))
// // },
// id:"线要素"
// }),
// appearance : new Cesium.PolylineColorAppearance({
// translucent : false,
// })
// }));
// 2、轮廓线，没有宽度，设置width无效
// Appearance/Geometry mismatch!实体的顶点和材质不匹配，导致渲染出错
// 情况一：轮廓线这类不能使用光照，需要将 appearance 中的 flat 属性设置为 true
// 情况二：几何图形的vertexFormat确定它是否可以与其他几何图形组合,就是有没有选对appearance
// scene.primitives.add(new Cesium.Primitive({
// geometryInstances : new Cesium.GeometryInstance({
// geometry : new Cesium.SimplePolylineGeometry({
// positions : Cesium.Cartesian3.fromDegreesArray([
// 112, 23,
// 122, 24,
// 130, 22,
// 112, 20
// ])
// }),
// attributes : {
// color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 1.0, 1.0, 1.0))
// },
// id:"轮廓线"
// }),
// appearance: new Cesium.PerInstanceColorAppearance({
// flat: true,
// translucent: false,
// }),
// asynchronous: false,
// }))
// 3、轮廓线是各种几何体要素外围轮廓线，如：BoxOutlineGeometry
// const box = new Cesium.BoxOutlineGeometry({
// maximum : Cesium.Cartesian3.fromDegrees(122, 23,50000),
// minimum : Cesium.Cartesian3.fromDegrees(112, 20,5000)
// });
// const geometry = Cesium.BoxOutlineGeometry.createGeometry(box);
// scene.primitives.add(new Cesium.Primitive({
// geometryInstances : new Cesium.GeometryInstance({
// geometry: geometry,
// attributes : {
// // 通过attributes属性统一指定线段颜色
// color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 0, 0.0, 0.8))
// },
// id:"轮廓线"
// }),
// appearance : new Cesium.PerInstanceColorAppearance({
// flat: true,
// translucent : false
// }),
// asynchronous: false,
// }));
// 4、面要素， PolygonGeometry，CircleGeometry，
// Polygon 由多边形层次结构（hierarchy）定义。 PolygonGeometry 可以用Primitive和GroundPrimitive渲染。
// 1. create a polygon from points
// const polygon = new Cesium.PolygonGeometry({
// polygonHierarchy : new Cesium.PolygonHierarchy(
// Cesium.Cartesian3.fromDegreesArray([
// 112, 20.0,
// 115, 21.0,
// 117, 30.0,
// 115.0, 23.0,
// 114.0, 22.0
// ])
// )
// })
// // 2. create a nested polygon with holes
// // new Cesium.PolygonHierarchy(positions, holes)
// const polygonWithHole = new Cesium.PolygonGeometry({
// polygonHierarchy : new Cesium.PolygonHierarchy(
// Cesium.Cartesian3.fromDegreesArray([
// -109.0, 30.0,
// -95.0, 30.0,
// -95.0, 40.0,
// -109.0, 40.0
// ]),
// [new Cesium.PolygonHierarchy(
// Cesium.Cartesian3.fromDegreesArray([
// -107.0, 31.0,
// -107.0, 39.0,
// -97.0, 39.0,
// -97.0, 31.0
// ]),
// [new Cesium.PolygonHierarchy(
// Cesium.Cartesian3.fromDegreesArray([
// -105.0, 33.0,
// -99.0, 33.0,
// -99.0, 37.0,
// -105.0, 37.0
// ]),
// [new Cesium.PolygonHierarchy(
// Cesium.Cartesian3.fromDegreesArray([
// -103.0, 34.0,
// -101.0, 34.0,
// -101.0, 36.0,
// -103.0, 36.0
// ])
// )]
// )]
// )]
// )
// });
// const geometry = Cesium.PolygonGeometry.createGeometry(polygonWithHole);
// scene.primitives.add(new Cesium.Primitive({
// geometryInstances : new Cesium.GeometryInstance({
// // geometry: polygonWithHole,
// geometry: polygon,
// attributes : {
// // 通过attributes属性统一指定线段颜色
// color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 0, 0, 1.0))
// },
// id:"面要素"
// }),
// appearance : new Cesium.MaterialAppearance({
// material : new Cesium.Material({
// fabric : {
// type : 'Color',
// uniforms : {
// color : new Cesium.Color(1.0, 1.0, 0.0, 1.0)
// }
// }
// }),
// faceForward : true
// })
// }));
// // CircleOutlineGeometry,CircleGeometry
// scene.primitives.add(new Cesium.Primitive({
// geometryInstances : new Cesium.GeometryInstance({
// geometry: new Cesium.CircleOutlineGeometry({
// center : Cesium.Cartesian3.fromDegrees(112, 20.03883),
// radius : 100000.0
// }),
// attributes : {
// // 通过attributes属性统一指定线段颜色
// color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 0, 0, 1.0))
// },
// id:"面要素_圆"
// }),
// appearance : new Cesium.MaterialAppearance({
// material : Cesium.Material.fromType('Color'),
// faceForward : true
// })
// }));
// // CorridorGeometry,CorridorOutlineGeometry
// // 可以根据cornerType属性设置顶点类型，默认为：CornerType.ROUNDED
// scene.primitives.add(new Cesium.Primitive({
// geometryInstances : new Cesium.GeometryInstance({
// geometry: new Cesium.CorridorOutlineGeometry({
// vertexFormat : Cesium.VertexFormat.POSITION_ONLY,
// positions : Cesium.Cartesian3.fromDegreesArray([112, 20.0,113, 22.0,114,20]),
// width : 100000
// }),
// attributes : {
// // 通过attributes属性统一指定线段颜色
// color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 0, 0, 1.0))
// },
// id:"面要素_廊"
// }),
// appearance : new Cesium.MaterialAppearance({
// material : Cesium.Material.fromType('Color'),
// faceForward : true
// })
// }));
// // 椭圆 EllipseGeometry,EllipseOutlineGeometry
// scene.primitives.add(new Cesium.Primitive({
// geometryInstances : new Cesium.GeometryInstance({
// geometry: new Cesium.EllipseOutlineGeometry({
// center : Cesium.Cartesian3.fromDegrees(112, 25.03883),//中心点
// semiMajorAxis : 500000.0, // 长半轴a
// semiMinorAxis : 300000.0, // 短半轴b
// rotation : Cesium.Math.toRadians(60.0)
// }),
// attributes : {
// // 通过attributes属性统一指定线段颜色
// color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 0, 0, 1.0))
// },
// id:"面要素_椭圆"
// }),
// appearance : new Cesium.MaterialAppearance({
// material : Cesium.Material.fromType('Color'),
// faceForward : true
// })
// }));
// // 矩形 ，RectangleGeometry，RectangleOutlineGeometry
// // new Cesium.Rectangle(west, south, east, north)相当于左下角和右上角坐标
// scene.primitives.add(new Cesium.Primitive({
// geometryInstances : new Cesium.GeometryInstance({
// geometry: new Cesium.RectangleOutlineGeometry({
// ellipsoid : Cesium.Ellipsoid.WGS84,
// rectangle : Cesium.Rectangle.fromDegrees(110, 25, 120, 30.0),
// height : 10000.0, // 离椭球表面的高度
// extrudedHeight: 300000,// 挤出的高度，就形成了立方体
// }),
// attributes : {
// // 通过attributes属性统一指定线段颜色
// color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 0, 0, 1.0))
// },
// id:"面要素_矩形"
// }),
// appearance : new Cesium.MaterialAppearance({
// material : Cesium.Material.fromType('Color'),
// faceForward : true
// })
// }));
viewer.screenSpaceEventHandler.setInputAction(function (e) {
// topPrimitive包含{id,primitive}
let topPrimitive = viewer.scene.pick(e.position)
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// viewer.camera.flyTo({
// destination: Cesium.Cartesian3.fromDegrees(112.0, 23.0,4000000),
// orientation: {
// heading: Cesium.Math.toRadians(0),
// pitch: Cesium.Math.toRadians(-90),
// roll: Cesium.Math.toRadians(0),
// },
// });
</script>
</body>
</html>