WebGL近幾年越來越被人們所關(guān)注躯舔，但是二三維開發(fā)難度也比普通web要高出許多，不管我們是在在開發(fā)或者是學(xué)習(xí)過程中往弓，往往需要耗費大量的時間去查閱資料和研究官方案例态兴；讓本來就非常緊張的而寶貴的精力卷到了不關(guān)緊要的地方
而大多二三維的包(openlayersjs,cesiumjs、threejs)都是外國的区转，如果英語水平好還行,否則讀起來真是連蒙帶猜甚是難受苔巨；正式因為經(jīng)歷過所以結(jié)合自身經(jīng)驗和網(wǎng)絡(luò)資料整理了一套cesium相關(guān)案例的開發(fā)包，供大家參考废离，希望對各路小伙伴有所幫助侄泽。
廢話不多說，卷起來??蜻韭。
@[TOC]
一悼尾、源碼目錄
├── public # 靜態(tài)資源
│ ├── config.js # 配置文件
| └── favicon.ico # favicon 圖標
├── src # 源代碼
| ├── utils # api 請求
| ├── utils # 工具目錄
| | ├── cesiumPluginsExtends # cesium_dev_kit工具包
| | | ├──libs # 工具包組件模塊
| | | | ├──plot.js # 標會模塊
| | | | ├──radar.js # 相控雷達模塊
| | | | ├──cesium-plugin.js # 三方插件模塊
| | | | ├──Base.js # 公共基礎(chǔ)模塊
| | | | ├──Analysis.js # 分析模塊
| | | | ├──ChartLayer.js # chart插件模塊
| | | | ├──Control.js # 面板控件模塊
| | | | ├──Graphics.js # 圖形操作模塊
| | | | ├──Material.js # 材質(zhì)操作模塊
| | | | ├──Shaders.js # 著色器模塊
| | | | ├──ThreeJs.js # ThreeJs擴展模塊
| | | | ├──Math3d.js # 三維數(shù)學(xué)工具模塊
| | | | ├──DomUtil.js # dom操作模塊
| | | | ├──Math2d.js # 二維數(shù)學(xué)工具模塊
| | | | ├──Math3d.js # 三維數(shù)學(xué)工具模塊
| | | | ├──Primitive.js # 配合shader的圖元操作模塊
| | | | ├──Draw.js # 繪制模塊
| | | | ├──CustomCesiumPlugin.js # 自定義相控擴展模塊
| | | | ├──PassEffect.js # 后期特效模塊
| | | | ├──Plugin.js # 擴展模塊
| | | | ├──index.js # 集中導(dǎo)出模塊
| | | ├──singleImport # 按需導(dǎo)入模塊
| | | | ├──Analysis.js # 分析模塊
| | | | ├──Graphics.js # 圖形操作模塊
| | | | ├──Material.js # 材質(zhì)操作模塊
| | | | ├──Primitive.js # 配合shader的圖元操作模塊
| | | | ├──Draw.js # 繪制模塊
| | | | ├──CustomCesiumPlugin.js # 自定義相控擴展模塊
| | | | ├──PassEffect.js # 后期特效模塊
| | | | ├──Plugin.js # 擴展模塊
| | | | ├──index.js # 集中導(dǎo)出模塊
| | | ├──common.js # 公共工具模塊
| | | ├──indexOld.js # 全量導(dǎo)出模塊
| | | ├──initConf .js # 初始化Cesium配置模塊
| | | ├──ColorDeal.js # 顏色轉(zhuǎn)換模塊
| | | └──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
- 導(dǎo)入所有模塊
import { initCesium } from 'cesium_dev_kit'
const {
viewer, // viewer
material, // 材質(zhì)模塊（修改實體材質(zhì)）
graphics, // 圖形模塊（如創(chuàng)建PolygonGraphics對象等）
math3d, // 三維數(shù)學(xué)工具
primitive, // 圖元操作對象（如使用primivite創(chuàng)建polygon等）
draw, // 繪制模塊（如多邊形闺魏，矩形）
passEffect, // 后置處理模塊
customCesiumPlugin,
control, // 控制模塊（如模型位置調(diào)整，拖拽等）
plugin, // 額外插件（如拓展css3的動畫 俯画，地形裁剪）
base, // 基礎(chǔ)模塊（如坐標轉(zhuǎn)換析桥，圖層初始化等）
analysis, // 分析模塊（如坡度，坡向艰垂，可視域泡仗，通視分析）
attackArrowObj, // 標繪（攻擊）
straightArrowObj,// 標繪（直擊）
pincerArrowObj, // 標繪（鉗擊）
} = new initCesium(
{
cesiumGlobal: Cesium,
containerId: 'cesiumContainer',
viewerConfig: {
infoBox: false,
shouldAnimate: true,
},
extraConfig: {},
MapImageryList: []
})
- 導(dǎo)入單個模塊
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 // 默認服務(wù)器地址以及材質(zhì)等基礎(chǔ)信息配置，具體請參考src\views\example\defaultStaticConf\index.js
})
- 2猜憎、使用script引入
先到 npm 下載 index.umd.js 到本地然后引入即可
<script type="text/javascript" src="./libs/index.umd.js"></script>
三娩怎、運行效果
案例截圖
材質(zhì)案例
三維分析
河流案例
物體拖拽
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
案例目前可能還有許多待優(yōu)化和不足之處歡迎大家提出寶貴意見，同時也歡迎大家收藏點贊轉(zhuǎn)發(fā)??
