1、vue脚手架环境搭建成功后,执行npm install cesium和npm install --save cesium,执行成功后node_modules下会有cesium文件夹。

2、Cesium1.6及以上版本 cesium不支持import的方式引入 ,改用require引入(在自己定义的cesium组件中)。

var Cesium = require('../../node_modules/cesium/Source/Cesium');

import "../../node_modules/cesium/Source/Widgets/widgets.css";

import buildModuleUrl from "../../node_modules/cesium/Source/Core/buildModuleUrl";

3、初始化cesium三维球

export default {

  name: "cesiumPage",

  data() {

    return {};

  },

  mounted() {

    //加载在线地形图数据

    var viewer = new Cesium.Viewer("cesiumContainer", {

      shouldAnimate: true,

      animation: false, // 是否创建动画小器件,左下角仪表

      baseLayerPicker: false, // 是否显示图层选择器

      fullscreenButton: false, // 是否显示全屏按钮

      geocoder: false, // 是否显示geocoder小器件,右上角查询按钮

      homeButton: false, // 是否显示Home按钮

      infoBox: false, // 是否显示信息框

      sceneModePicker: false, // 是否显示3D/2D选择器

      selectionIndicator: true, // 是否显示选取指示器组件  鼠标绿色框

      timeline: false, // 是否显示时间轴

      navigationHelpButton: false, // 是否显示右上角的帮助按钮

      vrButton: false,//是否显示双屏

      infoBox: false,//是否显示点击要素之后的显示信息

      scene3DOnly: true, //如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源

      fullscreenElement: document.body, //全屏时渲染的HTML元素

        });

    viewer._cesiumWidget._creditContainer.style.display = "none"//取消版权信息

    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);

    //飞行

    viewer.camera.flyTo({

      destination: Cesium.Cartesian3.fromDegrees(114.296063, 30.55245, 3000), 

      orientation: {

        //包含了方位(direction)、上方向(up)以及方位角(heading)、俯仰角(pitch)、滚动角(roll)属性的对象。

        heading: Cesium.Math.toRadians(0),

        pitch: Cesium.Math.toRadians(-90),

        roll: 0.0

      },

      duration: 3 //飞行持续时间(以秒为单位)

    })

  }

};

4、显示效果

Logo

前往低代码交流专区

更多推荐