cesium_dev_kit v1.0.75

cesium_dev_kit

English | 中文

Introduction

 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.

Features

• materials
• analysis
• plotting
• dragging
• radar scan
• First-person roaming

Preview

https://benpaodehenji.com/cesiumDevKit

Install

npm install cesium_dev_kit

Import

import { initCesium } from 'cesium_dev_kit'

Use

1、Import all

The initialization of 'initCesium' allows for the acquisition of all extension modules.

1.1 The initCesium method configuration parameter list

1.2 The initCesium method returns the result

1.3 Use case

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

2、Import on demand

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'

2.1 Extension class：

• 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

2.2 Draw Use case：

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

Used in h5

• Import index.umd.js directly into html

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

• Initialize object

new cesium_dev_kit.initCesium({...})

Use example

• ES6 Use case https://github.com/dengxiaoning/cesium_kit_test

• H5 Use case https://github.com/dengxiaoning/cesium_kit_test_h5

Browser support

The 'Chrome 80+' browser is recommended for local development

Modern browsers (chrome, Firefox, Microsoft edge, etc.) are supported. Internet Explorer is not supported

Thanks

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

Project deficiency and optimization

• 1、Extended classes not using type detection (TS)
• 2、No usage documentation (please refer to the case)
• 3、No exception catching and handling

How to contribute

You can Raise an issue Or submit a Pull Request.

Pull Request:

1. Fork code
2. Create your own branch: git checkout -b feat/xxxx
3. Submit your changes: git commit -am 'feat(function): add xxxxx'
4. Push your branch: git push origin feat/xxxx
5. submit pull request

Git Contribution submission specification

• feat New features
• fix Fix bugs
• docs document
• style Format and style (changes that do not affect code operation)
• refactor Refactor
• perf Optimize related, such as improving performance and experience
• test Add test
• build Compilation related modifications, changes to project construction or dependencies
• ci Continuous integration modification
• chore Changes in the construction process or auxiliary tools
• revert Rollback to previous version
• workflow Workflow improvement
• mod Uncertain modification classification
• wip Under development
• types 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.

Star

I am grateful to the those good people who awarded me These stars, and I appreciate your ongoing support. :heart:

Fork

@sincely、@ooil929、 @InPanda、 luyufanzhi、AllenChiangCN、Liquid-Zhangliquan Thank you for your attention. :heart: