CesiumJS开发工具包

WebGL近几年越来越被人们所关注，但是二三维开发难度也比普通web要高出许多，不管我们是在在开发或者是学习过程中，往往需要耗费大量的时间去查阅资料和研究官方案例；让本来就非常紧张的而宝贵的精力卷到了不关紧要的地方

而大多二三维的包(openlayersjs,cesiumjs、threejs)都是外国的，如果英语水平好还行,否则读起来真是连蒙带猜甚是难受；正式因为经历过所以结合自身经验和网络资料整理了一套cesium相关案例的开发包，供大家参考，希望对各路小伙伴有所帮助。

---

废话不多说，卷起来😅。

---

一、源码目录

├── public # 静态资源
│ ├── config.js # 配置文件
| └── favicon.ico # favicon 图标
├── src # 源代码
| ├── utils  # api 请求
| ├── utils # 工具目录
| | ├── cesiumPluginsExtends # cesium_dev_kit工具包
| |  |	 ├──libs # 工具包组件模块
| |  |	 |  ├──plot.js # 标会模块
| |  |	 |  ├──radar.js #  相控雷达模块
| |  |	 |  ├──cesium-plugin.js # 三方插件模块
| |  |	 |  ├──Base.js #  公共基础模块
| |  |	 |  ├──Analysis.js #  分析模块
| |  |	 |  ├──ChartLayer.js # chart插件模块
| |  |	 |  ├──Control.js # 面板控件模块
| |  |	 |  ├──Graphics.js #  图形操作模块
| |  |	 |  ├──Material.js #  材质操作模块
| |  |	 |  ├──Shaders.js # 着色器模块
| |  |	 |  ├──ThreeJs.js #  ThreeJs扩展模块
| |  |	 |  ├──Math3d.js # 三维数学工具模块
| |  |	 |  ├──DomUtil.js # dom操作模块
| |  |	 |  ├──Math2d.js #  二维数学工具模块
| |  |	 |  ├──Math3d.js # 三维数学工具模块
| |  |	 |  ├──Primitive.js #  配合shader的图元操作模块
| |  |	 |  ├──Draw.js #  绘制模块
| |  |	 |  ├──CustomCesiumPlugin.js #  自定义相控扩展模块
| |  |	 |  ├──PassEffect.js #  后期特效模块
| |  |	 |  ├──Plugin.js #  扩展模块
| |  |	 |  ├──index.js #  集中导出模块
| |  |	 ├──singleImport # 按需导入模块
| |  |	 |  ├──Analysis.js #  分析模块
| |  |	 |  ├──Graphics.js #  图形操作模块
| |  |	 |  ├──Material.js #  材质操作模块
| |  |	 |  ├──Primitive.js #  配合shader的图元操作模块
| |  |	 |  ├──Draw.js #  绘制模块
| |  |	 |  ├──CustomCesiumPlugin.js #  自定义相控扩展模块
| |  |	 |  ├──PassEffect.js #  后期特效模块
| |  |	 |  ├──Plugin.js #  扩展模块
| |  |	 |  ├──index.js #  集中导出模块
| |  |	 ├──common.js  # 公共工具模块
| |  |	 ├──indexOld.js  # 全量导出模块
| |  |	 ├──initConf .js # 初始化Cesium配置模块
| |  |	 ├──ColorDeal.js # 颜色转换模块
| |  |   └──index.js # 工具包入口模块
├── index.html # html 模板
├── package.json # package.json
├── README.md # README
├── tsconfig.json # tsconfig
└── vite.config.ts # vite 配置文件

• 所有功能均遵循ES6 模板化
  
• 采用原型继承减少模块冗余
  
• 采用primitive + shader 进行各种功能高效渲染
  

二、 使用方式

• 1、 npm 安装

 npm i cesium_dev_kit

• 导入所有模块

import { initCesium } from 'cesium_dev_kit'
   const {
        viewer,   // viewer
        material, // 材质模块（修改实体材质）
        graphics, // 图形模块（如创建PolygonGraphics对象等）
        math3d, // 三维数学工具
        primitive, // 图元操作对象（如使用primivite创建polygon等）
        draw, // 绘制模块（如多边形，矩形）
        passEffect, // 后置处理模块
        customCesiumPlugin,
        control, // 控制模块（如模型位置调整，拖拽等）
        plugin, // 额外插件（如拓展css3的动画 ，地形裁剪）
        base, // 基础模块（如坐标转换，图层初始化等）
        analysis, // 分析模块（如坡度，坡向，可视域，通视分析）
        attackArrowObj, // 标绘（攻击）
        straightArrowObj,// 标绘（直击）
        pincerArrowObj, // 标绘（钳击）
      } = new initCesium(
          {
            cesiumGlobal: Cesium,
            containerId: 'cesiumContainer',
            viewerConfig: {
              infoBox: false,
              shouldAnimate: true,
            },
            extraConfig: {},
            MapImageryList: []
          })

• 导入单个模块

import { Draw } from 'cesium_dev_kit'
   const drawObj = new Draw({
        cesiumGlobal: Cesium, // 全局Cesium对象
        containerId: 'cesiumContainer', // 容器id
        viewerConfig: { // 同官方的viewer配置相同
          infoBox: false,
          shouldAnimate: true,
        },
        extraConfig: {// 其他配置
          logo:true, // 是否显示logo
          depthTest:true // 是否开启深度测试
        },
        MapImageryList: tempData // 底图配置
        defaultStatic // 默认服务器地址以及材质等基础信息配置，具体请参考src\views\example\defaultStaticConf\index.js
      })

• 2、使用script引入

先到 npm 下载 index.umd.js 到本地然后引入即可

<script type="text/javascript" src="./libs/index.umd.js"></script>

三、运行效果

案例截图

• 旋转图形

• 渐变墙

• 探照灯
  

• 发光线
  

• 城市道路线
  

• 球体
  

• 拖拽
  

• 分析
  

• 物体角度调整
  

• 雷达扫描
  

• 坐标拾取
  

• 信息框
  

• 标绘
  

• 测量
  

• 第一人称漫游
  

案例在线地址 https://www.benpaodehenji.com/cesiumDevKit/
github源码地址 https://github.com/dengxiaoning/cesium_dev_kit
案例目前可能还有许多待优化和不足之处欢迎大家提出宝贵意见，同时也欢迎大家收藏点赞转发😀