加载OSM

以下是官方示例,但增加了丰富的注释

// 创建一个Cesium.Viewer对象,用于在网页中显示3D地球仪和地图
// cesiumContainer是HTML元素的ID,用于容纳地球仪
// terrainProvider是一个选项,用于指定地形数据源,默认为Cesium.createWorldTerrain()
const viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: Cesium.createWorldTerrain(),
});

// 使用viewer对象的scene属性的primitives属性的add方法添加一个3D图元(Primitive)对象
// 使用Cesium.createOsmBuildings方法创建一个基于OpenStreetMap数据的全球3D建筑物图层(Cesium OSM Buildings)
// 这个图层包含了超过3.5亿栋建筑物,并使用3D Tiles技术进行高效的网络传输和可视化
viewer.scene.primitives.add(Cesium.createOsmBuildings());

// 使用viewer对象的scene属性的camera属性的flyTo方法让相机飞到指定位置和方向
// destination参数指定目标位置,使用Cesium.Cartesian3.fromDegrees方法根据经纬度坐标和高度创建笛卡尔坐标(Cartesian3)对象
// orientation参数指定目标方向,包括heading(偏航角)和pitch(俯仰角),使用Cesium.Math.toRadians方法将角度转换为弧度
viewer.scene.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(-74.019, 40.6912, 750),
orientation: {
heading: Cesium.Math.toRadians(20),
pitch: Cesium.Math.toRadians(-20),
},
});

 

widget

Cesium.CesiumWidget类似于Cesium.Viewer,但被精简了。它只是3D地球仪的一个小部件;它不包括动画、图像选择和其他小部件,也不依赖于第三方Knockout librar

// Cesium.CesiumWidget is similar to Cesium.Viewer, but
// is trimmed down.  It is just a widget for the 3D globe;
// it does not include the animation, imagery selection,
// and other widgets, nor does it depend on the third-party
// Knockout library.
const widget = new Cesium.CesiumWidget("cesiumContainer");