421 lines
18 KiB
HTML
421 lines
18 KiB
HTML
<!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>
|