这是一个 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>
- html 中直接引入 index.umd.js
<script type="text/javascript" src="index.umd.js"></script>
- 初始化对象
new cesium_dev_kit.initCesium({...})
参数
cesiumGlobal
Object Ceiusm 对象containerId
String 容器 idviewerConfig
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
*/
本地开发推荐使用Chrome 80+
浏览器
支持现代(chrome,Firefox,Microsoft edge,etc.)浏览器, 不支持 IE
cesium-d3kit
drawarrowforcesium
vue3-ts-cesium-map-show
本项目包括但不限于借鉴和参考以上资料,非常感谢作者分享
- 1、cesium 工具类未使用 typeScript
- 2、未配备使用文档(请参考案例)
- 3、未作异常捕捉和处理
感兴趣朋友可以一起讨论交流继续完善功能,让工作效更高效、开发更简单、生活更惬意。