cesium_dev_kit

cesium_dev_kit

简介

旨在封装一个 Cesium 基本操作的工具包，提供简单的方法调用来实现复杂的 API 操作；达到节省阅读 Cesium 原文档时间，从而降低入门难度提升学习信心，同时也希望能提高工作效率减少重复劳动；案例中封装了常用功能配备使用案例，npm 安装后可以直接在项目中使用。

功能展示

• 材质
• 分析
• 标绘
• 拖拽
• 雷达扫描

在线预览

https://www.benpaodehenji.com/cesiumDevKit

安装

 npm install cesium_dev_kit

引入

import { initCesium } from 'cesium_dev_kit'

使用

// test.vue
<template>
  <div id="cesiumContainer"
       class="map3d-contaner"></div>
</template>
<script>
import { initCesium } from 'cesium_dev_kit'
export default {
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      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: []
          })
    }
  }
}
</script>

API

initCesium

参数

• cesiumGlobal Object Ceiusm 对象
• containerId String 容器 id
• viewerConfig Object viewer 基础配置（与官网一致）
• extreaConfig Object 额外参数配置，如 {logo：true// 是否显示 logo, depthTest：true //开启深度检测}
• MapImageryList Object 配置底图,参考 ImageryProvider

  /**
   * 初始化入口函数
   * @param {*} param0
   * {
   *   cesiumGlobal：{Object} Ceiusm对象（项目需要安装配置获取Cesium传入）
   *   containerId:{String} 容器id
   *   viewerConfig:{Object} viewer基础配置
   *      【参数格式】：{与官网一致}
   *   extreaConfig：{Object }
   *     【参数格式】：
   *       {
   *        logo：true，// 是否显示logo
   *        depthTest：true， //开启深度检测
   *      }
   *   MapImageryList:{Array} 配置底图，每一个元素格式为
   *    【参数格式】 ：
   *      [{
   *        id: 3,
   *        name: '',
   *        type: '',//ImageryProvider类型
   *         classConfig: {
   *          url:  链接地址
   *        },
   *        interfaceConfig: {},
   *        offset: '0,0',
   *        invertswitch: 0,
   *        filterRGB: '#ffffff',
   *        showswitch: 1,
   *        weight: 13,
   *        createtime: 创建时间
   *        updatetime: 更新时间,
   *    }]
   *
   * }
   * @returns
   */

参考案例

https://github.com/dengxiaoning/cesium_kit_test这是一个 vue 项目已安装 cesium_dev_kit,其中有使用 demo,可直接下载到本地运行查看参照

浏览器支持

本地开发推荐使用Chrome 80+ 浏览器

支持现代（chrome，Firefox，Microsoft edge，etc.）浏览器, 不支持 IE

鸣谢

cesium-d3kit
drawarrowforcesium
vue3-ts-cesium-map-show
本项目借鉴和参考以上几个资料文件，非常感谢作者分享

项目不足与优化

• 1、cesium 工具类未使用 typeScript
• 2、未配备使用文档（请参考案例）
• 3、未作异常捕捉和处理

感兴趣朋友可以一起讨论交流继续完善功能，提升自己帮助他人。