cesium_dev_kit

cesium_dev_kit

简介

这是一个 Cesium 开发工具包，包含图层加载、坐标转换、坐标拾取、相机控制、测量、标绘、模型加载、模型平移旋转缩放、模型/3Dtiles 视角位置调整、模型拖拽、天气（雨，雪，雾）场景、雷达扫描、信息框、流动线、发光线、动态墙等各种发光材质、后置场景效果、通视分析、透视分析、坡度分析、淹没分析、方量分析、地形开挖等各种分析案例。

功能展示

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

在线预览

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>

如需在 H5 中使用

• html 中直接引入 index.umd.js

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

• 初始化对象

  new cesium_dev_kit.initCesium({...})

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
   */

使用范例

• ES6 使用案例 https://github.com/dengxiaoning/cesium_kit_test

• H5 使用案例 https://github.com/dengxiaoning/cesium_kit_test_h5

浏览器支持

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

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

鸣谢

cesium-d3kit
drawarrowforcesium
vue3-ts-cesium-map-show

本项目包括但不限于借鉴和参考以上资料，非常感谢作者分享

项目不足与优化

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

感兴趣朋友可以一起讨论交流继续完善功能，让工作效更高效、开发更简单、生活更惬意。