Cesium之Viewer

Viewer用于构建应用程序的基本构件。它将所有标准Cesium小部件合成为一个可重用的包。

new Cesium.Viewer(container, options)
参数 类型 说明
container Element|String 用于包含viewer组件的DOM对象或者容器ID
options Object 选项 
var viewer = new Cesium.Viewer('cesiumContainer', {
    //Start in Columbus Viewer
    sceneMode : Cesium.SceneMode.SCENE3D, //COLUMBUS_VIEW|MORPHING|SCENE2D|SCENE3D
    animation:true, 
    baseLayerPicker:true,
    fullscreenButton:true,
    geocoder:true,
    homeButton:true,
    infoBox:true,
    selectionIndicator:true,
    timeline:true,
    vrButton:true,
});

成员

Scene ：new Cesium.Scene(options)

虚拟场景中所有3D 图形对象和状态的容器。

var scene = viewer.scene;

var scene = new Cesium.Scene({
  canvas : canvas,
  contextOptions : {
    allowTextureFilterAnisotropic : false
}});

Camera：new Cesium.Camera(scene)

方法

flyto

flyTo(target, options) → Promise.<Boolean>

飞向提供的实体、实体或数据源。如果数据源仍在加载过程中, 或者可视化仍在加载, 则此方法等待数据在执行该飞行之前准备就绪。

参数 选项
target Entity | Array. | EntityCollection | DataSource | ImageryLayer | Cesium3DTileset | Promise.<(Entity|Array.|EntityCollection|DataSource|ImageryLayer|Cesium3DTileset)>
options Object

zoomTo

zoomTo(target, offset) → Promise.<Boolean>
参数 选项
target Entity | Array. | EntityCollection | DataSource | ImageryLayer | Cesium3DTileset | Promise.<(Entity|Array.|EntityCollection|DataSource|ImageryLayer|Cesium3DTileset)>
offset HeadingPitchRange 
var viewer = new Cesium.Viewer('cesiumContainer');

var park = viewer.entities.add({
    name : '故宫',
    position : Cesium.Cartesian3.fromDegrees(116.3907222800, 39.9122117400),
    point : {
        pixelSize : 5,
        color : Cesium.Color.RED,
        outlineColor : Cesium.Color.WHITE,
        outlineWidth : 2
    },
    label : {
        text : '故宫',
        font : '14pt monospace',
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        outlineWidth : 2,
        verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
        pixelOffset : new Cesium.Cartesian2(0, -9)
    }
});
viewer.zoomTo(park);

运行上面代码，效果如下：

增加下面的代码：

park.description = '\
<img\
  width="50%"\
  style="float:left; margin: 0 1em 1em 0;"\
  src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529492753687&di=35d9d1a8f2834c7457353091a80dd969&imgtype=0&src=http%3A%2F%2Fpic23.photophoto.cn%2F20120419%2F0033033921468983_b.jpg"/>\
<p>\
  北京是中国的首都.\
</p>\
<p>\
  链接: \
  <a style="color: WHITE"\
    target="_blank"\
    href="http://www.baidu.com">百度</a>\
</p>';

双击故宫会弹出简介层：