English | 中文
This is a Cesium development kit that includes functionalities such as layer loading, coordinate conversion, coordinate picking, camera control, measurement, plotting, model loading and manipulation (translation, rotation scaling), 3Dtiles view position adjustment, weather effects (rain, snow, fog), scene rendering with radar scan and information box display capabilities. It also provides features for flow line visualization, lighting effects including dynamic wall and other luminous materials rendering. Additionally it supports Post effects, visibility analysis tools for perspective analysis and slope analysis. Furthermore it offers Inundation analysis as well as volume analysis capabilities and terrain excavation functionality.
https://benpaodehenji.com/cesiumDevKit
npm install cesium_dev_kit
import { initCesium } from 'cesium_dev_kit'
The initialization of 'initCesium' allows for the acquisition of all extension modules.
Property | Type | Description | Default |
---|---|---|---|
cesiumGlobal | Object | Cesium Object | undefined |
threeGlobal | Object | THREE Object | undefined |
containerId | String | Cesium mounts dom container id | undefined |
threeContainerId | String | Three mounts dom container id | undefined |
viewerConfig | Object | viewer base configuration (same as official website) | {} |
extreaConfig | Object | Configure additional parameters, such as {logo: true// Whether to display logo, depthTest: true// Enable depth detection} | {} |
MapImageryList | Array | To configure the base image, see ImageryProvider | [] |
defaultStatic | Array | Static resource configurations used by shaders (such as image urls) | undefined |
name | Type | Description |
---|---|---|
viewer | Object | Cesium instance object |
material | Object | Material module (Modify physical material) |
graphics | Object | Graphics modules (e.g. creating PolygonGraphics objects, etc.) |
math3d | Object | Three-dimensional mathematical tool |
primitive | Object | Primitives manipulate objects (such as creating polygon using primivite, etc.) |
draw | Object | Drawing modules (e.g. polygons, rectangles) |
passEffect | Object | Post-processing module |
customCesiumPlugin | Object | Custom sensor extensions |
control | Object | Control modules (such as model positioning, dragging, etc.) |
plugin | Object | Additional plugins (such as expanding css3 animation, terrain cropping) |
base | Object | Basic modules (e.g. coordinate conversion, layer initialization, etc.) |
analysis | Object | Analysis modules (e.g., slope, direction, visibility, visibility analysis) |
attackArrowObj | Object | Plotting (attack) |
straightArrowObj | Object | Plotting (straight hit) |
pincerArrowObj | Object | Plotting(Pincer attack) |
ThreeJs | Object | Integrate ThreeJS extension objects |
// 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: 'gaodeMap02',
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>
The import of a single extension class can be tailored to meet specific functional requirements, thereby minimizing code redundancy.
import {Graphics, Material,Primitive,Draw,Analysis,CustomCesiumPlugin,PassEffect,Plugin,ThreeJs} from 'cesium_dev_kit'
- Graphics:Various graphic operations
- Material: Material manipulation
- Primitive: Cooperate with various primitive operations of shader
- Draw: Various drawing objects
- Analysis: Various analysis objects
- CustomCesiumPlugin: Custom sensor expansion
- PassEffect: Post effect object
- Plugin: Various extension functions
- ThreeJs: Integrate ThreeJS extension objects
// 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: 'gaodeMap02',
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, //Global Cesium object
containerId: 'cesiumContainer', // Container id
viewerConfig: { // Same as the official viewer configuration
infoBox: false,
shouldAnimate: true,
},
extraConfig: {// Other configuration
logo:true, // Whether to display logo
depthTest:true // Whether to enable the depth test
},
MapImageryList: tempData // Base map configuration
defaultStatic // default server address and material and other basic information configuration, please refer to 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>
- Import index.umd.js directly into html
<script type="text/javascript" src="index.umd.js"></script>
- Initialize object
new cesium_dev_kit.initCesium({...})
-
ES6 Use case https://github.com/dengxiaoning/cesium_kit_test
-
H5 Use case https://github.com/dengxiaoning/cesium_kit_test_h5
The 'Chrome 80+' browser is recommended for local development
Modern browsers (chrome, Firefox, Microsoft edge, etc.) are supported. Internet Explorer is not supported
cesium-d3kit
drawarrowforcesium
vue3-ts-cesium-map-show
This project includes but is not limited to the reference and reference of the above materials, thank you very much for sharing
- 1、Extended classes not using type detection (TS)
- 2、No usage documentation (please refer to the case)
- 3、No exception catching and handling
You can Raise an issue Or submit a Pull Request.
Pull Request:
- Fork code
- Create your own branch:
git checkout -b feat/xxxx
- Submit your changes:
git commit -am 'feat(function): add xxxxx'
- Push your branch:
git push origin feat/xxxx
- submit
pull request
feat
New featuresfix
Fix bugsdocs
documentstyle
Format and style (changes that do not affect code operation)refactor
Refactorperf
Optimize related, such as improving performance and experiencetest
Add testbuild
Compilation related modifications, changes to project construction or dependenciesci
Continuous integration modificationchore
Changes in the construction process or auxiliary toolsrevert
Rollback to previous versionworkflow
Workflow improvementmod
Uncertain modification classificationwip
Under developmenttypes
type
Welcome interested friends to join together to improve the function, so that the work is more efficient, the development is simpler, and the life is more comfortable.
I am grateful to the generous individuals who awarded me these little stars, thank you for your support ❤️
@sincely、@ooil929
、 @InPanda、 luyufanzhi
、AllenChiangCN、Liquid-Zhangliquan
... thank you for your attention ❤️