vue项目引入cesium,创建3d地球,快速上手~

vue项目中简单快速引入cesium,创建3d地球,简单封装自己的cesium

白云苍狗い

4416人浏览 · 2023-05-23 15:34:23

白云苍狗い · 2023-05-23 15:34:23 发布

最近开发的可视化项目中用到cesium库,准备把自己从中学习的功能,全部记录下来,完整项目demo预览地址:点击预览完整项目

引入ceium

网上有很多种引入,在此只介绍一种最简单的,也是本项目中使用的.
首先要先有一个cesium的库,这里我建议直接npm下载,自己也可以从github下载

npm install cesium@1.8

因为不同版本可能有所出入,本系列都将采用1.82版本,之后在项目node_modules文件下找到我们下载好的依赖.

之后我们找到cesium>build下的文件,框起来的文件就是我们需要的,第一个是经过编译压缩的,第二个是完整未压缩的,我建议两个都拷贝走.开发的时候引入第一个,如果出现报错会有报错的详细,而压缩的则没有,生产的时候换成压缩的,体积小.之后复制到项目的public文件下

然后在项目piblic下index.html引入该文件(以引入完整的为例)

      <!-- cesium导入 -->
      <script src="./Cesium2/Cesium.js"></script>
      <!-- cesium样式文件 -->
      <link rel="stylesheet" href="./Cesium2/Widgets/widgets.css" />

初始化地球

初始化准备工作,先准备一个标签

<template>
  <div>
    <div id="cesium-container"></div>
  </div>
</template>

注意这个标签要设置宽高,不然你看不见东西.

  mounted() {
    this.init()
  },
  methods: {
    // 初始化
    init() {
      //要提前准备一个token(这个没有也没关系,后面我们不用这个)
      //Cesium 官网注册的key https://ion.cesium.com/signin
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNDZkMmIwZS01ZTFmLTRlYTEtOGRjNy05M2I0MzU4OTlhZTMiLCJpZCI6MTMzNDUwLCJpYXQiOjE2ODEzNTM3OTN9.6fKSEcApT4KcZE-iTJp4HrNKjTlc3mgDYZuF79cL0Ig'
      //如果没有上面的那个token,你生成的界面没有地球是正常的
      //第一个参数是标签的id,第二个参数是相关配置,我们先不写
      new Cesium.Viewer('cesium-container', {})
    },
  }

之后看见下面的效果,就证明前面的都没问题.

文档api介绍

推荐一个中文文档,当然网上还有好多.
http://cesium.xin/cesium/cn/Documentation1.62/index.html
进入文档,搜索刚才我们初始化的方法

写的很清楚,参数含义,使用方法.之后用不明白的可以查看文档.

之后我们根据文档的配置,去除我们不需要的功能,(我们只要一个地球)

    init() {
      //Cesium 官网注册的key https://ion.cesium.com/signin
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNDZkMmIwZS01ZTFmLTRlYTEtOGRjNy05M2I0MzU4OTlhZTMiLCJpZCI6MTMzNDUwLCJpYXQiOjE2ODEzNTM3OTN9.6fKSEcApT4KcZE-iTJp4HrNKjTlc3mgDYZuF79cL0Ig'
      window.viewer = new Cesium.Viewer('cesium-container', {
        terrainProvider: Cesium.createWorldTerrain(),//创建全球范围内的地形数据集
        geocoder: false, // 是否显示搜索按钮
        homeButton: false, // 是否显示主页按钮
        animation: false, // 是否显示左下角的仪表盘
        baseLayerPicker: false, // 是否显示图层选择器按钮，右上角那个地图图标
        fullscreenButton: false, // 是否显示全屏按钮
        sceneModePicker: false, // 是否显示右上角的模式切换按钮
        selectionIndicator: false, // 是否显示选取指示器组件
        timeline: false, // 是否显示下边的时间轴
        navigationHelpButton: false, // 是否显示右上角的帮助按钮

        vrButton: false, // 是否显示VR按钮
        infoBox: false, // 是否显示提示信息
        navigationInstructionsInitiallyVisible: true, // 是不显示导航
        scene3DOnly: true, // 是否指定仅为三维模式，全部使用三维模式可节约 GPU 资源
      })
      viewer.cesiumWidget.creditContainer.style.display = "none";// 隐藏Logo，水印
    },

之后再刷新页面,就可以得到一个纯净的地球页面

到此我们就完成了一个可视化的3d地球.

封装js

因为后面还有很多的功能,我们不可能每个组件内都写一堆cesium的代码,所以我们将所有有关cesium的东西都封装在一起,在需要的地方引入即可.
新建一个js文件,我们就叫Xcesium.js.之后将我们刚才初始化的方法加入到封装类.(如果你后续不需要那么多功能,你也可以不封装)

class XCesium {
  constructor() { }
  initData() {
    this.viewer = null
  }
  // 初始化
  init() {
    //Cesium 官网注册的key https://ion.cesium.com/signin
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNDZkMmIwZS01ZTFmLTRlYTEtOGRjNy05M2I0MzU4OTlhZTMiLCJpZCI6MTMzNDUwLCJpYXQiOjE2ODEzNTM3OTN9.6fKSEcApT4KcZE-iTJp4HrNKjTlc3mgDYZuF79cL0Ig'
    this.viewer = new Cesium.Viewer('cesium-container', {
      terrainProvider: Cesium.createWorldTerrain(),//创建全球范围内的地形数据集
      geocoder: false, // 是否显示搜索按钮
      homeButton: false, // 是否显示主页按钮
      animation: false, // 是否显示左下角的仪表盘
      baseLayerPicker: false, // 是否显示图层选择器按钮，右上角那个地图图标
      fullscreenButton: false, // 是否显示全屏按钮
      sceneModePicker: false, // 是否显示右上角的模式切换按钮
      selectionIndicator: false, // 是否显示选取指示器组件
      timeline: false, // 是否显示下边的时间轴
      navigationHelpButton: false, // 是否显示右上角的帮助按钮

      vrButton: false, // 是否显示VR按钮
      infoBox: false, // 是否显示提示信息
      navigationInstructionsInitiallyVisible: true, // 是不显示导航
      scene3DOnly: true, // 是否指定仅为三维模式，全部使用三维模式可节约 GPU 资源
      requestRenderMode: true, // 启用请求渲染模式
      // https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer
      // imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
      //   url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'
      // })
    })
    this.viewer.cesiumWidget.creditContainer.style.display = "none";// 隐藏Logo，水印
    return this.viewer
  }
}
export default new XCesium()

之后在我们的组件引入

我们把返回的实例挂载到window,不要用Viewer命名,容易混淆
为什么挂载在window,因为vue.data对数据进行劫持,造成性能损耗
XViewer可以理解为我们创建的整个场景实例,可以直接.方法名调用官方的方法
XCesium是我们自己封的类,可以直接.方法名调用我们自己写的方法

import  XCesium  from '@/utils/Xcesium.js'
export default {
  mounted() {
    //初始化
    window.XViewer = XCesium.init()
    console.log('window.XViewer', window.XViewer);
    console.log('XCesium',XCesium);
  },
}

可以看到两个输出结果,XViewer是一个Viwer类,可以在官方文档中搜索Viwer类方法使用,例如后面最常用的飞行flyTo聚焦zoomTo,而XCesium是我们自己封装的类,后续我们写的方法可以在此类下直接调用.

本文主要介绍如何引入cesium并生成3d地球,并在项目中封装自己的cesium.后续教程基于此封装继续延伸!