一、Cesium介绍与环境安装

Midsummer
158 阅读2分钟

一、Cesium 3D 地理空间平台

git地址：Cesium · GitHub

二、关于

Cesium中文网相对于Cesium英文网于我而言更友好。

1、为什么选择Cesium?

开源、专业、生态相对繁荣。主要是上面的决定，改不了。

2、安装 npm install cesium

3、版本信息

最新版 1.112 时间：2023-12-01

三、CesiumJS是什么？

CesiumJS的一些主要特点和功能：

  1. 三维地球可视化，CesiumJS提供了强大的三维地球可视化功能，支持地形、影像和矢量数据的渲染；
  2. 地理信息系统（GIS）功能，CesiumJS支持加载、显示和分析各种地理信息数据，包括矢量数据、栅格数据、地形数据等；
  3. 开发者，提供了文档、示例和工具；
  4. 跨平台兼容性，CesiumJS可以在各种现代Web浏览器上运行，同时支持移动设备，使得应用程序具有良好的跨平台兼容性；
  5. 开源，CesiumJS是一个开源项目，允许开发者自由使用、修改和分享代码。

四、CesiumJS能做什么？

  1. 二维三维地图浏览，可以构建自由旋转、缩放和平移的二维三维地图；
  2. 地理信息应用，加载和展示各种地理信息数据；
  3. 虚拟环境，创建虚拟环境，添加建筑物、航迹、车辆轨迹等元素，用于模拟和展示特定区域的活动，如城市规划、紧急情况模拟等；
  4. 飞行模拟，用于创建飞行模拟应用，模拟无人机在三维空间中的运动；
  5. 地球科学可视化，展示气象数据、地震数据、环境监测数据；
  6. 游戏和娱乐，创建基于地理空间的游戏和娱乐应用。

五、环境创建（vue2）

node v16.18.0

npm 8.19.2

pnpm 8.6.10

1.vue create runtime-en，cd runtime-en；

2.npm i cesium或者npm install cesium@1.95.0；

3.配置

  • node_modules\cesium\Build路径下的Cesium文件夹复制到public/lib(lib文件夹需要新建，根据需要)文件夹下；
  • main.js中配置以下代码
 import * as cesium from "cesium";
 import "../public/lib/Cesium/Widgets/widgets.css";
 window.CESIUM_BASE_URL = "/lib/cesium";//与复制后的路径保持一致
 Vue.prototype.Cesium = cesium;
 cesium.Ion.defaultAccessToken ="cesium token";
  • 调整样式，创建容器（确保容器大小）
  • 存在报错,进行相应配置（最新版会出现报错）
//vue.config.js
configureWebpack: {
    resolve: {
      fallback: {
        http: false,
        https: false,
        zlib: false,
        url: false,
      },
    },
  },
  • 结果：

image.png

其他-cesium注册

1、建议使用github

1694591350482.png

2、登录后

image.png

3、获取token

image.png

* 注意事项

后续代码会以1.95.0为例，因为有中文文档

报错：

1、Visit get.webgl.org to verify that your web browser and hardware support WebGL. Consider trying a different web browser or updating your video drivers. Detailed error information is below:

main.js 设置 window.CESIUM_BASE_URL = "/lib/cesium";

2、配置

cesium.xin_cesium_cn_Documentation1.95_Viewer.html_classFilter=Viewer.png

avatar
文章
阅读
粉丝