CesiumJS 一款开源的基于JavaScript的3D地图框架

1.介绍

CesiumJS 是一个开源的 JavaScript 库，用于创建 3D 地球和 2D 地图。它支持时间动态数据，适合复杂的地理空间可视化。

特点3D, 强大

中文版学习Cesium的网站

• 官网 （用来申请token）

• cesium.xin/ （提供了一些中文的Cesium教程和示例，也有一些Cesium使用案例）

• Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

• 示例网站 http://www.zgeo.work/CesiumTx/examples/index.html#baseDemo

• 官方中文文档 https://cesium.com/learn/cesiumjs/ref-doc/ （官方中文文档，详细说明了Cesium的API和用法） 官网 https://cesium.com/

• 中文官方文档 http://cesium.xin/cesium/cn/Documentation1.72/

资源网站

• 国家/省/市/区/县等边界线数据

• 国外开源gis数据，国内数据慎用

• 政府公开数据

• 3D模型查看 - gltf

• 3D模型查看 - 多格式

• 3D模型下载 - 3D溜溜网

• 3D模型下载 -sketchfab

• 3D模型下载 - 爱给网

功能包括：

• 支持2D,2.5D,3D 形式的地理（地图）数据展示，
• 可以绘制各种几何图形、高亮区域，支持导入图片，甚至三维模型等多种数据可视化展示
• 可用于动态数据可视化并提供良好的触摸支持，支持绝大多数的浏览器和移动端浏览器。
• 支持基于时间轴的动态流式数据展示

2.vite项目使用

安装

npm i cesium vite-plugin-cesium vite -D

配置

vite 配置

vite.config.js

import cesium from 'vite-plugin-cesium';

export default defineConfig({
  plugins: [cesium()]
})

vitepress 项目配置

配置文件在 .vitepress/config.mjs

import cesium from 'vite-plugin-cesium';

export default defineConfig({
  vite: {
    plugins: [cesium()]
  },
})

基础示例

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

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';
onMounted(() => {
  Cesium.Ion.defaultAccessToken = 'token' // 官网申请
  // 初始化 Cesium Viewer
  const viewer = new Cesium.Viewer('cesium-container');
  viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权
});
</script>

<style scoped>
#cesium-container {
  width: 100%;
  height: 500px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>

清空样式

全屏，需要清空一切不需要的公共样式