欢迎来到「Cesium 酱の百宝箱」！这是我们的第一篇文章

📘 专栏说明

本专栏旨在手把手带你从零开始，基于开源三维地球引擎 Cesium 封装一套功能完善、可复用的 WebGIS 增强型 SDK。内容涵盖核心封装思路、关键代码实现、常用 GIS 功能抽象，以及基于该 SDK 构建的 UI 组件库开发。如果你更关注结果而非实现过程，也可直接使用已发布的成果：

🌟 GitHub仓库 📦 NPM 包 ✨ 公众号：经纬码客（欢迎关注）

💡 建议：即便你打算直接使用 SDK，也推荐订阅本专栏 -- 理解设计思路，才能更灵活地扩展属于你自己的专属 GIS 能力！

由于作者需兼顾全职工作，更新主要安排在晚间或节假日，无法保证高频发布，但会持续迭代，直至 SDK 达到实际项目落地标准。届时将完整开源所有源码，供学习与商用（遵循许可证协议）。

大家好，我是 Cesium 酱（也可以叫我“本猿”），一名在 WebGIS 领域摸爬滚打多年的前端开发者。今天，正式开启这个全新的SDK技术专栏——《Cesium 酱の百宝箱》，也是本专栏的开山之作！

🌍 什么是 Cesium？

Cesium 是一个开源的 JavaScript 3D 地理空间可视化引擎，诞生于 2011 年，由美国 AGI 公司发起，如今已成为全球最主流的 Web 三维地球解决方案之一。

✨ 核心特点：

跨平台：纯 Web 技术，无需插件，支持桌面 & 移动端
高精度：基于 WGS84 坐标系，支持厘米级地理定位
海量数据渲染：可流畅加载地形、影像、3D 模型、点云等
开源免费：核心库采用 Apache 2.0 协议，商业友好
生态强大：社区活跃，插件丰富，文档完善

🌐 典型应用场景：

小知识：Cesium 的名字来源于化学元素“铯”（Cesium），原子序数 55，常用于高精度原子钟——这也暗合了 Cesium 对时空精度的极致追求。

🧰 这个专栏要做什么？

作为一枚“高龄”前端猿，深知技术更新之快、学习成本之高。与其独自摸索，不如一起造轮子、一起进步！

本专栏将围绕 Cesium，持续输出以下三类内容：

1️⃣【圈内周报 + 版本月报】

每周汇总 Cesium 社区、GitHub、论坛的重要动态
每月深度解读 Cesium 新版本更新（Breaking Changes、新特性、性能优化等）

️2️⃣【手把手造 SDK】——《从零构建 Arc3DLab SDK》系列

我们将从头开始，基于 Cesium 封装一套属于自己的 WebGIS 开发框架：

优化 Viewer 初始化流程
封装常用图层管理、测量工具、漫游控制
集成 Vue/React 最佳实践
支持 TypeScript + 模块化打包

💡 所有代码完全开源！欢迎提 Issue、PR，甚至直接“抄作业”。

️3️⃣【奇技淫巧实验室】

不定期分享用 Cesium 实现的趣味小项目：

用粒子系统模拟台风路径
在地球上放烟花 🎆
实时显示国际空间站 ISS 轨迹
……脑洞有多大，地球就有多好玩！

📦 Arc3DLab SDK 已上线！

是的，第一个成果已经发布！测试包！！！

安装命令：

npm install arc3dlab --save

在 Vue3 中快速创建一个地球：

<script setup>
import { Viewer } from 'arc3dlab';
import { onMounted } from 'vue';
onMounted(() => {
  window.viewer = new Viewer('map');
});
</script>
 
<template>
  <div id="map"></div>
</template>
 
<style scoped>
#map { width: 100%; height: 100vh; }
</style>

⚠️ 注意：若遇到 Cesium 静态资源 404，请配合 vite-plugin-cesium 使用（详情见 README）。

静态页面调用：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>000-创建场景</title>
    <script src="./Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="./Cesium/Widgets/widgets.css" />
    <script src="./lib/arc3dlab.umd.js"></script>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
      #cesiumContainer {
        width: 100%;
        height: 100%;
        position: relative;
      }
    </style>
  </head>
  <body>
    <div id="cesiumContainer"></div>
    <script>
      const viewer = new Arc3DLab.Viewer("cesiumContainer", {})
    </script>
  </body>
</html>

❤️ 关于更新频率

坦白说，本猿白天搬砖，晚上码字，所有内容都靠节假日和深夜肝出来。

所以——

✅ 不会日更

✅ 但绝不弃坑

✅ 每一篇都力求有用、有料、有温度

如果你也热爱 Cesium，

如果你也在用三维地球解决实际问题，

欢迎关注、转发、留言、提需求！

你的每一个 star、每一句“加油”，都是我继续写下去的动力。

🌱 最后

技术之路漫长，但不必孤独。

愿这个小小的“百宝箱”，能成为你探索三维世界的一把钥匙。

🌟 项目开源，欢迎Star✨！

GitHub：https://github.com/jianlei-wang/Arc3DLab_SDK

NPM：https://www.npmjs.com/package/arc3dlab

Cesium 酱の百宝箱 · 第 1 篇

写于 2025 年冬夜，窗外有雪，心中有光。

posted on 2026-01-13 23:36 Arc3DLab 阅读(0) 评论(0) 收藏举报

刷新页面返回顶部