二、Cesium加载影像,地形、设置视角
程序员文章站
2024-01-01 14:30:28
...
一、影像
1、启动api服务,在下载的Cesium解压根目录下的/Build/Documentation下执行
hs -p 8082
然后访问http://192.168.1.155:8082/index
2、搜索viewer,可以看到创建viewer的函数new Cesium.Viewer(container, options),上一节使用第一个参数,第二个参数是影响显示配置,其中baseLayerPicker默认是true,改为false将不显示页面图标,如下图标,代码
<script type="text/javascript">
var viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false
})
</script>
3、替换影像,百度搜索"Cesium加载谷歌影像",查询进行替换代码如下
var guge=new Cesium.UrlTemplateImageryProvider({
url:'http://www.google.cn/maps/aaa@qq.com&x={x}&y={y}&z={z}',
tilingScheme:new Cesium.WebMercatorTilingScheme(),
minimumLevel:1,
maximumLevel:20
});
var viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false,
imageryProvider: guge
})
效果如下
二、地形,参数TerrainProvider
之前默认为平面
修改后默认为地形起伏的3D影像,代码
var guge=new Cesium.UrlTemplateImageryProvider({
url:'http://www.google.cn/maps/aaa@qq.com&x={x}&y={y}&z={z}',
tilingScheme:new Cesium.WebMercatorTilingScheme(),
minimumLevel:1,
maximumLevel:20
});
var viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false,
imageryProvider: guge,
terrainProvider : new Cesium.CesiumTerrainProvider({
url : Cesium.IonResource.fromAssetId(3956),
requestVertexNormals : true
})
})
三、设置视角
在viewer中搜索camara,点击进入,主要是setView(options)设置视角,和flyTo(options)飞行路径,代码
var guge=new Cesium.UrlTemplateImageryProvider({
url:'http://www.google.cn/maps/aaa@qq.com&x={x}&y={y}&z={z}',
tilingScheme:new Cesium.WebMercatorTilingScheme(),
minimumLevel:1,
maximumLevel:20
});
var viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false,
imageryProvider: guge,
terrainProvider : new Cesium.CesiumTerrainProvider({
url : Cesium.IonResource.fromAssetId(3956),
requestVertexNormals : true
})
})
viewer.camera.setView({
destination : Cesium.Cartesian3.fromDegrees(116.39, 39.9, 1000.0), // (北京)坐标和高度(米)
orientation: {
heading : Cesium.Math.toRadians(90.0), // east, default value is 0.0 (north) // 北为0度,90指的是向正东方
pitch : Cesium.Math.toRadians(-90), // default value (looking down) // 平视为0度,-90指的是俯视
roll : 0.0 // default value
}
})
访问后将默认定位到北京上空,而并非是一个地球
使用地图调好的角度查看当前的参数值进行配置,调好角度、位置,打开F12控制台,打印出参数
viewer.camera.heading
viewer.camera.pitch
viewer.camera.position
代码如下
var guge=new Cesium.UrlTemplateImageryProvider({
url:'http://www.google.cn/maps/aaa@qq.com&x={x}&y={y}&z={z}',
tilingScheme:new Cesium.WebMercatorTilingScheme(),
minimumLevel:1,
maximumLevel:20
});
var viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false,
imageryProvider: guge,
terrainProvider : new Cesium.CesiumTerrainProvider({
url : Cesium.IonResource.fromAssetId(3956),
requestVertexNormals : true
})
})
viewer.camera.setView({
destination : new Cesium.Cartesian3(-1714536.7602386745, 4996614.145192477, 3566237.3590922765),
orientation: {
heading : 6.236132643031626,
pitch : -0.5318641536528257,
roll : 0.0
}
})
推荐阅读