场景容器

vc-viewer 是用于构建 Cesium 应用程序的基础组件，场景容器的实质是通过 Cesium.Viewer 初始化的一个 DOM 节点，用于挂载其他 DOM 节点或者组件。默认影像底图改为用NaturalEarthII影像了，如果需要二次开发或者手动控制其子组件，可以在 ready 事件中使用返回的 Cesium 和 Viewer 实例进行手动控制。在2.0.1+版本中可以通过ref来获取组件的createPromise对象来执行相关操作。

示例

用 vc-viewer 组件初始化 Viewer 实例

预览

动画部件

时间轴部件

基础图层拾取器

全屏按钮

信息提示框

收起

  <template>
    <div class="viewer" ref="viewerContainer">
      <vc-viewer ref="vcViewer" :animation="animation" :baseLayerPicker="baseLayerPicker" :timeline="timeline"
        :fullscreenButton="fullscreenButton" :fullscreenElement="fullscreenElement" :infoBox="infoBox" @ready="ready">
        <vc-navigation></vc-navigation>
        <vc-layer-imagery>
          <vc-provider-imagery-tianditu
            mapStyle="img_c"
            :token="tk"
          ></vc-provider-imagery-tianditu>
        </vc-layer-imagery>
        <vc-layer-imagery ref="layerText">
          <vc-provider-imagery-tianditu mapStyle="cia_c" :token="tk"></vc-provider-imagery-tianditu>
        </vc-layer-imagery>
      </vc-viewer>
      <div class="demo-tool auto-width">
        <span>动画部件 <el-switch v-model="animation"></el-switch></span>
        <span>时间轴部件
        <el-switch v-model="timeline"></el-switch></span>
        <span>基础图层拾取器
        <el-switch v-model="baseLayerPicker"></el-switch></span>
        <span>全屏按钮
        <el-switch v-model="fullscreenButton"></el-switch></span>
        <span>信息提示框
        <el-switch v-model="infoBox"></el-switch></span>
      </div>
    </div>
  </template>

  <script>
    export default {
      data () {
        return {
          animation: true,
          timeline: true,
          baseLayerPicker: false,
          fullscreenButton: true,
          infoBox: true,
          fullscreenElement: null,
          tk: '436ce7e50d27eede2f2929307e6b33c0'
        }
      },
      mounted () {
        this.$refs.vcViewer.createPromise.then(({Cesium, viewer})=> {
          console.log('viewer is loaded.')
        })
      },
      methods: {
        ready (cesiumInstance) {
          const {Cesium, viewer} = cesiumInstance
          viewer.scene.globe.depthTestAgainstTerrain = true
          viewer.scene.globe.enableLighting = true
          this.fullscreenElement = this.$refs.viewerContainer
          var entity=viewer.entities.add({
            id: 'Hello GisEye',
            position: Cesium.Cartesian3.fromDegrees(104.06, 30.67,100),
            billboard: new Cesium.BillboardGraphics({
              image: '/statics/favicon.png',
              scale: 0.1,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM
            }),
            label: new Cesium.LabelGraphics ({
              text: 'Hello GisEye',
              font: '24px sans-serif',
              horizontalOrigin: 1,
              outlineColor: new Cesium.Color(0, 0, 0, 1),
              outlineWidth: 2,
              pixelOffset: new Cesium.Cartesian2(17, -5),
              style: Cesium.LabelStyle.FILL
            })
          })
          GisEye.Location.LocationTo(Cesium.Cartesian3.fromDegrees(104.06, 30.67),{
            viewer:viewer,
            offset:new Cesium.HeadingPitchRange(0,Cesium.Math.toRadians(-45),  20000),
            lookAt:false,
            // cameraoffset:new Cesium.Cartesian2(-500,-200)
          })
        //  var converter= new GisEye.JsonConverter({
        //     json:"./statics/SampleData/lineData/streamline.json"
        //   });
        //   let source= converter.getDataSource('xxx',function(fe){
        //     return 1==1
        //   },{
        //     polyline:{
        //       width:5,
        //       material:Cesium.Color.RED
        //     },
        //     height:10,
        //     usePerPositionHeight:true
        //   })
        //   if(source){
        //     viewer.dataSources.add(source)
        //     viewer.flyTo(source);
        //   }
        }
      }
    }
  </script>

属性

