Vue+Cesium 引入及初始化设置

1.Vue引入需要注意

npm install --save cesium

// 引入

import 'cesium/Build/Cesium/Widgets/widgets.css'
import * as Cesium from 'cesium'

2.初始化参数配置

let viewerOption = {
        animation: false, // 控制场景动画的播放速度控件
        baseLayerPicker: false, // 底图切换控件
        fullscreenButton: false, // 全屏控件
        geocoder: false, // 地理位置查询定位控件
        homeButton: false, // 默认相机位置控件
        timeline: false, // 时间滚动条控件
        infoBox: false,           //是否显示信息框
        sceneModePicker: false, //是否显示3D/2D选择器
        selectionIndicator: false, // 点击点绿色弹出 是否显示选取指示器组件
        sceneMode: Cesium.SceneMode.SCENE3D, //设定3维地图的默认场景模式:Cesium.SceneMode.SCENE2D、Cesium.SceneMode.SCENE3D、Cesium.SceneMode.MORPHING
        navigationHelpButton: false, // 默认的相机控制提示控件
        scene3DOnly: true, // 每个几何实例仅以3D渲染以节省GPU内存
        navigationInstructionsInitiallyVisible: false,
        showRenderLoopErrors: false, //是否显示渲染错误
        orderIndependentTranslucency:false//设置背景透明
      };
var viewer = new Cesium.Viewer('cesiumContainer',viewerOption)

3.去除版权信息

viewer._cesiumWidget._creditContainer.style.display = "none";// 隐藏 LOGO 版权

4.底图加载

    var imageryLayers = viewer.imageryLayers;

    //加载ArcGIS 深蓝色地图
    var arcGISMap = new Cesium.ArcGisMapServerImageryProvider({
        url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'        
     })
    imageryLayers.addImageryProvider(arcGISMap)
    
    //加载google影像地图
    var googleMap = new Cesium.UrlTemplateImageryProvider({
        url: 'http://www.google.cn/maps/vt?lyrs=s@716&x={x}&y={y}&z={z}'        
    })

    imageryLayers.addImageryProvider(googleMap)

5.相机飞行

//飞行
    viewer.camera.flyTo({
			destination: Cesium.Cartesian3.fromDegrees(114.296063,30.55245, 3500000), //相机在WGS84世界坐标系中的最终位置，或是自顶向下视图中可见的矩形区域。
			orientation: { 
      //包含了方位(direction)、上方向(up)以及方位角(heading)、俯仰角(pitch)、滚动角(roll)属性的对象。
				heading: Cesium.Math.toRadians(0),
				pitch: Cesium.Math.toRadians(-90),
				roll: 0.0
			},
			duration: 5 //飞行持续时间（以秒为单位）
    })