l3d 基于 cesium 的三维业务逻辑封装

模块划分

• map 对内 所有内置资源的统筹管理 对外 向用户暴露核心 api
  • layer
    • GeoJSON layer 设置样式 过滤 绑定事件
    • TilesetLayer 3dTiles
    • graphicLayer 图元图层
  • camera 视图相关操作如定点旋转 路径漫游 飞入视图
    • 路径漫游
    • 绕点旋转
  • control 和地图相关的控件(带有 UI 交互的组件)
    • 弹框 Popup
    • 比例尺 Scale
    • 坐标显示
  • analyse 进行计算和分析后的结果展示
    • 坡度坡向分析
    • 填挖方分析
    • 视域分析
    • 视线分析
    • 淹没分析
    • 日照分析
    • 绘图
    • 测量
  • effect 全局效果展示
    • skyBox 天空盒
    • 光照
    • 环境 雨、雪、雾
  • graphics 各类 entity 实例化，粒子效果、包括动画图形
    • 各类 Entity
    • 各类粒子效果
    • 各类实体动画
  • material 各类自定义材质
  • util
    • 坐标转换
    • 要素拾取
    • 计算
      • 方位
      • 角度
      • 距离
  • event 发布订阅 统一的事件监听
    • on
    • off
    • once
    • fire

api 原则

1. map

const viewer = new Cesium.Viewer(container, {});
const map = l3d.Map(viewer);
map.on('click', e => {});

2. 各个模块 每次实例化模块对象都必须传递一个 id 进来

   // layer
    const layer = new l3d.layer.TileLayer(opts);
    map.addLayer(layer);
   // camera
    const fixedPointRotation = new l3d.camera.FixedpointRotation(opts);
    map.addCamera(fixedPointRotation);
    fixedPointRotation.setSpeed(10)
    fixedPointRotation.on('finish',()=>{});
   
    // effect
    const weather = new l3d.effect.Weather();// 天气效果  雨、雪、雾
    map.addEffects(weather);
    weather.changeWeather('snow');
   
    // analysis
    const rangeView = new l3d.analyse.RangeView();
    map.addAnalyse(rangeView);
    rangeView.setRadius();//改变半径
    rangeView.setAngle();// 改变角度
   
    const draw = new l3d.analyse.draw();
    map.addAnalyse(draw);
    draw.changeMode('point');
    draw.on('draw.update',()=>{});
    draw.on('draw.create',()=>{});
    draw.on('draw.delete',()=>{});
   
    ...

目录结构

├── docs/                          # Markdown编辑文档目录
├── example/                       # 例子
├── src/                           # 源码路径
│   ├── types/                     # ts定义文件
│   └── index.ts                   # 应用入口脚本
├── test/                          # 测试用例
├── website/                       # 用于生成文档网站的目录
│   ├── src/
│   ├── docusaurus.config.js       # 文档网站配置
│   ├── sidebars.js                # 文档左侧目录配置
│   ├── package.json
│   └── ....
├── package.json
├── .rollup.config.js              # 配置生成es,commonjs,umd格式配置文件
├── .eslintignore                  # eslint不检查文件
├── .eslintrc                      # eslint配置文件
├── .gitignore
├── .prettierignore                # prettier不检查文件
├── .prettierrc                    # prettier配置文件
├── .gitignore
├── tsconfig.json                  # ts配置文件
└── yarn.lock

调试和测试用例调试方式

• apps/Cesium下为 Cesium 源码，版本 1.99
• 运行 npm run start，这时候代码修改和样例修改会被监听
• 使用 vscode 打开项目，选中apps/developcenter目录下 index.html，点击右键执行open with Live Server, 即可打开开发者中心。
• 在examples目录添加例子，文件夹为 demo 名称（例子为 index.js 和 index.html 片段，index.js 是必须的），开发中心的目录会自动同步刷新
• 静态资源统一放到 apps/developcenter/data 目录下，请求地址为 ./data/...

修改日志

20221130 添加开发者中心 developcenter

• 增加 API 文档网站功能，详细介绍请查看：https://leador.yuque.com/nn6l2c/gggty3/dkg3ngcpa7vto9fl