dengxiaoning/cesium_kit_test_h5

使用html页面直接引入cesium_dev_kit的index.umd.js，测试在H5中的运行情况

cesium_dev_kit

简介

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

功能展示

• 材质
• 分析
• 标绘
• 拖拽
• 雷达扫描
• 第一人称漫游

在线预览

https://www.benpaodehenji.com/cesiumDevKit

安装

npm install cesium_dev_kit

引入

import { initCesium } from 'cesium_dev_kit'

使用

1、完整引入

通过初始化initCesium 可以获取到所有扩展模块

1.1 initCesium 参数配置

Property	Type	Description	Default Value
cesiumGlobal	Object	Ceiusm 对象	''
containerId	String	dom 容器 id	''
viewerConfig	Object	viewer 基础配置（与官网一致）	{}
extreaConfig	Object	额外参数配置，如 {logo：true// 是否显示 logo, depthTest：true //开启深度检测}	{}
MapImageryList	Array	配置底图,参考 ImageryProvider	[]
defaultStatic	Array	着色器使用的静态资源配置(如图片 url)	''

1.2 initCesium 返回对象

name	Type	Description
viewer	Object	Ceiusm 实例对象
material	Object	材质模块（修改实体材质）
graphics	Object	图形模块（如创建 PolygonGraphics 对象等）
math3d	Object	三维数学工具
primitive	Object	图元操作对象（如使用 primivite 创建 polygon 等）
draw	Object	绘制模块（如多边形，矩形）
passEffect	Object	后置处理模块
customCesiumPlugin	Object	自定义传感器扩展
control	Object	控制模块（如模型位置调整，拖拽等）
plugin	Object	额外插件（如拓展 css3 的动画 ，地形裁剪）
base	Object	基础模块（如坐标转换，图层初始化等）
analysis	Object	分析模块（如坡度，坡向，可视域，通视分析）
attackArrowObj	Object	标绘（攻击）
straightArrowObj	Object	标绘（直击）
pincerArrowObj	Object	标绘（钳击）
ThreeJs	Object	集成 ThreeJS 扩展对象

1.3 使用案例

// test.vue
<template>
  <div id="cesiumContainer" class="map3d-contaner"></div>
</template>
<script>
import { initCesium } from 'cesium_dev_kit'
import { defaultStatic } from '../defaultStaticConf'
export default {
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      const tempData = [
        {
          id: 3,
          name: '高德地图02',
          type: 'UrlTemplateImageryProvider',
          classConfig: {
            url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
          },
          interfaceConfig: {},
          offset: '0,0',
          invertswitch: 0,
          filterRGB: '#ffffff',
          showswitch: 1,
          weigh: 13,
          createtime: 1624346908,
          updatetime: 1647395260,
        }
      ]
      const { viewer,material,graphics} =
          new initCesium({
            cesiumGlobal: Cesium,
            containerId: 'cesiumContainer',
            viewerConfig: {
              infoBox: false,
              shouldAnimate: true,
            },
            extraConfig: {
              depthTest: true
            },
            MapImageryList: tempData,
            defaultStatic
          })
    }
  }
}
</script>

2、按需引入

可根据功能需求导出单一扩展类，减少代码冗余

   import {Graphics, Material,Primitive,Draw,Analysis,CustomCesiumPlugin,PassEffect,Plugin,ThreeJs} from 'cesium_dev_kit'

2.1 扩展类：

• Graphics:各种图形操作
• Material: 材质操作
• Primitive: 配合 shader 的各种图元操作
• Draw: 各种绘制对象
• Analysis: 各种分析对象
• CustomCesiumPlugin: 自定义相控扩展
• PassEffect: 后期特效对象
• Plugin: 各种扩展功能
• ThreeJs: 集成 ThreeJS 扩展对象

2.2 Draw 使用案例：

// test.vue
<template>
  <div id="cesiumContainer" class="map3d-contaner"></div>
</template>
<script>
import { Draw } from 'cesium_dev_kit'
export default {
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
        const tempData = [
        {
          id: 3,
          name: '高德地图02',
          type: 'UrlTemplateImageryProvider',
          classConfig: {
            url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
          },
          interfaceConfig: {},
          offset: '0,0',
          invertswitch: 0,
          filterRGB: '#ffffff',
          showswitch: 1,
          weigh: 13,
          createtime: 1624346908,
          updatetime: 1647395260,
        }]

      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
      })

      this.c_viewer = drawObj.viewer
      this.draw = drawObj.draw
      this.draw.setDefSceneConfig()
      this.draw.setBloomLightScene()
      this.load3dTiles(drawObj.viewer)

      this.StraightArrowObj = drawObj.straightArrowObj
      this.AttackArrowObj = drawObj.attackArrowObj
      this.PincerArrowObj = drawObj.pincerArrowObj
    }
  }
}
</script>

如需在 H5 中使用

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

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

• 初始化对象

new cesium_dev_kit.initCesium({...})

使用范例

• 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、扩展类未使用类型检测(TS)
• 2、未配备使用文档（请参考案例）
• 3、未作异常捕捉和处理

欢迎感兴趣朋友加入一起完善功能，让工作效更高效、开发更简单、生活更惬意。