属性名	类型	默认值	描述
animation	Boolean	false	optional是否显示动画控件
baseLayerPicker	Boolean	false	optional是否显示基础图层切换按钮
fullscreenButton	Boolean	false	optional是否显示全屏切换按钮
vrButton	Boolean	false	optional是否显示 VR 功能按钮
geocoder	Boolean	false	optional是否显示地理编码器搜索框
homeButton	Boolean	false	optional是否显示主页按钮
infoBox	Boolean	true	optional是否显示信息框
sceneModePicker	Boolean	false	optional是否显示场景模式切换按钮
selectionIndicator	Boolean	true	optional是否显示选择指示符
timeline	Boolean	false	optional是否显示时间轴控件
navigationHelpButton	Boolean	false	optional是否显示导航帮助按钮
navigationInstructionsInitiallyVisible	Boolean	false	optional是展开导航帮助面板，否点击navigationHelpButton才能展开面板。
scene3DOnly	Boolean	false	optional如果为true，则每个几何实例仅以3D形式呈现以节省GPU内存。
shouldAnimate	Boolean	false	optionaltrue if the clock should attempt to advance simulation time by default, false otherwise.
fullscreenElement	Element | String	document.body	optional按下全屏按钮时要放入全屏模式的元素或ID。
useDefaultRenderLoop	Boolean	true	optional如果此部件能够控制渲染循环，设置为true，反之设置为false。
targetFrameRate	Number		optional使用默认渲染循环时的目标帧速率。
showRenderLoopErrors	Boolean	true	optional如果设置为true，发生渲染循环错误时，将自动给用户显示一个包含错误信息的HTML面板。
automaticallyTrackDataSourceClocks	Boolean	true	optional如果设置为true，将自动跟踪新添加数据源的时钟设置，如果数据源的时钟变更，则更新。如需单独设置时钟，请将此项设置为false。
contextOptions	Object		optionalContext and WebGL 创建属性与传递给Scene匹配的选项。
orderIndependentTranslucency	Boolean	true	optional如果此项设置为true，并且使用设备支持，将使用与顺序无关的半透明。
creditContainer	Element | String		optional指定包含CreditDisplay信息的DOM元素或ID。如若未指定，credit信息将添加到部件底部。
creditViewport	Element | String		optional指定包含CreditDisplay弹出框信息的DOM元素或ID。如若未指定，credit信息将添加到部件底部。
terrainExaggeration	Number	1.0	optional用于夸大地形的标量。请注意，设置地形夸张不会修改其它任何数据。
shadows	Boolean	false	optional确定阴影是否由太阳投射形成。
terrainShadows	Number	3	optional确定地形是否投射或接受来自太阳的阴影。
mapMode2D	Number	1	optional确定二维地图是可旋转的或是可以在在水平方向上无限滚动。
projectionPicker	Boolean	false	optional是否显示投影切换按钮
logo	Boolean	true	optional 是否显示默认logo.
accessToken	String		optional指定accessToken，使用Cesium ion的数据源需要到https://cesium.com/ion/ (opens new window)申请一个账户，获取Access Token。
camera	Object		optional 场景相机位置.默认定位到全球范围内的中国。 结构：{ position: { lng: number, lat: number, height: number }, heading: number, pitch: number, roll: number }
TZcode	String	UTM	optional 时区代码。
UTCoffset	String	-(new Date().getTimezoneOffset())	optional UTC时间的时差（分钟）。
removeCesiumScript	Boolean	true	optional vc-viewer销毁时是否移除CesiumJS标签.

---

方法

方法名	参数	描述
flyToLocation	options	定位到视角
getView		获取当前视角
reload		重新加载组件
unload		卸载组件

---

事件

