搭建好cesium环境之后
在项目中找到helloworld.html页面
这里面只有var viewer = new Cesium.Viewer(‘cesiumContainer’);这一段代码
我们可以对其进行设置
具体可以参考官方的API
我这里就直接使用zlx312博客中的这一部分说明
var viewer = new Cesium.Viewer( 'cesiumContainer', {
animation : false,//是否创建动画小器件,左下角仪表
baseLayerPicker : false,//是否显示图层选择器
fullscreenButton : false,//是否显示全屏按钮
geocoder : false,//是否显示geocoder小器件,右上角查询按钮
homeButton : false,//是否显示Home按钮
infoBox : false,//是否显示信息框
sceneModePicker : false,//是否显示3D/2D选择器
selectionIndicator : false,//是否显示选取指示器组件
timeline : false,//是否显示时间轴
navigationHelpButton : false,//是否显示右上角的帮助按钮
scene3DOnly : true,//如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源
clock : new Cesium.Clock(),//用于控制当前时间的时钟对象
selectedImageryProviderViewModel : undefined,//当前图像图层的显示模型,仅baseLayerPicker设为true有意义
imageryProviderViewModels : Cesium.createDefaultImageryProviderViewModels(),//可供BaseLayerPicker选择的图像图层ProviderViewModel数组
selectedTerrainProviderViewModel : undefined,//当前地形图层的显示模型,仅baseLayerPicker设为true有意义
terrainProviderViewModels : Cesium.createDefaultTerrainProviderViewModels(),//可供BaseLayerPicker选择的地形图层ProviderViewModel数组
imageryProvider : new Cesium.OpenStreetMapImageryProvider( {
credit :'',
url : '//192.168.0.89:5539/planet-satellite/'
} ),//图像图层提供者,仅baseLayerPicker设为false有意义
terrainProvider : new Cesium.EllipsoidTerrainProvider(),//地形图层提供者,仅baseLayerPicker设为false有意义
skyBox : new Cesium.SkyBox({
sources : {
positiveX : 'Cesium-1.7.1/Skybox/px.jpg',
negativeX : 'Cesium-1.7.1/Skybox/mx.jpg',
positiveY : 'Cesium-1.7.1/Skybox/py.jpg',
negativeY : 'Cesium-1.7.1/Skybox/my.jpg',
positiveZ : 'Cesium-1.7.1/Skybox/pz.jpg',
negativeZ : 'Cesium-1.7.1/Skybox/mz.jpg'
}
}),//用于渲染星空的SkyBox对象
fullscreenElement : document.body,//全屏时渲染的HTML元素,
useDefaultRenderLoop : true,//如果需要控制渲染循环,则设为true
targetFrameRate : undefined,//使用默认render loop时的帧率
showRenderLoopErrors : false,//如果设为true,将在一个HTML面板中显示错误信息
automaticallyTrackDataSourceClocks : true,//自动追踪最近添加的数据源的时钟设置
contextOptions : undefined,//传递给Scene对象的上下文参数(scene.options)
sceneMode : Cesium.SceneMode.SCENE3D,//初始场景模式
mapProjection : new Cesium.WebMercatorProjection(),//地图投影体系
dataSources : new Cesium.DataSourceCollection()
//需要进行可视化的数据源的集合
} );
cesium中提供了三种设置View的方式 :setView,flyto,lookAt
我们这里使用的是setView 其他的两种可以查看下方链接,里面有详细教程
http://cesium.xin/wordpress/archives/261.html
下面是设置初始化的视图的位置,镜头以及视角
(116.427674,39.977968)为经纬度也就是位置,
获取地方经纬度可以在http://api.map.baidu.com/lbsapi/getpoint/index.html
中点击自己想要选择的位置就可以看到经纬度
10000代表的是高度为一万公里
-90为倾斜角度
下面的heading、pitch和roll就是镜头相对于xyz轴的角度
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(111.07, 39.05, 10000),
orientation: {
heading : Cesium.Math.toRadians(0),
pitch : Cesium.Math.toRadians(-90),
roll : Cesium.Math.toRadians(0)
}
});
这样就可以运行测试。
但在运行之后打开helloworld页面发现是空白
于是在借鉴zlx312博客中的那一部分中找到如下代码
imageryProvider : new Cesium.OpenStreetMapImageryProvider( {
credit :'',
url : '//192.168.0.89:5539/planet-satellite/'
} ),
将其修改为以下几种中的一种就可以了
1、加载arcgis数据——ArcGisMapServerImageryProvider
var viewer = new Cesium.Viewer("cesiumDiv",{
imageryProvider:new Cesium.ArcGisMapServerImageryProvider({
url:'http://atlasmaps.esri.com/arcgis/rest/services/Esri/USA_Population_Density/MapServer',
enablePickFeatures:false
}),
baseLayerPicker:false //这句不加可能会出错
});
2、加载OSM数据——createOpenStreetMapImageryProvider
var viewer = new Cesium.Viewer("cesiumDiv",{
imageryProvider:new Cesium.createOpenStreetMapImageryProvider({
url:'https://a.tile.openstreetmap.org/'
}),
baseLayerPicker:false
});
3、加载MapBox数据——MapboxImageryProvider
var viewer = new Cesium.Viewer("cesiumDiv",{
imageryProvider:new Cesium.MapboxImageryProvider({
mapId:'mapbox.satellite'
}),
baseLayerPicker:false
});
4、加载离线的影像服务——SingleTileImageryProvider
在Provider上多做一些文章,比如搞一张透明的图片,达到一些虚幻的效果,
或者在近地面实现一种类似平面的浏览效果,毕竟2D和3D在相机,数据单位上是有区别的。
比如隐藏地球主体后,叠加一些矢量面,突出主题.
var viewer = new Cesium.Viewer("cesiumDiv",{
skyBox:false,
skyAtmosphere:false,
baseLayerPicker:false,
imageryProvider:new Cesium.SingleTileImageryProvider({
url:'globe.jpg'
}),
contextOptions:{
webgl:{
alpha:true
}
}
});
最后效果如下