初始化Cesium

原创已于 2024-01-22 14:02:00 修改

· 991 阅读

9 ·

版权

文章标签：

#cesium

于 2024-01-11 14:41:43 首次发布

Cesium 专栏收录该内容

3 篇文章

订阅专栏

前言：

屠龙勇士终成恶龙！本系列用Cesium结合超图写一些经典案例（加载SuperMap、空间分析、淹没分析、坡度分析、天际线分析等等），不是随意的去复制粘贴，打算输出一些好的内容，本系列将持续更新，并附项目源码，各位道友放心追番！

项目地址：cesium-demo

Cesium文档地址：Cesium Documentation

一、申请Cesium秘钥

申请前要登录，任何一个邮箱均可，由于官网全为英文，下面贴了申请token的地址，登录上了即可访问下面地址。

申请Token地址：https://ion.cesium.com/tokens?page=1

界面长这样，右上角为秘钥：

二、搭建vue项目并初始化Cesium

1.搭建vue项目

这里看个人习惯吧，yarn个人觉得好用一些。

vue create cesium

yarn add cesium

2.初始化Cesium

1.安装好 Cesium包后，去到node_modules/Cesium下将Cesium文件夹复制到public文件夹

tip:为什么要复制？网上众说纷纭，有写webpack配置的，有写copyCesiumlib的，其本质还是将资源copy出来，说来说去还是cesium官方偷懒，都弄npm库了也不去梳理下结构兼容ES6导入使用。总得来说目前为止推荐直接复制到项目里或者自己搭个CDN。

2.在html文件中引入Cesium静态资源

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>

    <link rel="stylesheet" href="./Cesium/Widgets/widgets.css">
    <script src="./Cesium/Cesium.js"></script>

    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

3. 使用Cesium对象初始化球体

初始化很简单，将实例化viewer，为viewer指定容器即可初始化球体。

<template>
  <div id="cesiumContainer" style="width: 100%; height: 100%"></div>
</template>

<script>
export default {
  name: "initCesium",
  mounted() {
    Cesium.Ion.defaultAccessToken = "你的秘钥";
    const viewer = new Cesium.Viewer("cesiumContainer");
    console.log('viewer',viewer);
  }
};
</script>

方便后续维护以及案例的增加，demo没有将代码直接写到App.vue，而是进行了模块化分组和路由编排，如果效果不一致，可排查自身代码或者克隆项目到本地查看，也可以留言讨论。

3. 一些初始化配置

Cesium一些自带工具是默认开启的，要得到一个干净的球，需要做些许配置：

<template>
  <div id="cesiumContainer" style="width: 100%; height: 100%"></div>
</template>

<script>
export default {
  name: "initCesium",
  mounted() {
    Cesium.Ion.defaultAccessToken ="你的秘钥";
    const initConfig = {
      // 禁用动画控件
      animation: false,
      // 禁用图层选择器
      baseLayerPicker: false,
      // 禁用全屏按钮
      fullscreenButton: false,
      // 禁用地理编码器
      geocoder: false,
      // 禁用主页按钮
      homeButton: false,
      // 禁用点击弹窗信息框
      infoBox: false,
      // 禁用场景模式选择器
      sceneModePicker: false,
      // 禁用选中指示器
      selectionIndicator: false,
      // 禁用时间轴
      timeline: false,
      // 禁用导航帮助按钮
      navigationHelpButton: false
    };
    const viewer = new Cesium.Viewer("cesiumContainer", initConfig);
    // 禁用球体照明效果
    viewer.scene.globe.enableLighting = false;
    //取消版权信息
    viewer._cesiumWidget._creditContainer.style.display = "none";
  }
};
</script>