WebGL近几年越来越被人们所关注，但是二三维开发难度也比普通web要高出许多，不管我们是在在开发或者是学习过程中，往往需要耗费大量的时间去查阅资料和研究官方案例；让本来就非常紧张的而宝贵的精力卷到了不关紧要的地方
而大多二三维的包(openlayersjs,cesiumjs、threejs)都是外国的，如果英语水平好还行,否则读起来真是连蒙带猜甚是难受；正式因为经历过所以结合自身经验和网络资料整理了一套cesium相关案例的开发包，供大家参考，希望对各路小伙伴有所帮助。
废话不多说，卷起来😅。
@[TOC]
一、源码目录
├── 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 模板化
image.png -
采用原型继承减少模块冗余
image.png -
采用primitive + shader 进行各种功能高效渲染
image.png
二、 使用方式
- 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>
三、运行效果
案例截图
材质案例
三维分析
河流案例
物体拖拽
cesium 整合 threejs 案例
光线投射
奔跑的士兵
图形挤压
案例在线地址 https://www.benpaodehenji.com/cesiumDevKit/
github源码地址 https://github.com/dengxiaoning/cesium_dev_kit
哔哩哔哩使用介绍 >>> https://www.bilibili.com/video/BV1PKaEeeEmx/?share_source=copy_web&vd_source=fa1aa0302eb3667530ecc801e28d9687
案例目前可能还有许多待优化和不足之处欢迎大家提出宝贵意见，同时也欢迎大家收藏点赞转发😀