事件名	参数	描述	来源
ready	{Cesium, viewer, cesiumObject}	该组件渲染完毕时触发，返回 Cesium 类, viewer 实例，以及当前组件的 cesiumObject。
selectedEntityChanged	entity	场景选中实体发生改变时触发此事件。事件参数表示选中的实体，或者undefined（未选中）	Viewer
trackedEntityChanged	entity	场景跟踪实体发生改变时触发此事件。事件参数表示跟踪的实体。	Viewer
layerAdded	imageryLayer, index	场景添加某影像图层后触发该事件。事件参数表示改图层和它的索引。	Viewer.imageryLayers
layerMoved	imageryLayer, newIndex, oldIndex	场景某影像图层发生移动后触发该事件。事件参数表示该图层和它以前的索引以及新索引。	Viewer.imageryLayers
layerRemoved	imageryLayer, index	场景移除某影像图层后触发该事件。事件参数表示该图层和它的索引。	Viewer.imageryLayers
layerShownOrHidden	imageryLayer, index, flag	场景中某图层可见性设置ImageryLayer#show发生改变时触发该事件。事件参数表示发生改变的图层，图层索引，以及图层是否可见。	iewer.imageryLayers
dataSourceAdded	dataSource	场景添加某数据源后触发该事件。事件参数表示该数据源。	Viewer.dataSources
dataSourceMoved	dataSource	场景移动某数据源后发生后触发该事件。事件参数表示该数据源和它以前的索引以及新索引。	Viewer.dataSources
dataSourceRemoved	dataSource	场景移除某数据源后触发该事件。事件参数表示该数据源。	Viewer.entities
collectionChanged	collection, added, removed, changed	场景实体集合添加、移除或者改变实体后触发该事件。事件参数表示该实体集合，以及添加的实体数组、移除的实体数组、改变的实体数组。	Viewer.entities
morphComplete	object	场景投影转换完成后触发该事件。事件参数是一个包含scene的对象。	Viewer.scene
morphStart	object	场景投影转换开始时触发该事件。事件参数是一个包含scene的对象。	Viewer.scene
postRender	scene, currentTime	场景每帧渲染结束后触发该事件。事件参数是scene实例和当前时间。	Viewer.scene
preRender	scene, currentTime	场景刷新后但在每帧渲染开始时触发该事件。事件参数是scene实例和当前时间。	Viewer.scene
postUpdate	scene, currentTime	场景刷新后但在每帧渲染前触发该事件。事件参数是scene实例和当前时间。	Viewer.scene
preUpdate	scene, currentTime	场景刷新或者渲染前触发该事件。事件参数是scene实例和当前时间。	Viewer.scene
renderError	scene, error	场景抛出渲染异常时触发该事件。事件参数是scene实例和异常。	Viewer.scene
terrainProviderChanged		场景地形提供者发生改变时触发该事件。	Viewer.scene
changed	number	场景相机按percentageChanged设定比例改变后触发该事件。	Viewer.camera
moveEnd		场景相机停止移动后触发该事件。	Viewer.camera
moveStart		场景相机开始移动时触发该事件。	Viewer.camera
onStop		场景时钟每当到达停止时间时触发该事件。	Viewer.clock
onTick		场景时钟每当调用Clock#tick触发该事件。	Viewer.clock
errorEvent		场景地形提供者遇到异步错误时触发该事件。	Viewer.terrainProvider
cameraClicked		infoBox弹窗上点击相机事件。	Viewer.infoBox.viewModel
closeClicked		infoBox弹窗关闭事件。	Viewer.infoBox.viewModel
LEFT_CLICK	{position: point}	鼠标左键单击事件。	ScreenSpaceEventType
LEFT_DOUBLE_CLICK	{position: point}	鼠标左键双击事件。	ScreenSpaceEventType
LEFT_DOWN	{position: point}	鼠标左键按下事件。	ScreenSpaceEventType
LEFT_UP	{position: point}	鼠标左键弹起事件	ScreenSpaceEventType
MIDDLE_CLICK	{position: point}	鼠标中键单击事件。	ScreenSpaceEventType
MIDDLE_DOWN	{position: point}	鼠标中键按下事件。	ScreenSpaceEventType
MIDDLE_UP	{position: point}	鼠标中键弹起事件。	ScreenSpaceEventType
MOUSE_MOVE	{startPosition: point, endPosition: point}	鼠标移动事件。	ScreenSpaceEventType
PINCH_END		触摸设备双指操作结束事件。	ScreenSpaceEventType
PINCH_MOVE	{distance: {startPosition: point, endPosition: point}, angleAndHeight: {startPosition: point, endPosition: point}}	触摸设备双指操作移动事件。	ScreenSpaceEventType
PINCH_START	{position1: point, position2: point}	触摸设备双指操作开始事件。	ScreenSpaceEventType
RIGHT_CLICK	{position: point}	鼠标右键单击事件。	ScreenSpaceEventType
RIGHT_DOWN	{position: point}	鼠标右键按下事件。	ScreenSpaceEventType
RIGHT_UP	{position: point}	鼠标弹起事件。	ScreenSpaceEventType
WHEEL	delta	鼠标中轮滚动事件。	ScreenSpaceEventType

---

• 参考官方文档： Viewer (opens new window)