1.引入
<
style
>
/* cesium */
@import
url(
build/Widgets/widgets.css);
<!-- ------------ javascript ------------ -->
<
script
src=
"build/Cesium.js"
></
script
>
html:
<
body
>
<!-- 地图载体 -->
<
div
id=
"cesiumContainer"
></
div
>
2.初始化地球
viewer =
new
Cesium.
Viewer(
'cesiumContainer', {
animation:
false,
//是否显示时间轴动画
baseLayerPicker:
false,
//是否显示图层选择
geocoder:
false,
//是否显示地址搜索框
timeline:
false,
//是否显示时间轴
navigationHelpButton:
false,
//是否显示操作提示框
infoBox:
false,
//是否显示信息框
fullscreenButton:
true,
//是否显示全屏按钮
vrButton:
false,
//是否显示vr按钮
homeButton:
true,
//是否显示home按钮
shouldAnimate:
true,
//是否显示动画效果
selectionIndicator:
false,
//是否显示选取指示器组件
scene3DOnly:
true,
//是否只显示3d模式
terrainProvider:
Cesium.
createWorldTerrain(),
// 生成地形
imageryProvider:
new
Cesium.
ArcGisMapServerImageryProvider({
// ArcGis 蓝色图层
url:
'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer',
})
});
viewer.
_cesiumWidget.
_creditContainer.
style.
display =
"none";
//去掉左下角logo
viewer.
scene.
debugShowFramesPerSecond =
true;
//显示帧数，用于调试
viewer.
scene.
globe.
enableLighting =
true;
//激活光照
viewer.
scene.
skyBox.
show =
false;
// 不显示天空
viewer.
scene.
sun.
show =
true;
// 显示太阳
viewer.
scene.
undergroundMode =
true;
//重要，开启地下模式，设置基色透明，这样就看不见黑色地球了
//viewer.scene.globe.show = false; // 隐藏地球
viewer.
scene.
fxaa =
true;
viewer.
scene.
postProcessStages.
fxaa.
enabled =
true;
//抗锯齿
//viewer.scene.screenSpaceCameraController.enableRotate = false;//禁用地球旋转
//viewer.scene.screenSpaceCameraController.enableZoom = false;//禁用地球缩放
viewer.
scene.
globe.
depthTestAgainstTerrain =
true;
//深度检测，精确坐标
viewer.
scene.
fog.
enabled =
false;
//禁用雾
3.摄像机
//相机
camera: {
cameraLongitude:
118.79272,
//相机经度
cameraLatitude:
31.98521,
//相机纬度
cameraHeight:
4000,
//相机高度
}
viewer.
camera.
setView({
destination:
Cesium.
Cartesian3.
fromDegrees(
this.
camera.
cameraLongitude,
this.
camera.
cameraLatitude,
this.
camera.
cameraHeight),
//heading、pitch和roll就是镜头相对于xyz轴的角度，比如pitch为-90°而另外两个为0时，就是90°向下俯视地球。
orientation: {
heading:
Cesium.
Math.
toRadians(
0),
pitch:
Cesium.
Math.
toRadians(-
40),
roll:
Cesium.
Math.
toRadians(
0)
}
});
4.场景更新触发的事件
//场景更新、场景渲染触发的事件
viewer.
scene.
postRender.
addEventListener(()
=> {
//摄像机距离地面的高度
let
height =
Cesium.
Cartographic.
fromCartesian(
e).
height; }）
5.运行
JPG