2. Case

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