前端使用cesium加载地球

前端使用cesium加载地球

首先需要安装cesium

npm i cesium -save

需要在node_modules中找到cesium然后把Build下面中的Cesium文件拷到项目中public下面

在项目中引入cesium

window.CESIUM_BASE_URL = '../Cesium';
import * as Cesium from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'

书写dom

<template>
  <div id="container" class="box">
    <div id="cesiumContainer"></div>
  </div>
</template>

加载cesium

init () {
      const viewer = new Cesium.Viewer('cesiumContainer',{
        shouldAnimate: false,
        animation: false, // 是否创建动画小器件，左下角仪表
        baseLayerPicker: false, // 是否显示图层选择器
        fullscreenButton: false, // 是否显示全屏按钮
        geocoder: false, // 是否显示geocoder小器件，右上角查询按钮
        homeButton: false, // 是否显示Home按钮
        infoBox: false, // 是否显示信息框
        sceneModePicker: true, // 是否显示3D/2D选择器
        selectionIndicator: false, // 是否显示选取指示器组件
        timeline: false, // 是否显示时间轴
        navigationHelpButton: false, // 是否显示右上角的帮助按钮
        scene3DOnly: false, // 如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
        clock: new Cesium.Clock(), // 用于控制当前时间的时钟对象
        selectedImageryProviderViewModel: undefined, // 当前图像图层的显示模型，仅baseLayerPicker设为true有意义
        imageryProviderViewModels:
          Cesium.createDefaultImageryProviderViewModels(), // 可供BaseLayerPicker选择的图像图层ProviderViewModel数组
        selectedTerrainProviderViewModel: undefined, // 当前地形图层的显示模型，仅baseLayerPicker设为true有意义
        terrainProviderViewModels:
          Cesium.createDefaultTerrainProviderViewModels(), // 可供BaseLayerPicker选择的地形图层ProviderViewModel数组
        imageryProvider: new Cesium.UrlTemplateImageryProvider({
          url:
            "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"
        }),
        terrainProvider: Cesium.createWorldTerrain(),
        fullscreenElement: document.body, // 全屏时渲染的HTML元素,
        useDefaultRenderLoop: true, // 如果需要控制渲染循环，则设为true
        targetFrameRate: undefined, // 使用默认render loop时的帧率
        showRenderLoopErrors: false, // 如果设为true，将在一个HTML面板中显示错误信息
        automaticallyTrackDataSourceClocks: true, // 自动追踪最近添加的数据源的时钟设置
        contextOptions: undefined, // 传递给Scene对象的上下文参数（scene.options）
        sceneMode: Cesium.SceneMode.SCENE3D, // 初始场景模式为三维
        mapProjection: new Cesium.WebMercatorProjection(), // 地图投影体系
        dataSources: new Cesium.DataSourceCollection()
        // 需要进行可视化的数据源的集合
      });
      viewer.scene.globe.depthTestAgainstTerrain = false; //开启地形深度检测 解决鼠标指针和点不重合
      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
        Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
      );
      ;
      viewer._cesiumWidget._creditContainer.style.display = "none";// 隐藏版权
    }

最后页面中展示的效果如下