'init'

src/modules/animation/Animation.js

@@ -0,0 +1,45 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-12-20 16:32:22
+ */
+
+class Animation {
+  constructor(viewer) {
+    this._viewer = viewer
+    this._options = {}
+  }
+
+  _bindEvent() {}
+
+  _unbindEvent() {}
+
+  /**
+   * Start globe rotate
+   * @returns {Animation}
+   */
+  start() {
+    this._viewer.clock.shouldAnimate = true
+    this._unbindEvent()
+    if (this._options.duration) {
+      let timer = setTimeout(() => {
+        this._unbindEvent()
+        this._options.callback &&
+          this._options.callback.call(this._options.context || this)
+        clearTimeout(timer)
+      }, Number(this._options.duration) * 1e3)
+    }
+    this._bindEvent()
+    return this
+  }
+
+  /**
+   * Stop globe rotate
+   * @returns {Animation}
+   */
+  stop() {
+    this._unbindEvent()
+    return this
+  }
+}
+
+export default Animation

src/modules/animation/AnimationType.js

@@ -0,0 +1,8 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-08-01 00:12:06
+ */
+
+let AnimationType = {}
+
+export default AnimationType

src/modules/animation/index.js

@@ -0,0 +1,17 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-03-05 22:15:27
+ */
+
+export { default as Animation } from './Animation'
+export { default as AnimationType } from './AnimationType'
+
+/**
+ * types
+ */
+export { default as AroundView } from './type/AroundView'
+export { default as AroundPoint } from './type/AroundPoint'
+export { default as CircleScan } from './type/CircleScan'
+export { default as Flying } from './type/Flying'
+export { default as GlobeRotate } from './type/GlobeRotate'
+export { default as RadarScan } from './type/RadarScan'

src/modules/animation/type/AroundPoint.js

@@ -0,0 +1,73 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-03-02 22:38:10
+ */
+import { Cesium } from '../../../namespace'
+import AnimationType from '../AnimationType'
+import Animation from '../Animation'
+import { Transform } from '../../transform'
+import Parse from '../../parse/Parse.js'
+
+class AroundPoint extends Animation {
+  constructor(viewer, position, options = {}) {
+    super(viewer)
+    this._position = Parse.parsePosition(position)
+    this._options = options
+    this._heading = viewer.camera.heading
+    this._aroundAmount = 0.2
+  }
+
+  get type() {
+    return AnimationType.AROUND_POINT
+  }
+
+  set position(position) {
+    this._position = Parse.parsePosition(position)
+  }
+
+  set aroundAmount(aroundAmount) {
+    this._aroundAmount = aroundAmount
+  }
+
+  /**
+   *
+   * @private
+   */
+  _bindEvent() {
+    this._viewer.clock.onTick.addEventListener(this._onAround, this)
+  }
+
+  /**
+   *
+   * @private
+   */
+  _unbindEvent() {
+    this._viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
+    this._viewer.clock.onTick.removeEventListener(this._onAround, this)
+  }
+
+  /**
+   *
+   * @param scene
+   * @param time
+   * @private
+   */
+  _onAround(scene, time) {
+    this._heading += Cesium.Math.toRadians(this._aroundAmount)
+    if (this._heading >= Math.PI * 2 || this._heading <= -Math.PI * 2) {
+      this._heading = 0
+    }
+    this._viewer.camera.lookAt(
+      Transform.transformWGS84ToCartesian(this._position),
+      new Cesium.HeadingPitchRange(
+        this._heading,
+        Cesium.Math.toRadians(this._options.pitch || 0),
+        this._options.range || 1000
+      )
+    )
+  }
+}
+
+AnimationType.AROUND_POINT = 'around_point'
+
+export default AroundPoint

src/modules/animation/type/AroundView.js

@@ -0,0 +1,71 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-03-02 23:14:20
+ */
+
+import { Cesium } from '../../../namespace'
+import AnimationType from '../AnimationType'
+import Animation from '../Animation'
+
+class AroundView extends Animation {
+  constructor(viewer, options = {}) {
+    super(viewer)
+    this._options = options
+    this._heading = viewer.camera.heading
+    this._aroundAmount = 0.2
+  }
+
+  get type() {
+    return AnimationType.AROUND_VIEW
+  }
+
+  set aroundAmount(aroundAmount) {
+    this._aroundAmount = aroundAmount
+    return this
+  }
+
+  /**
+   *
+   * @private
+   */
+  _bindEvent() {
+    this._viewer.clock.onTick.addEventListener(this._onAround, this)
+  }
+
+  /**
+   *
+   * @private
+   */
+  _unbindEvent() {
+    this._viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
+    this._viewer.clock.onTick.removeEventListener(this._onAround, this)
+  }
+
+  /**
+   *
+   * @param scene
+   * @param time
+   * @private
+   */
+  _onAround(scene, time) {
+    this._heading += Cesium.Math.toRadians(this._aroundAmount)
+    if (this._heading >= Math.PI * 2 || this._heading <= -Math.PI * 2) {
+      this._heading = 0
+    }
+    this._viewer.camera.setView({
+      orientation: {
+        heading: this._heading,
+        pitch: this._options.pitch
+          ? Cesium.Math.toRadians(this._options.pitch)
+          : this._viewer.camera.pitch,
+        roll: this._options.roll
+          ? Cesium.Math.toRadians(this._options.roll)
+          : this._viewer.camera.roll,
+      },
+    })
+  }
+}
+
+AnimationType.AROUND_VIEW = 'around_view'
+
+export default AroundView

src/modules/animation/type/CircleScan.js

@@ -0,0 +1,87 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-12-01 20:26:02
+ */
+
+import { Cesium } from '../../../namespace'
+import AnimationType from '../AnimationType'
+import Animation from '../Animation'
+import { Util } from '../../utils'
+import { Transform } from '../../transform'
+import Parse from '../../parse/Parse.js'
+
+const CircleScanShader = require('@dc-modules/material/shader/circle/CircleScanShader.glsl')
+
+class CircleScan extends Animation {
+  constructor(viewer, position, radius, options = {}) {
+    super(viewer)
+    this._delegate = undefined
+    this._position = Parse.parsePosition(position)
+    this._radius = radius || 100
+    this._color = options.color || Cesium.Color.RED
+    this._speed = options.speed || 2
+  }
+
+  get type() {
+    return AnimationType.CIRCLE_SCAN
+  }
+
+  /**
+   *
+   * @private
+   */
+  _mountContent() {
+    let center = Transform.transformWGS84ToCartesian(this._position)
+    let up = Cesium.Ellipsoid.WGS84.geodeticSurfaceNormal(
+      center,
+      new Cesium.Cartesian3()
+    )
+    let self = this
+    this._delegate = new Cesium.PostProcessStage({
+      name: Util.uuid(),
+      fragmentShader: CircleScanShader,
+      uniforms: {
+        centerWC: function () {
+          return center
+        },
+        normalWC: function () {
+          return up
+        },
+        radius: function () {
+          return self._radius
+        },
+        speed: function () {
+          return self._speed
+        },
+        color: function () {
+          return self._color
+        },
+      },
+    })
+  }
+
+  /**
+   *
+   * @returns {CircleScan}
+   */
+  start() {
+    !this._delegate && this._mountContent()
+    this._delegate && this._viewer.scene.postProcessStages.add(this._delegate)
+    return this
+  }
+
+  /**
+   *
+   * @returns {CircleScan}
+   */
+  stop() {
+    this._delegate &&
+      this._viewer.scene.postProcessStages.remove(this._delegate)
+    this._delegate = undefined
+    return this
+  }
+}
+
+AnimationType.CIRCLE_SCAN = 'circle_scan'
+
+export default CircleScan

src/modules/animation/type/Flying.js

@@ -0,0 +1,122 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-01-09 20:21:33
+ */
+
+import { Cesium } from '../../../namespace'
+import AnimationType from '../AnimationType'
+import Animation from '../Animation'
+import { Transform } from '../../transform'
+import Parse from '../../parse/Parse.js'
+
+class Flying extends Animation {
+  constructor(viewer, options = {}) {
+    super(viewer)
+    this._options = options
+    this._positions = []
+    this._durations = [3]
+    this._currentIndex = 0
+    this._timer = undefined
+  }
+
+  get type() {
+    return AnimationType.FLYING
+  }
+
+  set positions(positions) {
+    this._positions = Parse.parsePositions(positions)
+    return this
+  }
+
+  get positions() {
+    return this._positions
+  }
+
+  set durations(durations) {
+    this._durations = durations
+    return this
+  }
+
+  get durations() {
+    return this._durations
+  }
+
+  /**
+   *
+   * @private
+   */
+  _cameraFly() {
+    let self = this
+    let camera = this._viewer.camera
+    let position = this._positions[this._currentIndex]
+    let callback = () => {
+      let nextPosition = self._positions[self._currentIndex + 1]
+      if (nextPosition) {
+        self._currentIndex++
+        if (self._currentIndex <= self._positions.length - 1) {
+          self._timer = setTimeout(() => {
+            self._cameraFly()
+          }, (self._options.dwellTime || 1) * 1e3)
+        }
+      } else if (!nextPosition && self._options.loop) {
+        self._currentIndex = 0
+        self._timer = setTimeout(() => {
+          self._cameraFly()
+        }, (self._options.dwellTime || 1) * 1e3)
+      }
+      self._options.callback && self._options.callback(self._currentIndex)
+    }
+    if (position) {
+      camera.flyTo({
+        destination: Transform.transformWGS84ToCartesian(position),
+        orientation: {
+          heading: Cesium.Math.toRadians(position.heading),
+          pitch: Cesium.Math.toRadians(position.pitch),
+          roll: Cesium.Math.toRadians(position.roll),
+        },
+        complete: callback,
+        duration:
+          this._durations.length === 1
+            ? this._durations[0]
+            : this._durations[this._currentIndex],
+      })
+    }
+  }
+
+  /**
+   *
+   * @returns {Flying}
+   */
+  start() {
+    if (this._positions && this._positions.length) {
+      this._currentIndex = 0
+      this._cameraFly()
+    }
+    return this
+  }
+
+  /**
+   *
+   * @returns {Flying}
+   */
+  pause() {
+    this._viewer.camera.cancelFlight()
+    this._timer && clearTimeout(this._timer)
+    return this
+  }
+
+  /**
+   *
+   * @returns {Flying}
+   */
+  restore() {
+    if (this._positions && this._positions.length) {
+      this._cameraFly()
+    }
+    return this
+  }
+}
+
+AnimationType.FLYING = 'flying'
+
+export default Flying

src/modules/animation/type/GlobeRotate.js

@@ -0,0 +1,62 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-30 20:47:25
+ */
+
+import { Cesium } from '../../../namespace'
+import AnimationType from '../AnimationType'
+import Animation from '../Animation'
+
+class GlobeRotate extends Animation {
+  constructor(viewer, options = {}) {
+    super(viewer)
+    this._options = options
+  }
+
+  get type() {
+    return AnimationType.GLOBE_ROTATE
+  }
+
+  /**
+   * @param scene
+   * @param time
+   * @returns {boolean}
+   * @private
+   */
+  _icrf(scene, time) {
+    if (scene.mode !== Cesium.SceneMode.SCENE3D) {
+      return true
+    }
+    let icrfToFixed = Cesium.Transforms.computeIcrfToFixedMatrix(time)
+    if (icrfToFixed) {
+      let camera = this._viewer.camera
+      let offset = Cesium.Cartesian3.clone(camera.position)
+      let transform = Cesium.Matrix4.fromRotationTranslation(icrfToFixed)
+      camera.lookAtTransform(transform, offset)
+    }
+  }
+
+  /**
+   * Bind the Event
+   * @private
+   */
+  _bindEvent() {
+    this._viewer.clock.multiplier = this._options.speed || 12 * 1000
+    this._viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
+    this._viewer.scene.postUpdate.addEventListener(this._icrf, this)
+  }
+
+  /**
+   * Unbind the Event
+   * @private
+   */
+  _unbindEvent() {
+    this._viewer.clock.multiplier = 1
+    this._viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
+    this._viewer.scene.postUpdate.removeEventListener(this._icrf, this)
+  }
+}
+
+AnimationType.GLOBE_ROTATE = 'globe_rotate'
+
+export default GlobeRotate

src/modules/animation/type/RadarScan.js

@@ -0,0 +1,100 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-12-01 20:40:02
+ */
+
+import { Cesium } from '../../../namespace'
+import AnimationType from '../AnimationType'
+import Animation from '../Animation'
+import { Util } from '../../utils'
+import { Transform } from '../../transform'
+import Parse from '../../parse/Parse.js'
+import RadarScanShader from '../../material/shader/radar/RadarScanShader.glsl'
+
+class RadarScan extends Animation {
+  constructor(viewer, position, radius, options = {}) {
+    super(viewer)
+    this._position = Parse.parsePosition(position)
+    this._radius = radius || 100
+    this._color = options.color || Cesium.Color.BLUE
+    this._speed = options.speed || 3
+    this._delegate = undefined
+  }
+
+  get type() {
+    return AnimationType.RADAR_SCAN
+  }
+
+  /**
+   *
+   * @private
+   */
+  _mountContent() {
+    let center = Transform.transformWGS84ToCartesian(this._position)
+    let up = Cesium.Ellipsoid.WGS84.geodeticSurfaceNormal(
+      center,
+      new Cesium.Cartesian3()
+    )
+    let time = new Date().getTime()
+    let self = this
+    this._delegate = new Cesium.PostProcessStage({
+      name: Util.uuid(),
+      fragmentShader: RadarScanShader,
+      uniforms: {
+        centerWC: function () {
+          return center
+        },
+        planeNormalWC: function () {
+          return up
+        },
+        lineNormalWC: function () {
+          let rotateQ = new Cesium.Quaternion()
+          let rotateM = new Cesium.Matrix3()
+          let east = Cesium.Cartesian3.cross(
+            Cesium.Cartesian3.UNIT_Z,
+            up,
+            new Cesium.Cartesian3()
+          )
+          let now = new Date().getTime()
+          let angle = Cesium.Math.PI * 2 * ((now - time) / 1e4) * self._speed
+          Cesium.Quaternion.fromAxisAngle(up, angle, rotateQ)
+          Cesium.Matrix3.fromQuaternion(rotateQ, rotateM)
+          Cesium.Matrix3.multiplyByVector(rotateM, east, east)
+          Cesium.Cartesian3.normalize(east, east)
+          return east
+        },
+        radius: function () {
+          return self._radius
+        },
+        color: function () {
+          return self._color
+        },
+      },
+    })
+  }
+
+  /**
+   *
+   * @returns {RadarScan}
+   */
+  start() {
+    !this._delegate && this._mountContent()
+    this._delegate && this._viewer.scene.postProcessStages.add(this._delegate)
+    return this
+  }
+
+  /**
+   *
+   * @returns {RadarScan}
+   */
+  stop() {
+    this._delegate &&
+      this._viewer.scene.postProcessStages.remove(this._delegate)
+    this._delegate = undefined
+    return this
+  }
+}
+
+AnimationType.RADAR_SCAN = 'radar_scan'
+
+export default RadarScan

src/modules/effect/Effect.js

@@ -0,0 +1,70 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-14 23:49:14
+ */
+
+import BlackAndWhite from './type/BlackAndWhite'
+import Bloom from './type/Bloom'
+import Brightness from './type/Brightness'
+import DepthOfField from './type/DepthOfField'
+import LensFlare from './type/LensFlare'
+import NightVision from './type/NightVision'
+import Silhouette from './type/Silhouette'
+
+class Effect {
+  constructor() {
+    this._comps = {
+      blackAndWhite: new BlackAndWhite(),
+      bloom: new Bloom(),
+      brightness: new Brightness(),
+      depthOfField: new DepthOfField(),
+      lensFlare: new LensFlare(),
+      night: new NightVision(),
+      silhouette: new Silhouette(),
+    }
+  }
+
+  get blackAndWhite() {
+    return this._comps.blackAndWhite
+  }
+
+  get bloom() {
+    return this._comps.bloom
+  }
+
+  get brightness() {
+    return this._comps.brightness
+  }
+
+  get depthOfField() {
+    return this._comps.depthOfField
+  }
+
+  get lensFlare() {
+    return this._comps.lensFlare
+  }
+
+  get night() {
+    return this._comps.night
+  }
+
+  get silhouette() {
+    return this._comps.silhouette
+  }
+
+  /**
+   *
+   * @param viewer
+   */
+  install(viewer) {
+    Object.keys(this._comps).forEach((key) => {
+      this._comps[key].addTo(viewer)
+    })
+    Object.defineProperty(viewer, 'effect', {
+      value: this,
+      writable: false,
+    })
+  }
+}
+
+export default Effect

src/modules/effect/type/BlackAndWhite.js

@@ -0,0 +1,80 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-14 23:51:47
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+
+class BlackAndWhite {
+  constructor() {
+    this._viewer = undefined
+    this._delegate = undefined
+    this._enable = false
+    this._gradations = 1
+    this._selected = []
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return 'black_and_white'
+  }
+
+  set enable(enable) {
+    this._enable = enable
+    if (enable && this._viewer && !this._delegate) {
+      this._createPostProcessStage()
+    }
+    this._delegate && (this._delegate.enabled = enable)
+  }
+
+  get enable() {
+    return this._enable
+  }
+
+  set gradations(gradations) {
+    this._gradations = gradations
+    this._delegate && (this._delegate.uniforms.gradations = gradations)
+  }
+
+  get gradations() {
+    return this._gradations
+  }
+
+  set selected(selected) {
+    this._selected = selected
+    this._delegate && (this._delegate.selected = selected)
+  }
+
+  get selected() {
+    return this._selected
+  }
+
+  /**
+   *
+   * @private
+   */
+  _createPostProcessStage() {
+    this._delegate = Cesium.PostProcessStageLibrary.createBlackAndWhiteStage()
+    if (this._delegate) {
+      this._delegate.uniforms.gradations = this._gradations
+      this._viewer.scene.postProcessStages.add(this._delegate)
+    }
+  }
+
+  /**
+   *
+   * @param viewer
+   * @returns {BlackAndWhite}
+   */
+  addTo(viewer) {
+    if (!viewer) {
+      return this
+    }
+    this._viewer = viewer
+    this._state = State.ADDED
+    return this
+  }
+}
+
+export default BlackAndWhite

src/modules/effect/type/Bloom.js

@@ -0,0 +1,130 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-14 23:50:27
+ */
+
+import State from '../../state/State'
+
+class Bloom {
+  constructor() {
+    this._viewer = undefined
+    this._enable = false
+    this._contrast = 128
+    this._brightness = -0.3
+    this._glowOnly = false
+    this._delta = 1
+    this._sigma = 3.8
+    this._stepSize = 5
+    this._selected = []
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return 'bloom'
+  }
+
+  set enable(enable) {
+    this._enable = enable
+    if (enable && this._viewer && !this._delegate) {
+      this._createPostProcessStage()
+    }
+    this._delegate && (this._delegate.enabled = enable)
+  }
+
+  get enable() {
+    return this._enable
+  }
+
+  set contrast(contrast) {
+    this._contrast = contrast
+    this._delegate && (this._delegate.uniforms.contrast = contrast)
+  }
+
+  get contrast() {
+    return this._contrast
+  }
+
+  set brightness(brightness) {
+    this._brightness = brightness
+    this._delegate && (this._delegate.uniforms.brightness = brightness)
+  }
+
+  get brightness() {
+    return this._brightness
+  }
+
+  set glowOnly(glowOnly) {
+    this._glowOnly = glowOnly
+    this._delegate && (this._delegate.uniforms.glowOnly = glowOnly)
+  }
+
+  get glowOnly() {
+    return this._glowOnly
+  }
+
+  set delta(delta) {
+    this._delta = delta
+    this._delegate && (this._delegate.uniforms.delta = delta)
+  }
+
+  get delta() {
+    return this._delta
+  }
+
+  set sigma(sigma) {
+    this._sigma = sigma
+    this._delegate && (this._delegate.uniforms.sigma = sigma)
+  }
+
+  get sigma() {
+    return this._sigma
+  }
+
+  set stepSize(stepSize) {
+    this._stepSize = stepSize
+    this._delegate && (this._delegate.uniforms.stepSize = stepSize)
+  }
+
+  get stepSize() {
+    return this._stepSize
+  }
+
+  set selected(selected) {
+    this._selected = selected
+    this._delegate && (this._delegate.selected = selected)
+  }
+
+  get selected() {
+    return this._selected
+  }
+
+  /**
+   *
+   * @private
+   */
+  _createPostProcessStage() {
+    this._delegate = this._viewer.scene.postProcessStages.bloom
+    this._delegate.uniforms.contrast = this._contrast
+    this._delegate.uniforms.brightness = this._brightness
+    this._delegate.uniforms.glowOnly = this._glowOnly
+    this._delegate.uniforms.delta = this._delta
+    this._delegate.uniforms.sigma = this._sigma
+    this._delegate.uniforms.stepSize = this._stepSize
+  }
+
+  /**
+   *
+   * @param viewer
+   * @returns {Bloom}
+   */
+  addTo(viewer) {
+    if (!viewer) {
+      return this
+    }
+    this._viewer = viewer
+    this._state = State.ADDED
+    return this
+  }
+}
+
+export default Bloom

src/modules/effect/type/Brightness.js

@@ -0,0 +1,80 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-14 23:51:47
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+
+class Brightness {
+  constructor() {
+    this._viewer = undefined
+    this._delegate = undefined
+    this._enable = false
+    this._intensity = 1
+    this._selected = []
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return 'brightness'
+  }
+
+  set enable(enable) {
+    this._enable = enable
+    if (enable && this._viewer && !this._delegate) {
+      this._createPostProcessStage()
+    }
+    this._delegate && (this._delegate.enabled = enable)
+  }
+
+  get enable() {
+    return this._enable
+  }
+
+  set intensity(intensity) {
+    this._intensity = intensity
+    this._delegate && (this._delegate.uniforms.brightness = intensity)
+  }
+
+  get intensity() {
+    return this._intensity
+  }
+
+  set selected(selected) {
+    this._selected = selected
+    this._delegate && (this._delegate.selected = selected)
+  }
+
+  get selected() {
+    return this._selected
+  }
+
+  /**
+   *
+   * @private
+   */
+  _createPostProcessStage() {
+    this._delegate = Cesium.PostProcessStageLibrary.createBrightnessStage()
+    if (this._delegate) {
+      this._delegate.uniforms.brightness = this._intensity
+      this._viewer.scene.postProcessStages.add(this._delegate)
+    }
+  }
+
+  /**
+   *
+   * @param viewer
+   * @returns {Brightness}
+   */
+  addTo(viewer) {
+    if (!viewer) {
+      return this
+    }
+    this._viewer = viewer
+    this._state = State.ADDED
+    return this
+  }
+}
+
+export default Brightness

src/modules/effect/type/DepthOfField.js

@@ -0,0 +1,126 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-14 23:51:47
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+
+class DepthOfField {
+  constructor() {
+    this._viewer = undefined
+    this._delegate = undefined
+    this._enable = false
+    this._focalDistance = 87
+    this._delta = 1
+    this._sigma = 3.8
+    this._stepSize = 2.5
+    this._selected = []
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return 'depth_of_field'
+  }
+
+  set enable(enable) {
+    this._enable = enable
+    if (
+      enable &&
+      this._viewer &&
+      Cesium.PostProcessStageLibrary.isDepthOfFieldSupported(
+        this._viewer.scene
+      ) &&
+      !this._delegate
+    ) {
+      this._createPostProcessStage()
+    }
+    this._delegate && (this._delegate.enabled = enable)
+    return this
+  }
+
+  get enable() {
+    return this._enable
+  }
+
+  set focalDistance(focalDistance) {
+    this._focalDistance = focalDistance
+    this._delegate && (this._delegate.uniforms.focalDistance = focalDistance)
+    return this
+  }
+
+  get focalDistance() {
+    return this._focalDistance
+  }
+
+  set delta(delta) {
+    this._delta = delta
+    this._delegate && (this._delegate.uniforms.delta = delta)
+    return this
+  }
+
+  get delta() {
+    return this._delta
+  }
+
+  set sigma(sigma) {
+    this._sigma = sigma
+    this._delegate && (this._delegate.uniforms.sigma = sigma)
+    return this
+  }
+
+  get sigma() {
+    return this._sigma
+  }
+
+  set stepSize(stepSize) {
+    this._stepSize = stepSize
+    this._delegate && (this._delegate.uniforms.stepSize = stepSize)
+    return this
+  }
+
+  get stepSize() {
+    return this._stepSize
+  }
+
+  set selected(selected) {
+    this._selected = selected
+    this._delegate && (this._delegate.selected = selected)
+    return this
+  }
+
+  get selected() {
+    return this._selected
+  }
+
+  /**
+   *
+   * @private
+   */
+  _createPostProcessStage() {
+    this._delegate = Cesium.PostProcessStageLibrary.createDepthOfFieldStage()
+    if (this._delegate) {
+      this._delegate.uniforms.focalDistance = this._focalDistance
+      this._delegate.uniforms.delta = this._delta
+      this._delegate.uniforms.sigma = this._sigma
+      this._delegate.uniforms.stepSize = this._stepSize
+      this._viewer.scene.postProcessStages.add(this._delegate)
+    }
+  }
+
+  /**
+   *
+   * @param viewer
+   * @returns {DepthOfField}
+   */
+  addTo(viewer) {
+    if (!viewer) {
+      return this
+    }
+    this._viewer = viewer
+    this._state = State.ADDED
+    return this
+  }
+}
+
+export default DepthOfField

src/modules/effect/type/LensFlare.js

@@ -0,0 +1,119 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-14 23:51:47
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+
+class LensFlare {
+  constructor() {
+    this._viewer = undefined
+    this._delegate = undefined
+    this._enable = false
+    this._intensity = 6
+    this._distortion = 61
+    this._dirtAmount = 0.4
+    this._haloWidth = 0.4
+    this._selected = []
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return 'lens_flare'
+  }
+
+  set enable(enable) {
+    this._enable = enable
+    if (enable && this._viewer && !this._delegate) {
+      this._createPostProcessStage()
+    }
+    this._delegate && (this._delegate.enabled = enable)
+    return this
+  }
+
+  get enable() {
+    return this._enable
+  }
+
+  set intensity(intensity) {
+    this._intensity = intensity
+    this._delegate && (this._delegate.uniforms.intensity = intensity)
+    return this
+  }
+
+  get intensity() {
+    return this._intensity
+  }
+
+  set distortion(distortion) {
+    this._distortion = distortion
+    this._delegate && (this._delegate.uniforms.distortion = distortion)
+    return this
+  }
+
+  get distortion() {
+    return this._distortion
+  }
+
+  set dirtAmount(dirtAmount) {
+    this._dirtAmount = dirtAmount
+    this._delegate && (this._delegate.uniforms.dirtAmount = dirtAmount)
+    return this
+  }
+
+  get dirtAmount() {
+    return this._dirtAmount
+  }
+
+  set haloWidth(haloWidth) {
+    this._haloWidth = haloWidth
+    this._delegate && (this._delegate.uniforms.haloWidth = haloWidth)
+    return this
+  }
+
+  get haloWidth() {
+    return this._haloWidth
+  }
+
+  set selected(selected) {
+    this._selected = selected
+    this._delegate && (this._delegate.selected = selected)
+    return this
+  }
+
+  get selected() {
+    return this._selected
+  }
+
+  /**
+   *
+   * @private
+   */
+  _createPostProcessStage() {
+    this._delegate = Cesium.PostProcessStageLibrary.createLensFlareStage()
+    if (this._delegate) {
+      this._delegate.uniforms.intensity = this._intensity
+      this._delegate.uniforms.distortion = this._distortion
+      this._delegate.uniforms.dirtAmount = this._dirtAmount
+      this._delegate.uniforms.haloWidth = this._haloWidth
+      this._viewer.scene.postProcessStages.add(this._delegate)
+    }
+  }
+
+  /**
+   *
+   * @param viewer
+   * @returns {LensFlare}
+   */
+  addTo(viewer) {
+    if (!viewer) {
+      return this
+    }
+    this._viewer = viewer
+    this._state = State.ADDED
+    return this
+  }
+}
+
+export default LensFlare

src/modules/effect/type/NightVision.js

@@ -0,0 +1,69 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-14 23:10:14
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+
+class NightVision {
+  constructor() {
+    this._enable = false
+    this._selected = []
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return 'night'
+  }
+
+  set enable(enable) {
+    this._enable = enable
+    if (enable && this._viewer && !this._delegate) {
+      this._createPostProcessStage()
+    }
+    this._delegate && (this._delegate.enabled = enable)
+    return this
+  }
+
+  get enable() {
+    return this._enable
+  }
+
+  set selected(selected) {
+    this._selected = selected
+    this._delegate && (this._delegate.selected = selected)
+    return this
+  }
+
+  get selected() {
+    return this._selected
+  }
+
+  /**
+   *
+   * @private
+   */
+  _createPostProcessStage() {
+    this._delegate = Cesium.PostProcessStageLibrary.createNightVisionStage()
+    if (this._delegate) {
+      this._viewer.scene.postProcessStages.add(this._delegate)
+    }
+  }
+
+  /**
+   *
+   * @param viewer
+   * @returns {NightVision}
+   */
+  addTo(viewer) {
+    if (!viewer) {
+      return this
+    }
+    this._viewer = viewer
+    this._state = State.ADDED
+    return this
+  }
+}
+
+export default NightVision

src/modules/effect/type/Silhouette.js

@@ -0,0 +1,102 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-14 23:51:47
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+
+class Silhouette {
+  constructor() {
+    this._viewer = undefined
+    this._delegate = undefined
+    this._enable = false
+    this._color = Cesium.Color.GREEN
+    this._length = 0.5
+    this._selected = []
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return 'silhouette'
+  }
+
+  set enable(enable) {
+    this._enable = enable
+    if (
+      enable &&
+      this._viewer &&
+      Cesium.PostProcessStageLibrary.isSilhouetteSupported(
+        this._viewer.scene
+      ) &&
+      !this._delegate
+    ) {
+      this._createPostProcessStage()
+    }
+    this._delegate && (this._delegate.enabled = enable)
+    return this
+  }
+
+  get enable() {
+    return this._enable
+  }
+
+  set color(color) {
+    this._color = color
+    this._delegate && (this._delegate.uniforms.color = color)
+    return this
+  }
+
+  get color() {
+    return this._color
+  }
+
+  set length(length) {
+    this._length = length
+    this._delegate && (this._delegate.uniforms.length = length)
+    return this
+  }
+
+  get length() {
+    return this._length
+  }
+
+  set selected(selected) {
+    this._selected = selected
+    this._delegate && (this._delegate.selected = selected)
+    return this
+  }
+
+  get selected() {
+    return this._selected
+  }
+
+  /**
+   *
+   * @private
+   */
+  _createPostProcessStage() {
+    this._delegate = Cesium.PostProcessStageLibrary.createSilhouetteStage()
+    if (this._delegate) {
+      this._delegate.uniforms.color = this._color
+      this._delegate.uniforms.length = this._length
+      this._viewer.scene.postProcessStages.add(this._delegate)
+    }
+  }
+
+  /**
+   *
+   * @param viewer
+   * @returns {Silhouette}
+   */
+  addTo(viewer) {
+    if (!viewer) {
+      return this
+    }
+    this._viewer = viewer
+    this._state = State.ADDED
+    return this
+  }
+}
+
+export default Silhouette

src/modules/effect/type/Sun.js

@@ -0,0 +1,4 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-08-01 00:22:00
+ */

src/modules/event/Event.js

@@ -0,0 +1,128 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-02 15:24:38
+ */
+
+import { Cesium } from '../../namespace'
+
+class Event {
+  constructor(types) {
+    this._types = types
+    this._cache = {}
+  }
+
+  /**
+   * @param type
+   * @param callback
+   * @param context
+   * @returns {any}
+   * @private
+   */
+  _on(type, callback, context) {
+    let event = this.getEvent(type)
+    let removeCallback = undefined
+    if (event && callback) {
+      removeCallback = event.addEventListener(callback, context || this)
+    }
+    return removeCallback
+  }
+
+  /**
+   * @param type
+   * @param callback
+   * @param context
+   * @returns {boolean}
+   * @private
+   */
+  _off(type, callback, context) {
+    let event = this.getEvent(type)
+    let removed = false
+    if (event && callback) {
+      removed = event.removeEventListener(callback, context || this)
+    }
+    return removed
+  }
+
+  /**
+   * @param type
+   * @param params
+   * @private
+   */
+  _fire(type, params) {
+    let event = this.getEvent(type)
+    if (event) {
+      event.raiseEvent(params)
+    }
+  }
+
+  /**
+   * Event registration
+   * Subclasses need to override
+   *
+   */
+  _registerEvent() {
+    Object.keys(this._types).forEach((key) => {
+      let type = this._types[key]
+      this._cache[type] = new Cesium.Event()
+    })
+  }
+
+  /**
+   * Subscribe event
+   * @param type
+   * @param callback
+   * @param context
+   * @returns remove callback function
+   */
+  on(type, callback, context) {
+    return this._on(type, callback, context)
+  }
+
+  /**
+   * Subscribe once event
+   * @param type
+   * @param callback
+   * @param context
+   */
+  once(type, callback, context) {
+    let removeCallback = this._on(
+      type,
+      (e) => {
+        callback(e)
+        removeCallback && removeCallback()
+      },
+      context
+    )
+  }
+
+  /**
+   * Unsubscribe event
+   * @param type
+   * @param callback
+   * @param context
+   * @returns Boolean
+   */
+  off(type, callback, context) {
+    return this._off(type, callback, context)
+  }
+
+  /**
+   * Trigger subscription event
+   * @param type
+   * @param params
+   */
+  fire(type, params) {
+    this._fire(type, params)
+  }
+
+  /**
+   * Returns events by type
+   * @param type
+   * @returns Event
+   */
+  getEvent(type) {
+    return this._cache[type] || undefined
+  }
+}
+
+export default Event

src/modules/event/EventType.js

@@ -0,0 +1,120 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-04-10 17:02:28
+ */
+
+import { Cesium } from '../../namespace'
+
+const BaseEventType = {
+  ADD: 'add',
+  REMOVE: 'remove',
+}
+
+const MouseEventType = {
+  LEFT_DOWN: Cesium.ScreenSpaceEventType.LEFT_DOWN,
+  LEFT_UP: Cesium.ScreenSpaceEventType.LEFT_UP,
+  CLICK: Cesium.ScreenSpaceEventType.LEFT_CLICK,
+  RIGHT_DOWN: Cesium.ScreenSpaceEventType.RIGHT_DOWN,
+  RIGHT_UP: Cesium.ScreenSpaceEventType.RIGHT_UP,
+  RIGHT_CLICK: Cesium.ScreenSpaceEventType.RIGHT_CLICK,
+  DB_CLICK: Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK,
+  MOUSE_MOVE: Cesium.ScreenSpaceEventType.MOUSE_MOVE,
+  WHEEL: Cesium.ScreenSpaceEventType.WHEEL,
+  MOUSE_OVER: 'mouseover',
+  MOUSE_OUT: 'mouseout',
+}
+
+const ViewerEventType = {
+  ADD_LAYER: 'addLayer',
+  REMOVE_LAYER: 'removeLayer',
+  ADD_EFFECT: 'addEffect',
+  REMOVE_EFFECT: 'removeEffect',
+  LEFT_DOWN: Cesium.ScreenSpaceEventType.LEFT_DOWN,
+  LEFT_UP: Cesium.ScreenSpaceEventType.LEFT_UP,
+  CLICK: Cesium.ScreenSpaceEventType.LEFT_CLICK,
+  RIGHT_DOWN: Cesium.ScreenSpaceEventType.RIGHT_DOWN,
+  RIGHT_UP: Cesium.ScreenSpaceEventType.RIGHT_UP,
+  RIGHT_CLICK: Cesium.ScreenSpaceEventType.RIGHT_CLICK,
+  DB_CLICK: Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK,
+  MOUSE_MOVE: Cesium.ScreenSpaceEventType.MOUSE_MOVE,
+  WHEEL: Cesium.ScreenSpaceEventType.WHEEL,
+}
+
+const SceneEventType = {
+  CAMERA_MOVE_END: 'cameraMoveEnd',
+  CAMERA_CHANGED: 'cameraChanged',
+  PRE_UPDATE: 'preUpdate',
+  POST_UPDATE: 'postUpdate',
+  PRE_RENDER: 'preRender',
+  POST_RENDER: 'postRender',
+  MORPH_COMPLETE: 'morphComplete',
+  CLOCK_TICK: 'clockTick',
+  RENDER_ERROR: 'renderError',
+}
+
+const OverlayEventType = {
+  ...BaseEventType,
+  LEFT_DOWN: Cesium.ScreenSpaceEventType.LEFT_DOWN,
+  LEFT_UP: Cesium.ScreenSpaceEventType.LEFT_UP,
+  CLICK: Cesium.ScreenSpaceEventType.LEFT_CLICK,
+  RIGHT_DOWN: Cesium.ScreenSpaceEventType.RIGHT_DOWN,
+  RIGHT_UP: Cesium.ScreenSpaceEventType.RIGHT_UP,
+  RIGHT_CLICK: Cesium.ScreenSpaceEventType.RIGHT_CLICK,
+  DB_CLICK: Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK,
+  MOUSE_MOVE: Cesium.ScreenSpaceEventType.MOUSE_MOVE,
+  MOUSE_OVER: 'mouseover',
+  MOUSE_OUT: 'mouseout',
+  POSITION_UPDATE: 'positionUpdate',
+}
+
+const LayerGroupEventType = BaseEventType
+
+const LayerEventType = {
+  ...BaseEventType,
+  LEFT_DOWN: Cesium.ScreenSpaceEventType.LEFT_DOWN,
+  LEFT_UP: Cesium.ScreenSpaceEventType.LEFT_UP,
+  CLICK: Cesium.ScreenSpaceEventType.LEFT_CLICK,
+  RIGHT_DOWN: Cesium.ScreenSpaceEventType.RIGHT_DOWN,
+  RIGHT_UP: Cesium.ScreenSpaceEventType.RIGHT_UP,
+  RIGHT_CLICK: Cesium.ScreenSpaceEventType.RIGHT_CLICK,
+  DB_CLICK: Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK,
+}
+
+const TrackEventType = {
+  ...BaseEventType,
+  POST_RENDER: 'postRender',
+  ACTIVATE: 'activate',
+  DEACTIVATE: 'deactivate',
+  RESET_TIME_LINE: 'restTimeLine',
+}
+
+const PathEventType = {
+  ...BaseEventType,
+  POST_RENDER: 'postRender',
+  RESET_TIME_LINE: 'restTimeLine',
+}
+
+const PlotEventType = {
+  DRAW_START: 'drawStart',
+  DRAW_STOP: 'drawStop',
+  EDIT_START: 'editStart',
+  EDIT_STOP: 'editEnd',
+  DRAW_ANCHOR: 'drawAnchor',
+  CREATE_ANCHOR: 'createAnchor',
+  UPDATE_ANCHOR: 'updateAnchor',
+  ANCHOR_MOVING: 'anchorMoving',
+  EDIT_ANCHOR_STOP: 'editAnchorStop',
+  CLEAR_ANCHOR: 'clearAnchor',
+}
+
+export {
+  MouseEventType,
+  ViewerEventType,
+  SceneEventType,
+  LayerGroupEventType,
+  LayerEventType,
+  OverlayEventType,
+  TrackEventType,
+  PathEventType,
+  PlotEventType,
+}

src/modules/event/index.js

@@ -0,0 +1,32 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-03-13 13:24:24
+ */
+
+export * from './EventType'
+export { default as Event } from './Event'
+
+/**
+ * scene
+ */
+export { default as MouseEvent } from './type/MouseEvent'
+export { default as ViewerEvent } from './type/ViewerEvent'
+export { default as SceneEvent } from './type/SceneEvent'
+
+/**
+ * layer
+ */
+export { default as LayerGroupEvent } from './type/LayerGroupEvent'
+export { default as LayerEvent } from './type/LayerEvent'
+export { default as OverlayEvent } from './type/OverlayEvent'
+
+/**
+ * animation
+ */
+export { default as TrackEvent } from './type/TrackEvent'
+export { default as PathEvent } from './type/PathEvent'
+
+/**
+ * plot
+ */
+export { default as PlotEvent } from './type/PlotEvent'

src/modules/event/type/LayerEvent.js

@@ -0,0 +1,16 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-02 14:26:35
+ */
+
+import { LayerEventType } from '../EventType'
+import Event from '../Event'
+
+class LayerEvent extends Event {
+  constructor() {
+    super(LayerEventType)
+    this._registerEvent()
+  }
+}
+
+export default LayerEvent

src/modules/event/type/LayerGroupEvent.js

@@ -0,0 +1,16 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-28 20:18:04
+ */
+
+import { LayerGroupEventType } from '../EventType'
+import Event from '../Event'
+
+class LayerGroupEvent extends Event {
+  constructor() {
+    super(LayerGroupEventType)
+    this._registerEvent()
+  }
+}
+
+export default LayerGroupEvent

src/modules/event/type/MouseEvent.js

@@ -0,0 +1,417 @@
+/**
+ * @Author: Caven
+ * @Date: 2019-12-31 16:58:31
+ */
+
+import { Cesium } from '../../../namespace'
+import { MouseEventType } from '../EventType'
+import Event from '../Event'
+
+/**
+ * Mouse events in 3D scene, optimized Cesium event model
+ */
+class MouseEvent extends Event {
+  constructor(viewer) {
+    super(MouseEventType)
+    this._viewer = viewer
+    this._selected = undefined
+    this._registerEvent()
+    this._addDefaultEvent()
+  }
+
+  /**
+   *
+   * @private
+   */
+  _registerEvent() {
+    let handler = new Cesium.ScreenSpaceEventHandler(this._viewer.canvas)
+    Object.keys(Cesium.ScreenSpaceEventType).forEach((key) => {
+      let type = Cesium.ScreenSpaceEventType[key]
+      this._cache[type] = new Cesium.Event()
+      handler.setInputAction((movement) => {
+        this._cache[type].raiseEvent(movement)
+      }, type)
+    })
+  }
+
+  /**
+   * add default event for the viewer
+   * @private
+   */
+  _addDefaultEvent() {
+    this.on(this._types.LEFT_DOWN, this._leftDownHandler, this)
+    this.on(this._types.LEFT_UP, this._leftUpHandler, this)
+    this.on(this._types.CLICK, this._clickHandler, this)
+    this.on(this._types.DB_CLICK, this._dbClickHandler, this)
+    this.on(this._types.RIGHT_DOWN, this._rightDownHandler, this)
+    this.on(this._types.RIGHT_UP, this._rightUpHandler, this)
+    this.on(this._types.RIGHT_CLICK, this._rightClickHandler, this)
+    this.on(this._types.MOUSE_MOVE, this._mouseMoveHandler, this)
+    this.on(this._types.WHEEL, this._mouseWheelHandler, this)
+  }
+
+  /**
+   *
+   * Gets the mouse information for the mouse event
+   * @param position
+   * @private
+   *
+   */
+  _getMouseInfo(position) {
+    let scene = this._viewer.scene
+    let target = scene.pick(position)
+    let cartesian = undefined
+    let surfaceCartesian = undefined
+    let wgs84Position = undefined
+    let wgs84SurfacePosition = undefined
+    if (scene.pickPositionSupported) {
+      cartesian = scene.pickPosition(position)
+    }
+    if (cartesian) {
+      let c = Cesium.Ellipsoid.WGS84.cartesianToCartographic(cartesian)
+      if (c) {
+        wgs84Position = {
+          lng: Cesium.Math.toDegrees(c.longitude),
+          lat: Cesium.Math.toDegrees(c.latitude),
+          alt: c.height,
+        }
+      }
+    }
+    if (
+      scene.mode === Cesium.SceneMode.SCENE3D &&
+      !(this._viewer.terrainProvider instanceof Cesium.EllipsoidTerrainProvider)
+    ) {
+      let ray = scene.camera.getPickRay(position)
+      surfaceCartesian = scene.globe.pick(ray, scene)
+    } else {
+      surfaceCartesian = scene.camera.pickEllipsoid(
+        position,
+        Cesium.Ellipsoid.WGS84
+      )
+    }
+    if (surfaceCartesian) {
+      let c = Cesium.Ellipsoid.WGS84.cartesianToCartographic(surfaceCartesian)
+      if (c) {
+        wgs84SurfacePosition = {
+          lng: Cesium.Math.toDegrees(c.longitude),
+          lat: Cesium.Math.toDegrees(c.latitude),
+          alt: c.height,
+        }
+      }
+    }
+
+    return {
+      target: target,
+      windowPosition: position,
+      position: cartesian,
+      wgs84Position: wgs84Position,
+      surfacePosition: surfaceCartesian,
+      wgs84SurfacePosition: wgs84SurfacePosition,
+    }
+  }
+
+  /**
+   * Gets the drill pick overlays for the mouse event
+   * @param position
+   * @returns {[]}
+   * @private
+   */
+  _getDrillInfos(position) {
+    let drillInfos = []
+    let scene = this._viewer.scene
+    let targets = scene.drillPick(position)
+    if (targets && targets.length) {
+      targets.forEach((target) => {
+        drillInfos.push(this._getTargetInfo(target))
+      })
+    }
+    return drillInfos
+  }
+
+  /**
+   * Return the Overlay id
+   * @param target
+   * @returns {any}
+   * @private
+   */
+  _getOverlayId(target) {
+    let overlayId = undefined
+
+    // for Entity
+    if (target?.id instanceof Cesium.Entity) {
+      overlayId = target.id.overlayId
+    }
+
+    // for Cesium3DTileFeature
+    else if (target instanceof Cesium.Cesium3DTileFeature) {
+      overlayId = target.tileset.overlayId
+    }
+
+    // for Cesium3DTileset
+    else if (target?.primitive instanceof Cesium.Cesium3DTileset) {
+      overlayId = target.primitive.overlayId
+    }
+
+    // for Primitve
+    else if (target?.primitive) {
+      overlayId = target.primitive.overlayId
+    }
+
+    return overlayId
+  }
+
+  /**
+   * Returns the target information for the mouse event
+   * @param target
+   * @returns {{instanceId: *, overlay: undefined, feature: undefined, layer: undefined}}
+   * @private
+   */
+  _getTargetInfo(target) {
+    let overlay = undefined
+    let layer = undefined
+    let feature = undefined
+
+    // for Entity
+    if (target?.id instanceof Cesium.Entity) {
+      layer = this._viewer
+        .getLayers()
+        .filter((item) => item.layerId === target.id.layerId)[0]
+      if (layer?.getOverlay) {
+        overlay = layer.getOverlay(target.id.overlayId)
+      }
+    }
+
+    // for Cesium3DTileFeature
+    else if (target instanceof Cesium.Cesium3DTileFeature) {
+      layer = this._viewer
+        .getLayers()
+        .filter((item) => item.layerId === target.tileset.layerId)[0]
+      feature = target
+      if (layer?.getOverlay) {
+        overlay = layer.getOverlay(target.tileset.overlayId)
+        if (feature && feature.getPropertyNames) {
+          let propertyNames = feature.getPropertyNames()
+          propertyNames.forEach((item) => {
+            overlay.attr[item] = feature.getProperty(item)
+          })
+        }
+      }
+    }
+
+    // for Cesium3DTileset
+    else if (target?.primitive instanceof Cesium.Cesium3DTileset) {
+      layer = this._viewer
+        .getLayers()
+        .filter((item) => item.layerId === target.primitive.layerId)[0]
+      if (layer?.getOverlay) {
+        overlay = layer.getOverlay(target.primitive.overlayId)
+      }
+    }
+
+    // for Primitve
+    else if (target?.primitive) {
+      layer = this._viewer
+        .getLayers()
+        .filter((item) => item.layerId === target.primitive.layerId)[0]
+      if (layer?.getOverlay) {
+        overlay = layer.getOverlay(target.primitive.overlayId)
+      }
+    }
+
+    return {
+      layer: layer,
+      overlay: overlay,
+      feature: feature,
+      instanceId: target?.instanceId,
+    }
+  }
+
+  /**
+   * Trigger subscription event
+   * @param type
+   * @param mouseInfo
+   * @private
+   */
+  _raiseEvent(type, mouseInfo = {}) {
+    let event = undefined
+    let targetInfo = this._getTargetInfo(mouseInfo.target)
+    let overlay = targetInfo?.overlay
+    let layer = targetInfo?.layer
+    // get Overlay Event
+    if (overlay?.overlayEvent) {
+      event = overlay.overlayEvent.getEvent(type)
+    }
+
+    // get Layer Event
+    if ((!event || event.numberOfListeners === 0) && layer?.layerEvent) {
+      event = layer.layerEvent.getEvent(type)
+    }
+
+    // get Viewer Event
+    if (
+      (!event || event.numberOfListeners === 0) &&
+      this._viewer?.viewerEvent
+    ) {
+      event = this._viewer.viewerEvent.getEvent(type)
+    }
+
+    event &&
+      event.numberOfListeners > 0 &&
+      event.raiseEvent({
+        ...targetInfo,
+        ...mouseInfo,
+      })
+
+    // get Drill Pick Event
+    if (overlay?.allowDrillPicking) {
+      let drillInfos = this._getDrillInfos(mouseInfo.windowPosition)
+      drillInfos.forEach((drillInfo) => {
+        let dillOverlay = drillInfo?.overlay
+        let dillLayer = drillInfo?.layer
+        if (
+          dillOverlay?.overlayId !== overlay.overlayId &&
+          dillOverlay?.overlayEvent
+        ) {
+          // get Overlay Event
+          event = dillOverlay.overlayEvent.getEvent(type)
+          // get Layer Event
+          if (
+            (!event || event.numberOfListeners === 0) &&
+            dillLayer?.layerEvent
+          ) {
+            event = dillLayer.layerEvent.getEvent(type)
+          }
+          event &&
+            event.numberOfListeners > 0 &&
+            event.raiseEvent({
+              ...drillInfo,
+              ...mouseInfo,
+            })
+        }
+      })
+    }
+  }
+
+  /**
+   * Default click event handler
+   * @param movement
+   * @returns {boolean}
+   * @private
+   */
+  _clickHandler(movement) {
+    if (!movement?.position) {
+      return false
+    }
+    let mouseInfo = this._getMouseInfo(movement.position)
+    this._raiseEvent(MouseEventType.CLICK, mouseInfo)
+  }
+
+  /**
+   * Default dbClick event handler
+   * @param movement
+   * @returns {boolean}
+   * @private
+   */
+  _dbClickHandler(movement) {
+    if (!movement?.position) {
+      return false
+    }
+    let mouseInfo = this._getMouseInfo(movement.position)
+    this._raiseEvent(MouseEventType.DB_CLICK, mouseInfo)
+  }
+
+  /**
+   * Default rightClick event handler
+   * @param movement
+   * @returns {boolean}
+   * @private
+   */
+  _rightClickHandler(movement) {
+    if (!movement?.position) {
+      return false
+    }
+    let mouseInfo = this._getMouseInfo(movement.position)
+    this._raiseEvent(MouseEventType.RIGHT_CLICK, mouseInfo)
+  }
+
+  /**
+   * Default mousemove event handler
+   * @param movement
+   * @returns {boolean}
+   * @private
+   */
+  _mouseMoveHandler(movement) {
+    if (!movement?.endPosition) {
+      return false
+    }
+    let mouseInfo = this._getMouseInfo(movement.endPosition)
+    this._viewer.canvas.style.cursor = mouseInfo.target ? 'pointer' : 'default'
+    this._raiseEvent(MouseEventType.MOUSE_MOVE, mouseInfo)
+
+    // add event for overlay
+    if (
+      !this._selected ||
+      this._getOverlayId(this._selected.target) !==
+        this._getOverlayId(mouseInfo.target)
+    ) {
+      this._raiseEvent(MouseEventType.MOUSE_OUT, this._selected)
+      this._raiseEvent(MouseEventType.MOUSE_OVER, mouseInfo)
+      this._selected = mouseInfo
+    }
+  }
+
+  /**
+   * Default mouse left down event handler
+   * @param movement
+   * @private
+   */
+  _leftDownHandler(movement) {
+    if (!movement?.position) {
+      return false
+    }
+    let mouseInfo = this._getMouseInfo(movement.position)
+    this._raiseEvent(MouseEventType.LEFT_DOWN, mouseInfo)
+  }
+
+  /**
+   * Default mouse left up event handler
+   * @param movement
+   * @private
+   */
+  _leftUpHandler(movement) {
+    this._raiseEvent(MouseEventType.LEFT_UP, { movement })
+  }
+
+  /**
+   * Default mouse right down event handler
+   * @param movement
+   * @private
+   */
+  _rightDownHandler(movement) {
+    if (!movement?.position) {
+      return false
+    }
+    let mouseInfo = this._getMouseInfo(movement.position)
+    this._raiseEvent(MouseEventType.RIGHT_DOWN, mouseInfo)
+  }
+
+  /**
+   * Default mouse right up event handler
+   * @param movement
+   * @private
+   */
+  _rightUpHandler(movement) {
+    this._raiseEvent(MouseEventType.RIGHT_UP, { movement })
+  }
+
+  /**
+   * Default mouse wheel event handler
+   * @param movement
+   * @private
+   */
+  _mouseWheelHandler(movement) {
+    this._raiseEvent(MouseEventType.WHEEL, { movement })
+  }
+}
+
+export default MouseEvent

src/modules/event/type/OverlayEvent.js

@@ -0,0 +1,17 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-02 14:26:35
+ */
+
+import { Cesium } from '../../../namespace'
+import { OverlayEventType } from '../EventType'
+import Event from '../Event'
+
+class OverlayEvent extends Event {
+  constructor() {
+    super(OverlayEventType)
+    this._registerEvent()
+  }
+}
+
+export default OverlayEvent

src/modules/event/type/PathEvent.js

@@ -0,0 +1,17 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-05-11 23:28:13
+ */
+
+import { Cesium } from '../../../namespace'
+import { PathEventType } from '../EventType'
+import Event from '../Event'
+
+class PathEvent extends Event {
+  constructor() {
+    super(PathEventType)
+    this._registerEvent()
+  }
+}
+
+export default PathEvent

src/modules/event/type/PlotEvent.js

@@ -0,0 +1,16 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-05-11 23:28:13
+ */
+
+import { PlotEventType } from '../EventType'
+import Event from '../Event'
+
+class PlotEvent extends Event {
+  constructor() {
+    super(PlotEventType)
+    this._registerEvent()
+  }
+}
+
+export default PlotEvent

src/modules/event/type/SceneEvent.js

@@ -0,0 +1,159 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-03-02 21:32:43
+ */
+
+import { SceneEventType } from '../EventType'
+import Event from '../Event'
+
+class SceneEvent extends Event {
+  constructor(viewer) {
+    super(SceneEventType)
+    this._camera = viewer.camera
+    this._scene = viewer.scene
+    this._clock = viewer.clock
+  }
+
+  /**
+   * Subscribe event
+   * @param type
+   * @param callback
+   * @param context
+   * @returns {any}
+   */
+  on(type, callback, context) {
+    let removeCallback = undefined
+    switch (type) {
+      case SceneEventType.CAMERA_MOVE_END:
+        removeCallback = this._camera.moveEnd.addEventListener(
+          callback,
+          context || this
+        )
+        break
+      case SceneEventType.CAMERA_CHANGED:
+        removeCallback = this._camera.changed.addEventListener(
+          callback,
+          context || this
+        )
+        break
+      case SceneEventType.PRE_UPDATE:
+        removeCallback = this._scene.preUpdate.addEventListener(
+          callback,
+          context || this
+        )
+        break
+      case SceneEventType.POST_UPDATE:
+        removeCallback = this._scene.postUpdate.addEventListener(
+          callback,
+          context || this
+        )
+        break
+      case SceneEventType.PRE_RENDER:
+        removeCallback = this._scene.preRender.addEventListener(
+          callback,
+          context || this
+        )
+        break
+      case SceneEventType.POST_RENDER:
+        removeCallback = this._scene.postRender.addEventListener(
+          callback,
+          context || this
+        )
+        break
+      case SceneEventType.MORPH_COMPLETE:
+        removeCallback = this._scene.morphComplete.addEventListener(
+          callback,
+          context || this
+        )
+        break
+      case SceneEventType.CLOCK_TICK:
+        removeCallback = this._clock.onTick.addEventListener(
+          callback,
+          context || this
+        )
+        break
+      case SceneEventType.RENDER_ERROR:
+        removeCallback = this._scene.renderError.addEventListener(
+          callback,
+          context || this
+        )
+        break
+      default:
+        break
+    }
+    return removeCallback
+  }
+
+  /**
+   * Unsubscribe event
+   * @param type
+   * @param callback
+   * @param context
+   * @returns {boolean}
+   */
+  off(type, callback, context) {
+    let removed = false
+    switch (type) {
+      case SceneEventType.CAMERA_MOVE_END:
+        removed = this._camera.moveEnd.removeEventListener(
+          callback,
+          context || this
+        )
+        break
+      case SceneEventType.CAMERA_CHANGED:
+        removed = this._camera.changed.removeEventListener(
+          callback,
+          context || this
+        )
+        break
+      case SceneEventType.PRE_UPDATE:
+        removed = this._scene.preUpdate.removeEventListener(
+          callback,
+          context || this
+        )
+        break
+      case SceneEventType.POST_UPDATE:
+        removed = this._scene.postUpdate.removeEventListener(
+          callback,
+          context || this
+        )
+        break
+      case SceneEventType.PRE_RENDER:
+        removed = this._scene.preRender.removeEventListener(
+          callback,
+          context || this
+        )
+        break
+      case SceneEventType.POST_RENDER:
+        removed = this._scene.postRender.removeEventListener(
+          callback,
+          context || this
+        )
+        break
+      case SceneEventType.MORPH_COMPLETE:
+        removed = this._scene.morphComplete.removeEventListener(
+          callback,
+          context || this
+        )
+        break
+      case SceneEventType.CLOCK_TICK:
+        removed = this._clock.onTick.removeEventListener(
+          callback,
+          context || this
+        )
+        break
+      case SceneEventType.RENDER_ERROR:
+        removed = this._scene.renderError.removeEventListener(
+          callback,
+          context || this
+        )
+        break
+      default:
+        break
+    }
+
+    return removed
+  }
+}
+
+export default SceneEvent

src/modules/event/type/TrackEvent.js

@@ -0,0 +1,16 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-06-08 20:37:28
+ */
+
+import { TrackEventType } from '../EventType'
+import Event from '../Event'
+
+class TrackEvent extends Event {
+  constructor() {
+    super(TrackEventType)
+    this._registerEvent()
+  }
+}
+
+export default TrackEvent

src/modules/event/type/ViewerEvent.js

@@ -0,0 +1,16 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-02 14:26:35
+ */
+
+import { ViewerEventType } from '../EventType'
+import Event from '../Event'
+
+class ViewerEvent extends Event {
+  constructor() {
+    super(ViewerEventType)
+    this._registerEvent()
+  }
+}
+
+export default ViewerEvent

src/modules/exts/BaseLayerPicker.js

@@ -0,0 +1,118 @@
+/**
+ @author : Caven Chen
+ @date : 2023-05-09
+ */
+
+import { Cesium } from '../../namespace/index.js'
+const { DeveloperError, EllipsoidTerrainProvider } = Cesium
+
+class BaseLayerPicker {
+  constructor(options) {
+    if (!options.globe) {
+      throw new DeveloperError('globe is required')
+    }
+    this._globe = options.globe
+    this._imageryProviders = []
+    this._terrainProviders = []
+    this._selectedImagery = undefined
+    this._selectedTerrain = undefined
+  }
+
+  set selectedImagery(imagery) {
+    if (!imagery || !imagery.providers) {
+      new DeveloperError('imagery format error')
+    }
+    const imageryLayers = this._globe.imageryLayers
+    if (!this._selectedImagery) {
+      for (let i = imagery.providers.length - 1; i >= 0; i--) {
+        imageryLayers.addImageryProvider(imagery.providers[i], 0)
+      }
+    } else if (
+      this._selectedImagery &&
+      imagery.id !== this._selectedImagery.id
+    ) {
+      imageryLayers.removeAll()
+      for (let i = imagery.providers.length - 1; i >= 0; i--) {
+        imageryLayers.addImageryProvider(imagery.providers[i], 0)
+      }
+    }
+    this._selectedImagery = imagery
+  }
+
+  get selectedImagery() {
+    return this._selectedImagery
+  }
+
+  set selectedTerrain(terrian) {
+    if (this.selectedImagery !== terrian) {
+      this._globe.depthTestAgainstTerrain = !(
+        terrian instanceof EllipsoidTerrainProvider
+      )
+      this._globe.terrainProvider = terrian
+      this._selectedTerrain = terrian
+    }
+  }
+
+  get selectedTerrain() {
+    return this._selectedTerrain
+  }
+
+  /**
+   *
+   * @param provider
+   * @returns {BaseLayerPicker}
+   */
+  addImageryProvider(provider) {
+    let providers = []
+    let len = this._imageryProviders.length + 1
+    if (Array.isArray(provider)) {
+      providers = provider.slice(0)
+    } else {
+      providers = [provider]
+    }
+    this._imageryProviders.push({
+      id: `dc-imagery-${len}`,
+      providers,
+    })
+    return this
+  }
+
+  /**
+   *
+   * @param provider
+   * @returns {BaseLayerPicker}
+   */
+  addTerrainProvider(provider) {
+    this._terrainProviders.push(provider)
+    return this
+  }
+
+  /**
+   *
+   * @param index
+   * @returns {BaseLayerPicker}
+   */
+  changeImagery(index) {
+    if (index > this._imageryProviders.length - 1) {
+      new DeveloperError('index error ')
+      return this
+    }
+    this.selectedImagery = this._imageryProviders[index]
+    return this
+  }
+
+  /**
+   *
+   * @param index
+   * @returns {BaseLayerPicker}
+   */
+  changeTerrain(index) {
+    if (index > this._terrainProviders.length - 1) {
+      new DeveloperError('index error ')
+      return this
+    }
+    this.selectedTerrain = this._terrainProviders[index]
+  }
+}
+
+export default BaseLayerPicker

src/modules/exts/GroundSkyBox.js

@@ -0,0 +1,189 @@
+/**
+ @author : Caven Chen
+ @date : 2023-05-09
+ */
+
+import { Cesium } from '../../namespace'
+const {
+  BoxGeometry,
+  Cartesian3,
+  defined,
+  DeveloperError,
+  GeometryPipeline,
+  Matrix3,
+  Matrix4,
+  Transforms,
+  VertexFormat,
+  BufferUsage,
+  CubeMap,
+  loadCubeMap,
+  RenderState,
+  VertexArray,
+  BlendingState,
+  SceneMode,
+  ShaderProgram,
+  ShaderSource,
+  SkyBox,
+} = Cesium
+
+const SkyBoxFS = `
+  uniform samplerCube u_cubeMap;
+  in vec3 v_texCoord;
+  void main()
+  {
+    vec4 color = czm_textureCube(u_cubeMap, normalize(v_texCoord));
+    out_FragColor = vec4(czm_gammaCorrect(color).rgb, czm_morphTime);
+  }
+`
+
+const SkyBoxVS = `
+  in vec3 position;
+  out vec3 v_texCoord;
+  uniform mat3 u_rotateMatrix;
+  void main()
+  {
+    vec3 p = czm_viewRotation * u_rotateMatrix * (czm_temeToPseudoFixed * (czm_entireFrustum.y * position));
+    gl_Position = czm_projection * vec4(p, 1.0);
+    v_texCoord = position.xyz;
+  }
+`
+
+class GroundSkyBox extends SkyBox {
+  constructor(options = {}) {
+    super(options)
+    this.offsetAngle = options?.offsetAngle || 0
+  }
+
+  update(frameState, useHdr) {
+    const that = this
+
+    if (!this.show) {
+      return undefined
+    }
+
+    if (
+      frameState.mode !== SceneMode.SCENE3D &&
+      frameState.mode !== SceneMode.MORPHING
+    ) {
+      return undefined
+    }
+
+    if (!frameState.passes.render) {
+      return undefined
+    }
+
+    const context = frameState.context
+
+    if (this._sources !== this.sources) {
+      this._sources = this.sources
+      const sources = this.sources
+
+      if (
+        !defined(sources.positiveX) ||
+        !defined(sources.negativeX) ||
+        !defined(sources.positiveY) ||
+        !defined(sources.negativeY) ||
+        !defined(sources.positiveZ) ||
+        !defined(sources.negativeZ)
+      ) {
+        throw new DeveloperError(
+          'this.sources is required and must have positiveX, negativeX, positiveY, negativeY, positiveZ, and negativeZ properties.'
+        )
+      }
+
+      if (
+        typeof sources.positiveX !== typeof sources.negativeX ||
+        typeof sources.positiveX !== typeof sources.positiveY ||
+        typeof sources.positiveX !== typeof sources.negativeY ||
+        typeof sources.positiveX !== typeof sources.positiveZ ||
+        typeof sources.positiveX !== typeof sources.negativeZ
+      ) {
+        throw new DeveloperError(
+          'this.sources properties must all be the same type.'
+        )
+      }
+
+      if (typeof sources.positiveX === 'string') {
+        // Given urls for cube-map images. Load them.
+        loadCubeMap(context, this._sources).then(function (cubeMap) {
+          that._cubeMap = that._cubeMap && that._cubeMap.destroy()
+          that._cubeMap = cubeMap
+        })
+      } else {
+        this._cubeMap = this._cubeMap && this._cubeMap.destroy()
+        this._cubeMap = new CubeMap({
+          context: context,
+          source: sources,
+        })
+      }
+    }
+
+    const command = this._command
+
+    command.modelMatrix = Transforms.eastNorthUpToFixedFrame(
+      frameState.camera.positionWC
+    )
+
+    if (this.offsetAngle !== 0) {
+      Matrix4.multiply(
+        command.modelMatrix,
+        Matrix4.fromRotationTranslation(
+          Matrix3.fromRotationZ((this.offsetAngle / 180) * Math.PI)
+        ),
+        command.modelMatrix
+      )
+    }
+
+    if (!defined(command.vertexArray)) {
+      command.uniformMap = {
+        u_cubeMap: function () {
+          return that._cubeMap
+        },
+        u_rotateMatrix: function () {
+          return Matrix4.getMatrix3(command.modelMatrix, new Matrix3())
+        },
+      }
+
+      const geometry = BoxGeometry.createGeometry(
+        BoxGeometry.fromDimensions({
+          dimensions: new Cartesian3(2.0, 2.0, 2.0),
+          vertexFormat: VertexFormat.POSITION_ONLY,
+        })
+      )
+      const attributeLocations = (this._attributeLocations =
+        GeometryPipeline.createAttributeLocations(geometry))
+
+      command.vertexArray = VertexArray.fromGeometry({
+        context: context,
+        geometry: geometry,
+        attributeLocations: attributeLocations,
+        bufferUsage: BufferUsage._DRAW,
+      })
+
+      command.renderState = RenderState.fromCache({
+        blending: BlendingState.ALPHA_BLEND,
+      })
+    }
+
+    if (!defined(command.shaderProgram) || this._useHdr !== useHdr) {
+      const fs = new ShaderSource({
+        defines: [useHdr ? 'HDR' : ''],
+        sources: [SkyBoxFS],
+      })
+      command.shaderProgram = ShaderProgram.fromCache({
+        context: context,
+        vertexShaderSource: SkyBoxVS,
+        fragmentShaderSource: fs,
+        attributeLocations: this._attributeLocations,
+      })
+      this._useHdr = useHdr
+    }
+
+    if (!defined(this._cubeMap)) {
+      return undefined
+    }
+    return command
+  }
+}
+
+export default GroundSkyBox

src/modules/exts/Viewer.js

@@ -2,7 +2,7 @@
  @author : Caven Chen
  @date : 2023-05-07
  */
-import { Cesium } from '../../namespace/index.js'
+import { Cesium } from '../../namespace'
 const {
   BoundingSphere,
   BoundingSphereState,

src/modules/exts/index.js

@@ -0,0 +1,8 @@
+/**
+ @author : Caven Chen
+ @date : 2023-05-09
+ */
+
+export { default as BaseLayerPicker } from './BaseLayerPicker.js'
+export { default as GroundSkyBox } from './GroundSkyBox.js'
+export { default as CesiumViewer } from './Viewer.js'

src/modules/history-track/Track.js

@@ -0,0 +1,426 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-19 11:21:48
+ */
+
+import { Cesium } from '../../namespace'
+import { TrackEvent, TrackEventType } from '../event'
+import State from '../state/State'
+import Parse from '../parse/Parse'
+import { Util } from '../utils'
+import { Transform } from '../transform'
+import { heading, distance } from '../math'
+import TrackViewMode from './TrackViewMode'
+
+const DEF_OPTS = {
+  clampToGround: false,
+  clampToTileset: false,
+  interpolationType: 'Linear',
+  interpolationDegree: 2,
+  endDelayTime: 0.5,
+  headingOffset: 0,
+}
+
+const DEF_PATH_STYLE = {
+  width: 2,
+  material: Cesium.Color.ORANGE,
+  clampToGround: true,
+  depthFailMaterial: Cesium.Color.ORANGE.withAlpha(0.8),
+}
+
+class Track {
+  constructor(positions, duration, callback, options) {
+    this._id = Util.uuid()
+    this._bid = undefined
+    this._positions = Parse.parsePositions(positions)
+    this._duration = duration || 20
+    this._callback = callback
+    this._options = {
+      ...DEF_OPTS,
+      ...options,
+    }
+    this._controller = undefined
+    this._sampledPosition = undefined
+    this._velocityOrientation = undefined
+    this._viewed = false
+    this._delegate = new Cesium.Entity()
+    this._pathPositions = []
+    this._path = new Cesium.Entity({
+      show: false,
+      polyline: {
+        positions: new Cesium.CallbackProperty(() => {
+          return this._pathPositions
+        }, false),
+      },
+    })
+    this._positionIndex = 0
+    this._timeLine = []
+    this._startTime = undefined
+    this._endTime = undefined
+    this._trackEvent = new TrackEvent()
+    this._trackEvent.on(TrackEventType.POST_RENDER, this._onPostRender, this)
+    this._trackEvent.on(TrackEventType.ADD, this._onAdd, this)
+    this._trackEvent.on(TrackEventType.REMOVE, this._onRemove, this)
+    this._trackEvent.on(
+      TrackEventType.RESET_TIME_LINE,
+      this._resetTimeLine,
+      this
+    )
+    this._state = State.INITIALIZED
+  }
+
+  get trackId() {
+    return this._id
+  }
+
+  set id(id) {
+    this._bid = id
+  }
+
+  get id() {
+    return this._bid
+  }
+
+  set positions(positions) {
+    this._positions = Parse.parsePositions(positions)
+    this._resetTimeLine({})
+  }
+
+  get positions() {
+    return this._positions
+  }
+
+  set duration(duration) {
+    this._duration = duration
+    this._resetTimeLine({})
+  }
+
+  get duration() {
+    return this._duration
+  }
+
+  set startTime(startTime) {
+    if (startTime instanceof Date) {
+      this._startTime = Cesium.JulianDate.fromDate(startTime)
+    } else {
+      this._startTime = startTime
+    }
+    this._resetTimeLine({})
+  }
+
+  get startTime() {
+    return this._startTime
+  }
+
+  set viewed(viewed) {
+    this._viewed = viewed
+  }
+
+  get viewed() {
+    return this._viewed
+  }
+
+  get trackEvent() {
+    return this._trackEvent
+  }
+
+  get state() {
+    return this._state
+  }
+
+  /**
+   * add to entities
+   * @param controller
+   * @private
+   */
+  _onAdd(controller) {
+    if (!controller) {
+      return false
+    }
+    this._controller = controller
+    this._controller.delegate.add(this._delegate)
+    this._controller.delegate.add(this._path)
+    !this._startTime && (this._startTime = Cesium.JulianDate.now())
+    this._state = State.ADDED
+  }
+
+  /**
+   * remove from entities
+   * @private
+   */
+  _onRemove() {
+    if (!this._controller) {
+      return false
+    }
+    this._controller.delegate.remove(this._delegate)
+    this._controller.delegate.remove(this._path)
+    this._viewed = false
+    this._startTime = undefined
+    this._state = State.REMOVED
+  }
+
+  /**
+   *
+   * @param viewer
+   * @param viewOption
+   * @private
+   */
+  _onPostRender({ viewer, viewOption }) {
+    if (!this._startTime || !this._endTime) {
+      return false
+    }
+    let now = Cesium.JulianDate.now()
+    if (Cesium.JulianDate.lessThanOrEquals(now, this._endTime)) {
+      let p = this._sampledPosition.getValue(now)
+      if (!p) {
+        return false
+      }
+      this._pathPositions.push(p)
+      if (this._options.clampToTileset) {
+        this._delegate.position = viewer.scene.clampToHeight(p, [
+          this._delegate,
+        ])
+      } else {
+        this._delegate.position = p
+      }
+      let orientation = this._velocityOrientation.getValue(now)
+      if (orientation) {
+        let quaternion = Cesium.Quaternion.fromHeadingPitchRoll(
+          new Cesium.HeadingPitchRoll(
+            Cesium.Math.toRadians(this._options.headingOffset || 0),
+            0,
+            0
+          ),
+          new Cesium.Quaternion()
+        )
+        this._delegate.orientation = Cesium.Quaternion.multiply(
+          orientation,
+          quaternion,
+          new Cesium.Quaternion()
+        )
+      }
+      let time = this._timeLine[this._positionIndex]
+      if (time) {
+        let timeDiff = Cesium.JulianDate.secondsDifference(now, time)
+        if (timeDiff >= 0 && timeDiff <= 1) {
+          let position = this._positions[this._positionIndex] || undefined
+          if (position && orientation) {
+            let mat = Cesium.Matrix3.fromQuaternion(orientation)
+            let mat4 = Cesium.Matrix4.fromRotationTranslation(mat, p)
+            let hpr = Cesium.Transforms.fixedFrameToHeadingPitchRoll(mat4)
+            position.heading = Cesium.Math.toDegrees(hpr.heading)
+            position.pitch = Cesium.Math.toDegrees(hpr.pitch)
+            position.roll = Cesium.Math.toDegrees(hpr.roll)
+          }
+          this._callback &&
+            this._callback(
+              position,
+              this._positionIndex + 1 === this._positions.length
+            )
+          this._positionIndex++
+        }
+      }
+    }
+    this._setCameraView(viewer, viewOption)
+  }
+
+  /**
+   * Sets camera position
+   * @param viewer
+   * @param viewOption
+   * @private
+   */
+  _setCameraView(viewer, viewOption) {
+    if (!this._viewed) {
+      return false
+    }
+    let now = Cesium.JulianDate.now()
+    if (Cesium.JulianDate.greaterThan(now, this._endTime)) {
+      viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
+      viewer.delegate.trackedEntity &&
+        (viewer.delegate.trackedEntity = undefined)
+      this._viewed = false
+    } else {
+      let p = this._sampledPosition.getValue(now)
+      let next_p = this._sampledPosition.getValue(
+        Cesium.JulianDate.addSeconds(now, 1 / 60, new Cesium.JulianDate())
+      )
+      if (p && next_p) {
+        if (
+          viewOption?.mode === TrackViewMode.TRACKED &&
+          viewer.delegate?.trackedEntity?.id !== this._delegate?.id
+        ) {
+          viewer.delegate.trackedEntity = this._delegate
+        } else if (viewOption?.mode === TrackViewMode.FP) {
+          viewer.camera.lookAt(
+            p,
+            new Cesium.HeadingPitchRange(
+              heading(p, next_p),
+              Cesium.Math.toRadians(viewOption?.pitch || 0),
+              viewOption?.range || 10
+            )
+          )
+        } else if (viewOption?.mode === TrackViewMode.TP) {
+          viewer.camera.lookAt(
+            p,
+            new Cesium.HeadingPitchRange(
+              0,
+              Cesium.Math.toRadians(viewOption?.pitch || -90),
+              viewOption?.range || 1000
+            )
+          )
+        }
+      }
+    }
+  }
+
+  /**
+   *
+   * @param params
+   * @returns {boolean}
+   * @private
+   */
+  _resetTimeLine(params) {
+    if (!this._startTime || !this._duration || !this._positions?.length) {
+      return false
+    }
+    let interval = 0
+    if (!params?.stopTime && !params?.duration) {
+      let v = distance(this._positions) / this._duration
+      this._timeLine = this._positions.map((item, index, arr) => {
+        if (index !== 0) {
+          interval += distance([arr[index - 1], item]) / v
+        }
+        return Cesium.JulianDate.addSeconds(
+          this._startTime,
+          interval,
+          new Cesium.JulianDate()
+        )
+      })
+      this._pathPositions = []
+      this._positionIndex = 0
+    } else if (params?.stopTime && params?.duration) {
+      this._duration += params.duration
+      this._timeLine = this._timeLine.map((item) => {
+        if (Cesium.JulianDate.greaterThan(item, params.stopTime)) {
+          item = Cesium.JulianDate.addSeconds(
+            item,
+            params.duration,
+            new Cesium.JulianDate()
+          )
+        }
+        return item
+      })
+    }
+    this._sampledPosition = new Cesium.SampledPositionProperty()
+    this._sampledPosition.addSamples(
+      this._timeLine,
+      Transform.transformWGS84ArrayToCartesianArray(this._positions)
+    )
+    this._sampledPosition.forwardExtrapolationType =
+      Cesium.ExtrapolationType.HOLD
+    /// setInterpolationOptions
+    if (this._options.interpolationType === 'Hermite') {
+      this._sampledPosition.setInterpolationOptions({
+        interpolationDegree: this._options.interpolationDegree || 2,
+        interpolationAlgorithm: Cesium.HermitePolynomialApproximation,
+      })
+    } else if (this._options.interpolationType === 'Linear') {
+      this._sampledPosition.setInterpolationOptions({
+        interpolationDegree: this._options.interpolationDegree || 1,
+        interpolationAlgorithm: Cesium.LinearApproximation,
+      })
+    } else if (this._options.interpolationType === 'Lagrange') {
+      this._sampledPosition.setInterpolationOptions({
+        interpolationDegree: this._options.interpolationDegree || 5,
+        interpolationAlgorithm: Cesium.LagrangePolynomialApproximation,
+      })
+    }
+    this._velocityOrientation = new Cesium.VelocityOrientationProperty(
+      this._sampledPosition
+    )
+    this._endTime = Cesium.JulianDate.addSeconds(
+      this._timeLine[this._timeLine.length - 1],
+      this._options.endDelayTime,
+      new Cesium.JulianDate()
+    )
+  }
+
+  /**
+   * Adds Position
+   * @param position
+   * @param duration
+   * @returns {Track}
+   */
+  addPosition(position, duration) {
+    this._positions.push(Parse.parsePosition(position))
+    this._duration += duration
+    this._resetTimeLine({})
+    return this
+  }
+
+  /**
+   * Sets model
+   * @param modelPath
+   * @param style
+   * @returns {Track}
+   */
+  setModel(modelPath, style) {
+    this._delegate.model = {
+      ...style,
+      uri: modelPath,
+      heightReference: this._options.clampToGround
+        ? Cesium.HeightReference.CLAMP_TO_GROUND
+        : Cesium.HeightReference.NONE,
+    }
+    return this
+  }
+
+  /**
+   * Sets billboard
+   * @param icon
+   * @param style
+   * @returns {Track}
+   */
+  setBillboard(icon, style) {
+    this._delegate.billboard = {
+      ...style,
+      image: icon,
+      heightReference: this._options.clampToGround
+        ? Cesium.HeightReference.CLAMP_TO_GROUND
+        : Cesium.HeightReference.NONE,
+    }
+    return this
+  }
+
+  /**
+   * Sets label
+   * @param text
+   * @param style
+   * @returns {Track}
+   */
+  setLabel(text, style) {
+    this._delegate.label = {
+      ...style,
+      text: text,
+      heightReference: this._options.clampToGround
+        ? Cesium.HeightReference.CLAMP_TO_GROUND
+        : Cesium.HeightReference.NONE,
+    }
+    return this
+  }
+
+  /**
+   *
+   * @param visible
+   * @param style
+   * @returns {Track}
+   */
+  setPath(visible, style = {}) {
+    this._path.show = !!visible
+    Util.merge(this._path.polyline, DEF_PATH_STYLE, style)
+    return this
+  }
+}
+
+export default Track

src/modules/history-track/TrackController.js

@@ -0,0 +1,240 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-04-01 10:36:36
+ */
+
+import { Cesium } from '../../namespace'
+import { SceneEventType, TrackEventType } from '../event'
+import State from '../state/State'
+import TrackViewMode from './TrackViewMode'
+
+class TrackController {
+  constructor(viewer) {
+    this._viewer = viewer
+    this._cache = {}
+    this._delegete = new Cesium.CustomDataSource('history-track-layer')
+    this._viewer.dataSources.add(this._delegete)
+    this._activedTrack = undefined
+    this._viewOption = {}
+    this._stopTime = undefined
+    this._state = State.INITIALIZED
+  }
+
+  get delegate() {
+    return this._delegete.entities
+  }
+
+  get state() {
+    return this._state
+  }
+
+  /**
+   * @private
+   */
+  _onPostRender() {
+    Object.keys(this._cache).forEach((key) => {
+      let track = this._cache[key]
+      track.trackEvent &&
+        track.trackEvent.fire(TrackEventType.POST_RENDER, {
+          viewer: this._viewer,
+          viewOption: this._viewOption,
+        })
+    })
+    this._viewer.scene.requestRender()
+  }
+
+  /**
+   *
+   * @param track
+   * @returns {TrackController}
+   */
+  addTrack(track) {
+    if (
+      track &&
+      track.trackEvent &&
+      // eslint-disable-next-line no-prototype-builtins
+      !this._cache.hasOwnProperty(track.trackId)
+    ) {
+      track.trackEvent.fire(TrackEventType.ADD, this)
+      this._cache[track.trackId] = track
+    }
+    return this
+  }
+
+  /**
+   *
+   * @param tracks
+   * @returns {TrackController}
+   */
+  addTracks(tracks) {
+    if (Array.isArray(tracks)) {
+      tracks.forEach((item) => {
+        this.addTrack(item)
+      })
+    }
+    return this
+  }
+
+  /**
+   * Returns a track
+   * @param id
+   * @returns {*|undefined}
+   */
+  getTrack(id) {
+    let filters = this.getTracks().filter((item) => item.id === id)
+    return filters && filters.length ? filters[0] : undefined
+  }
+
+  /**
+   * Removes a track
+   * @param track
+   * @returns {TrackController}
+   */
+  removeTrack(track) {
+    if (
+      track &&
+      track.trackEvent &&
+      // eslint-disable-next-line no-prototype-builtins
+      this._cache.hasOwnProperty(track.trackId)
+    ) {
+      track.trackEvent.fire(TrackEventType.REMOVE, this)
+      delete this._cache[track.trackId]
+    }
+    return this
+  }
+
+  /**
+   *
+   * @returns {*[]}
+   */
+  getTracks() {
+    let result = []
+    Object.keys(this._cache).forEach((key) => {
+      result.push(this._cache[key])
+    })
+    return result
+  }
+
+  /**
+   * Starts play all path
+   * @returns {TrackController}
+   */
+  play() {
+    let now = Cesium.JulianDate.now()
+    Object.keys(this._cache).forEach((key) => {
+      let track = this._cache[key]
+      track.startTime = now
+      track.viewed = false
+    })
+    this._activedTrack = undefined
+    this._stopTime = undefined
+    this._viewer.off(SceneEventType.POST_RENDER, this._onPostRender, this)
+    this._viewer.on(SceneEventType.POST_RENDER, this._onPostRender, this)
+    this._state = State.PLAY
+    return this
+  }
+
+  /**
+   *
+   */
+  pause() {
+    this._stopTime = Cesium.JulianDate.now()
+    this._viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
+    this._viewer.delegate.trackedEntity = undefined
+    this._viewer.off(SceneEventType.POST_RENDER, this._onPostRender, this)
+    this._state = State.PAUSE
+    return this
+  }
+
+  /**
+   *
+   */
+  restore() {
+    if (this._state !== State.PAUSE) {
+      return this
+    }
+    if (this._stopTime) {
+      let now = Cesium.JulianDate.now()
+      Object.keys(this._cache).forEach((key) => {
+        let track = this._cache[key]
+        track.trackEvent.fire(TrackEventType.RESET_TIME_LINE, {
+          stopTime: this._stopTime,
+          duration: Cesium.JulianDate.secondsDifference(now, this._stopTime),
+        })
+      })
+    }
+    this._viewer.off(SceneEventType.POST_RENDER, this._onPostRender, this)
+    this._viewer.on(SceneEventType.POST_RENDER, this._onPostRender, this)
+    this._state = State.PLAY
+    return this
+  }
+
+  // /**
+  //  *
+  //  * @param speed
+  //  * @returns {TrackController}
+  //  */
+  // changeSpeed(speed) {
+  //   this._viewer.clock.multiplier = speed
+  //   return this
+  // }
+
+  /**
+   *
+   * @param track
+   * @param viewOption
+   * @returns {TrackController}
+   */
+  viewTrack(track, viewOption = {}) {
+    // eslint-disable-next-line no-prototype-builtins
+    if (!this._cache.hasOwnProperty(track.trackId)) {
+      throw new Error('TrackController: track does not added ')
+    }
+    this._viewOption = viewOption
+    if (this._activedTrack) {
+      this._activedTrack.viewed = false
+    }
+    track.viewed = true
+    this._activedTrack = track
+    if (viewOption.mode === TrackViewMode.FREE) {
+      this._viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
+      this._viewer.delegate.trackedEntity = undefined
+    }
+    return this
+  }
+
+  /**
+   *
+   * @param track
+   * @returns {TrackController}
+   */
+  releaseTrack(track) {
+    // eslint-disable-next-line no-prototype-builtins
+    if (!this._cache.hasOwnProperty(track.trackId)) {
+      throw new Error('TrackController: track does not added ')
+    }
+    if (track.viewed) {
+      track.viewed = false
+    }
+    this._activedTrack = undefined
+    this._viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
+    this._viewer.delegate.trackedEntity = undefined
+    return this
+  }
+
+  /**
+   *
+   * @returns {TrackController}
+   */
+  clear() {
+    Object.keys(this._cache).forEach((key) => {
+      this.removeTrack(this._cache[key])
+    })
+    this._activedTrack && (this._activedTrack.viewed = false)
+    this._activedTrack = undefined
+    this._viewer.off(SceneEventType.POST_RENDER, this._onPostRender, this)
+    return this
+  }
+}
+
+export default TrackController

src/modules/history-track/TrackViewMode.js

@@ -0,0 +1,13 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-05 10:51:13
+ */
+
+const TrackViewMode = {
+  FP: '1',
+  TP: '2',
+  TRACKED: 'tracked',
+  FREE: 'free',
+}
+
+export default TrackViewMode

src/modules/history-track/index.js

@@ -0,0 +1,8 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-04-13 09:32:31
+ */
+
+export { default as TrackController } from './TrackController'
+export { default as Track } from './Track'
+export { default as TrackViewMode } from './TrackViewMode'

src/modules/icons/compass-inner.js

@@ -0,0 +1,26 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-06-06 14:05:25
+ */
+
+const compass_inner = `
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>compass-inner</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
+        <g id="compass-inner" fill-rule="nonzero">
+            <path d="M8.5,16.5 C4.081722,16.5 0.5,12.918278 0.5,8.5 C0.5,4.081722 4.081722,0.5 8.5,0.5 C12.918278,0.5 16.5,4.081722 16.5,8.5 C16.5,12.918278 12.918278,16.5 8.5,16.5 Z M8.5,15.5 C12.3659932,15.5 15.5,12.3659932 15.5,8.5 C15.5,4.63400675 12.3659932,1.5 8.5,1.5 C4.63400675,1.5 1.5,4.63400675 1.5,8.5 C1.5,12.3659932 4.63400675,15.5 8.5,15.5 Z" id="Oval-96"></path>
+            <path d="M9.92599835,7.09066832 C12.7122872,9.87695712 14.3709388,12.5452228 13.4497471,13.4664145 C12.5285555,14.3876061 9.86028979,12.7289545 7.074001,9.94266568 C4.2877122,7.15637688 2.62906055,4.48811119 3.55025221,3.56691953 C4.47144386,2.64572788 7.13970955,4.30437952 9.92599835,7.09066832 Z M9.21889157,7.7977751 C6.92836458,5.50724811 4.52075769,4.01062761 4.25735899,4.27402631 C3.99396029,4.53742501 5.49058078,6.9450319 7.78110778,9.2355589 C10.0716348,11.5260859 12.4792417,13.0227064 12.7426404,12.7593077 C13.0060391,12.495909 11.5094186,10.0883021 9.21889157,7.7977751 Z" id="Oval-96-Copy-2"></path>
+            <path d="M9.92599835,9.94266568 C7.13970955,12.7289545 4.47144386,14.3876061 3.55025221,13.4664145 C2.62906055,12.5452228 4.2877122,9.87695712 7.074001,7.09066832 C9.86028979,4.30437952 12.5285555,2.64572788 13.4497471,3.56691953 C14.3709388,4.48811119 12.7122872,7.15637688 9.92599835,9.94266568 Z M9.21889157,9.2355589 C11.5094186,6.9450319 13.0060391,4.53742501 12.7426404,4.27402631 C12.4792417,4.01062761 10.0716348,5.50724811 7.78110778,7.7977751 C5.49058078,10.0883021 3.99396029,12.495909 4.25735899,12.7593077 C4.52075769,13.0227064 6.92836458,11.5260859 9.21889157,9.2355589 Z" id="Oval-96-Copy-3"></path>
+            <path d="M15.1464466,1.1464466 L14.3453364,1.94755684 L13.9608692,2.33202401 L14.667976,3.03913077 L15.0524431,2.65466362 L15.8535534,1.8535534 L15.1464466,1.1464466 Z M2.29760014,13.995293 L1.85311902,14.4397742 L1.004311,15.2885822 L1.71141776,15.995689 L2.56022581,15.146881 L3.00470698,14.7023998 L2.29760014,13.995293 Z" id="Line"></path>
+            <circle id="Oval-432" cx="16" cy="1" r="1"></circle>
+            <circle id="Oval-432-Copy" cx="1" cy="16" r="1"></circle>
+        </g>
+    </g>
+</svg>
+`
+
+export default compass_inner

src/modules/icons/compass-outer.js

@@ -0,0 +1,29 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-06-05 16:01:22
+ */
+
+const compass_outer = `
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="162px" height="162px" viewBox="0 0 162 162" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>compass-outer</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
+        <g id="compass-outer" fill-rule="nonzero">
+            <path d="M80.8410544,161.682109 C36.1937731,161.682109 0,125.488336 0,80.8410544 C0,36.1937731 36.1937731,0 80.8410544,0 C125.488336,0 161.682109,36.1937731 161.682109,80.8410544 C161.682109,125.488336 125.488336,161.682109 80.8410544,161.682109 Z M81.1836011,134.620909 C110.696211,134.620909 134.620909,110.696211 134.620909,81.1836011 C134.620909,51.6709916 110.696211,27.7462941 81.1836011,27.7462941 C51.6709916,27.7462941 27.7462941,51.6709916 27.7462941,81.1836011 C27.7462941,110.696211 51.6709916,134.620909 81.1836011,134.620909 Z" id="Oval-108"></path>
+            <circle id="Oval-74" fill="#FFFFFF" cx="129.493683" cy="127.952092" r="1.54159147"></circle>
+            <circle id="Oval-74-Copy-3" fill="#FFFFFF" cx="129.493683" cy="35.4566038" r="1.54159147"></circle>
+            <circle id="Oval-74-Copy-5" fill="#FFFFFF" cx="30.8318294" cy="127.952092" r="1.54159147"></circle>
+            <circle id="Oval-74-Copy-4" fill="#FFFFFF" cx="30.8318294" cy="35.4566038" r="1.54159147"></circle>
+            <polygon id="N" fill="#FFFFFF" points="84.9318072 23.1238721 84.9318072 13.1321362 82.5623385 13.1321362 82.5623385 19.2984646 77.951866 13.1321362 75.7108625 13.1321362 75.7108625 23.1238721 78.0946053 23.1238721 78.0946053 16.9718176 82.6908037 23.1238721"></polygon>
+            <polygon id="Line" fill="#FFFFFF" points="143.368007 82.1093476 152.617555 82.1093476 152.617555 81.2993476 143.368007 81.2993476"></polygon>
+            <polygon id="Line-Copy-8" fill="#FFFFFF" points="9.24954884 82.1093476 18.4990976 82.1093476 18.4990976 81.2993476 9.24954884 81.2993476"></polygon>
+            <polygon id="Line" fill="#FFFFFF" points="81.2993476 143.368007 81.2993476 152.617555 82.1093476 152.617555 82.1093476 143.368007"></polygon>
+        </g>
+    </g>
+</svg>
+`
+
+export default compass_outer

src/modules/icons/compass-rotation-marker.js

@@ -0,0 +1,22 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-06-06 14:11:56
+ */
+
+const compass_rotation_marker = `
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="53px" height="53px" viewBox="0 0 53 53" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.4.3 (16044) - http://www.bohemiancoding.com/sketch -->
+    <title>compass-rotation-marker</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="compass-rotation-marker">
+            <path d="M52.4399986,26.2199993 C52.4399986,11.7390936 40.7009051,0 26.2199993,0 C11.7390936,0 0,11.7390936 0,26.2199993 C0,40.7009051 11.7390936,52.4399986 26.2199993,52.4399986 C40.7009051,52.4399986 52.4399986,40.7009051 52.4399986,26.2199993 Z" id="rotator" stroke-opacity="0.135841259" stroke="#E2A549" stroke-width="9" opacity="0.201434235"></path>
+            <path d="M0,26.2199993 C0,11.7390936 11.7390936,0 26.2199993,0 L26.2199993,9 C16.7096563,9 9,16.7096563 9,26.2199993" id="Shape" opacity="0.634561567" fill="#4990E2"></path>
+        </g>
+    </g>
+</svg>
+`
+
+export default compass_rotation_marker

src/modules/icons/decrease.js

@@ -0,0 +1,14 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-06-06 14:18:00
+ */
+
+const decrease = `
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="50px" height="6px" viewBox="0 0 50 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.4.3 (16044) - http://www.bohemiancoding.com/sketch -->
+    <title>decrease</title>
+    <path d="M46.6183575,0.657894737 L3.30112724,0.657894737 C1.44927539,0.657894737 0,1.66880618 0,2.96052632 C0,4.25224645 1.44927539,5.26315789 3.30112724,5.26315789 L46.6988728,5.26315789 C48.5507246,5.26315789 50,4.25224645 50,2.96052632 C49.9194847,1.66880618 48.4702093,0.657894737 46.6183575,0.657894737 L46.6183575,0.657894737 L46.6183575,0.657894737 Z" id="Shape"></path>
+</svg>
+`
+export default decrease

src/modules/icons/increase.js

@@ -0,0 +1,15 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-06-06 14:18:00
+ */
+
+const increase = `
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.4.3 (16044) - http://www.bohemiancoding.com/sketch -->
+    <title>increase</title>
+    <path d="M0,25 C0,25.3514939 0.131810207,25.659051 0.373462207,25.900703 C0.615114207,26.142355 0.922671379,26.2741652 1.27416517,26.2741652 L23.7258348,26.2741652 L23.7258348,48.7258348 C23.7258348,49.0773286 23.857645,49.3848858 24.099297,49.6265378 C24.3189807,49.8462214 24.6485061,50 25,50 C25.7029877,50 26.2741652,49.4288225 26.2741652,48.7258348 L26.2741652,26.2741652 L48.7258348,26.2741652 C49.4288225,26.2741652 50,25.7029877 50,25 C50,24.2970123 49.4288225,23.7258348 48.7258348,23.7258348 L26.2741652,23.7258348 L26.2741652,1.27416517 C26.2741652,0.571177517 25.7029877,0 25,0 C24.2970123,0 23.7258348,0.571177517 23.7258348,1.27416517 L23.7258348,23.7258348 L1.27416517,23.7258348 C0.571177517,23.7258348 0,24.2970123 0,25 L0,25 L0,25 L0,25 Z" id="Shape"></path>
+</svg>
+`
+
+export default increase

src/modules/icons/index.js

@@ -0,0 +1,26 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-06-05 16:35:22
+ */
+
+import logo from './logo'
+import compass_outer from './compass-outer'
+import compass_inner from './compass-inner'
+import compass_rotation_marker from './compass-rotation-marker'
+import decrease from './decrease'
+import increase from './increase'
+import refresh from './refresh'
+import splitter from './splitter'
+
+const Icons = {
+  logo,
+  compass_outer,
+  compass_inner,
+  compass_rotation_marker,
+  decrease,
+  increase,
+  refresh,
+  splitter,
+}
+
+export default Icons

src/modules/icons/logo.js

@@ -0,0 +1,9 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-12-02 19:59:35
+ */
+
+const logo = `
+data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAG5ElEQVRoQ+2Yf2xVZxnHP89py9qliPe0BUTqBrunuDEBx8QfcxuwRYcxM3HO7Y8JZUNKTweKmWyaGDBZYtwSMmnvuXRKcEMzt0WmwdllE1nclkgsyUaIUM4ZNmKihfbcDjbCpPc85rT3QG1677ltb5UlPf+e932e7/f5vu/zPO8jfMA/+YDjZ4rA/1vBKQWmFBgWAXOnex0Bu4FPAf8Evu3b1vOFgnTZHKHa1LEVgZTtEoLv9NkLfpMjs03hfMa2VucjcdkQSKTdVkGq/ebk2ghswjmxSMh2+Lb10cufgOO9AHRk7OSTw8Gajqu+beUN9GWjgJnq2qZi3JqxrRURATPtbka5w7etL066AjXprmUaGDdhyCI0WAhyHeAjHFPoMgI9lDWyr/Y3X9udD4yZcg8j2qMiewVZhmpjoeiHdiakgJny6tXQLaJ8FZiTA/auCD2q9IBWozILYdZF0KoHBXb2tTT8fDQiNanjjSpyCxr83W9ZsC0uTY+bQE3Ke1BFtwD14dkVpMNQOk63JL1RgbV13RYYxkqEO0S5AfQPasiOzAZrXxzIkqfR8LwixlaBfYEYT2aar/ld0SC2HplmzqzchKHfQpkLfD0u15eUgOl4z4DeiwY/LCSxmXIf8FusXXnP+1DReg5YCGz2beuJooMwbOGYjpDpuPuBlSrcl2m2fjncYV3KS2bJ3heSSqRcW4QUBgv9DdZfCwEzHffPwKfjAjLhLJRw3DaBltEkr3G8jYp+H5gdZFnRv9F6NZH2bso0J98oJqoJxz0gsFyRppF1IG5/UQok0t69ovoMsNu3rfsvVcqumwXje8AqlFcC1Uf7H2z4U5zTkf9n/vTErIELAy+D1BplFTf2Nl0d9kFFfbEE5rR3Xvl+dsbrCvUGZZ/vted3hZYTjrdK0N8DZxR5NGMnHy/KY55FCcdbL2j7WI9SLIEo46jqw5mWhsdC/2bK+xwS7BMkm1X9Qn9Lw5sTAX9JUbdT0HmixvasBq8FlVVHzqyr9yeUhUzHC1Pk9b6dvHow8mnvelRfEEgi+jW/ueHXpQAf2sjVltb/tqdvgfEySqvfkjw50ldhBQ5ouXnMe0+U5/ps6xuD0XeOt4OsV3gkY1s/LhX4Qds73A9Rxr8QeUNEn1aoRfkscLcKbZlma+OYCHy41V1ulHEgyjy1jrc0QDtBXvPt5C2lBB/ZMh33Z8ADw3ugMEsZQn1fs5UcE4EonytlizP2/MNR9Et9dIaDqkl7m1T1J/8eYOa7m6zTQ6q7YeKo8m3rY2MlkBLBLq8om33qm/N7wt4cOOjb1mcmI/q5BHEPor+KimBN2v2RKo+Iysa+lmTb2AjkCkwkp5k6/oML5Zo+27Sgd7IIRMc2LIiGESwPe65CqbXgJTZT3k5EmyIFJgv0cLtmyhtSAMK7sA70dd9uuDmf7xgC7maE7dEd+J8QyF3iQV8i+/3m5O3jrgOJtq4viWG8OJmX9mIRaz36CcrKHxLITSB0t283XGxbxqdAmJfLeQfY5dvWuslQYO72k1Xnqt5/CA2+CzId9ALIId+2wvwf+8W3Eo7bA1T4tmXGWhvDgrrUkeqAikbEuF/hk8CbKnJQVJtGa9fHp4Dj/gMYnMmI6tp879gx4A6r7Vwp18YAWTPYjsBJgXTV+dNPnKus2wuyZGDaFQvjeqDIZ14FEk7YWLFUIWwX7hKkPJALKwpNFQoRCXsoUdaANjLUInSKIXsGtGLPO/ZVmZqUt1pFnxKRx/qakw8XG5RRCSRS7mABi/Jv7sGyY+R7IM5JTXvXx4MBY6UIYdtxF1AO+iJq7PFbks9G+4e9B67FYEncK26433wETolQN7wfMR33JSAcMBV8hNc4b9+uol9G9VZgSc7ZKcIBQJZfhK+1kcSjFxno477dEE46iv5GJWA67pHQgoGs6bWThyJrpuN1g14VXbLa9u6PZIPsUgkGbhQxblDkNtArh9ZLN8JvA9U/XlE9fX/P6tnvjYYqehOHE44+27qzaOS5hXkUOL5FRIZaZeUVhDOonkWkH9gAVAJngekjHB5V0b2GUbGvr2newUJgctPnaCrxkm9bq8YKfjBM+TaZjnu3CMtVWQwsC1PppbVyLhfpEwodUPbsQFnl0bNNc+J7pJFzoZjxTByp2DowaGDrgfLaurmLVINz06undXevnXf+Yms95GEckzn+hgZPFzM+LESiOAJ5LAw9cIL1IPcAM3JHrgfhLdDDiswSdDHIoksm9C8Ce3RAnvI3WWfiIhz3f0IEIuOJ9rdnGEFwp6p+BeQaoA50JoRHjT6gV5VODXh+tCwUB3LSFJiI41LtLYkCpQIzHjtTBMYTtVLumVKglNEcj63/AIrz7E/FBbRAAAAAAElFTkSuQmCC
+`
+export default logo

src/modules/icons/refresh.js

@@ -0,0 +1,15 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-06-06 14:18:00
+ */
+
+const refresh = `
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.4.3 (16044) - http://www.bohemiancoding.com/sketch -->
+    <title>refresh</title>
+    <path d="M48.2758621,0 C47.2844828,0 46.5086207,0.775193846 46.5086207,1.76571923 L46.5086207,12.2308355 C42.0689655,4.78036173 34.0086207,0 25,0 C11.2068965,0 0,11.1972438 0,25.0215332 C0,38.8458226 11.2068965,50 25,50 C38.7931035,50 50,38.8027562 50,25.0215332 C50,24.0310078 49.2241379,23.2558139 48.2327587,23.2558139 C47.2413793,23.2558139 46.4655172,24.0310078 46.4655172,25.0215332 C46.4655172,36.8647717 36.8103448,46.5116279 24.9568965,46.5116279 C13.1034483,46.5116279 3.49137933,36.8217054 3.49137933,24.9784668 C3.49137933,13.1352283 13.1465517,3.48837212 25,3.48837212 C33.4913793,3.48837212 41.0775862,8.44099913 44.5258621,16.0206718 L32.1551724,16.0206718 C31.1637931,16.0206718 30.3879311,16.7958657 30.3879311,17.7863911 C30.3879311,18.7769164 31.1637931,19.5521103 32.1551724,19.5521103 L48.2327587,19.5521103 C49.2241379,19.5521103 50,18.7769164 50,17.7863911 L50,1.72265288 C50,0.775193846 49.2241379,0 48.2758621,0 L48.2758621,0 L48.2758621,0 Z" id="Shape"></path>
+</svg>
+`
+
+export default refresh

src/modules/icons/splitter.js

@@ -0,0 +1,13 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-06-06 14:18:00
+ */
+
+const splitter = `
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="19px" height="28px" viewBox="0 0 19 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path d="M0.6551724,2.3448276 L0.6551724,25.6551724 C0.6551724,26.6454761 1.4579722,27.4482759 2.4482759,27.4482759 C3.4385796,27.4482759 4.2413793,26.6454761 4.2413793,25.6551724 L4.2413793,2.3448276 C4.2413793,1.3545239 3.4385796,0.5517241 2.4482759,0.5517241 C1.4579722,0.5517241 0.6551724,1.3545239 0.6551724,2.3448276 L0.6551724,2.3448276 Z M7.6551724,2.3448276 L7.6551724,25.6551724 C7.6551724,26.6454761 8.4579722,27.4482759 9.4482759,27.4482759 C10.4385796,27.4482759 11.2413793,26.6454761 11.2413793,25.6551724 L11.2413793,2.3448276 C11.2413793,1.3545239 10.4385796,0.5517241 9.4482759,0.5517241 C8.4579722,0.5517241 7.6551724,1.3545239 7.6551724,2.3448276 L7.6551724,2.3448276 Z M14.6551724,2.3448276 L14.6551724,25.6551724 C14.6551724,26.6454761 15.4579722,27.4482759 16.4482759,27.4482759 C17.4385796,27.4482759 18.2413793,26.6454761 18.2413793,25.6551724 L18.2413793,2.3448276 C18.2413793,1.3545239 17.4385796,0.5517241 16.4482759,0.5517241 C15.4579722,0.5517241 14.6551724,1.3545239 14.6551724,2.3448276 L14.6551724,2.3448276 Z" id="splitter"></path>
+</svg>
+`
+
+export default splitter

src/modules/imagery/ImageryLayerFactory.js

@@ -0,0 +1,211 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-21 15:54:56
+ */
+
+import { Cesium } from '../../namespace'
+import ImageryType from './ImageryType'
+import AmapImageryProvider from './provider/AmapImageryProvider'
+import BaiduImageryProvider from './provider/BaiduImageryProvider'
+import GoogleImageryProvider from './provider/GoogleImageryProvider'
+import TdtImageryProvider from './provider/TdtImageryProvider'
+import TencentImageryProvider from './provider/TencentImageryProvider'
+
+class ImageryLayerFactory {
+  /**
+   * Create amap image layer
+   * @param options
+   * @returns {AmapImageryProvider}
+   */
+  static createAmapImageryLayer(options) {
+    return new AmapImageryProvider(options)
+  }
+
+  /**
+   * Create baidu image layer
+   * @param options
+   * @returns {BaiduImageryProvider}
+   */
+  static createBaiduImageryLayer(options) {
+    return new BaiduImageryProvider(options)
+  }
+
+  /**
+   * Create google image layer
+   * @param options
+   * @returns {GoogleImageryProvider}
+   */
+  static createGoogleImageryLayer(options) {
+    return new GoogleImageryProvider(options)
+  }
+
+  /**
+   * Create tdt image layer
+   * @param options
+   * @returns {TdtImageryProvider}
+   */
+  static createTdtImageryLayer(options) {
+    return new TdtImageryProvider(options)
+  }
+
+  /**
+   * Create tencent image layer
+   * @param options
+   * @returns {TencentImageryProvider}
+   */
+  static createTencentImageryLayer(options) {
+    return new TencentImageryProvider(options)
+  }
+
+  /**
+   * Create arcgis image layer
+   * @param options
+   * @returns {module:cesium.ArcGisMapServerImageryProvider}
+   */
+  static createArcGisImageryLayer(options) {
+    return new Cesium.ArcGisMapServerImageryProvider(options)
+  }
+
+  /**
+   * Create single tile image layer
+   * @param options
+   * @returns {module:cesium.SingleTileImageryProvider}
+   */
+  static createSingleTileImageryLayer(options) {
+    return new Cesium.SingleTileImageryProvider(options)
+  }
+
+  /**
+   * Create WMS image layer
+   * @param options
+   * @returns {module:cesium.WebMapServiceImageryProvider}
+   */
+  static createWMSImageryLayer(options) {
+    return new Cesium.WebMapServiceImageryProvider(options)
+  }
+
+  /**
+   * Create WMTS image layer
+   * @param options
+   * @returns {module:cesium.WebMapTileServiceImageryProvider}
+   */
+  static createWMTSImageryLayer(options) {
+    return new Cesium.WebMapTileServiceImageryProvider(options)
+  }
+
+  /**
+   * Create xyz image layer
+   * @param options
+   * @returns {module:cesium.UrlTemplateImageryProvider}
+   */
+  static createXYZImageryLayer(options) {
+    return new Cesium.UrlTemplateImageryProvider(options)
+  }
+
+  /**
+   * Create coord image layer
+   * @param options
+   * @returns {module:cesium.TileCoordinatesImageryProvider}
+   */
+  static createCoordImageryLayer(options) {
+    return new Cesium.TileCoordinatesImageryProvider(options)
+  }
+
+  /**
+   * Create grid image layer
+   * @param options
+   * @returns {module:cesium.GridImageryProvider}
+   */
+  static createGridImageryLayer(options) {
+    return new Cesium.GridImageryProvider(options)
+  }
+
+  /**
+   * Create mapbox image layer
+   * @param options
+   * @returns {module:cesium.MapboxImageryProvider}
+   */
+  static createMapboxImageryLayer(options) {
+    return new Cesium.MapboxImageryProvider(options)
+  }
+
+  /**
+   * Create mapbox style image layer
+   * @param options
+   * @returns {module:cesium.MapboxStyleImageryProvider}
+   */
+  static createMapboxStyleImageryLayer(options) {
+    return new Cesium.MapboxStyleImageryProvider(options)
+  }
+
+  /**
+   * Create TMS image layer
+   * @param options
+   * @returns {module:cesium.TileMapServiceImageryProvider}
+   */
+  static createTMSImageryLayer(options) {
+    return new Cesium.TileMapServiceImageryProvider(options)
+  }
+
+  /**
+   * Create Imagery Layer
+   * @param type
+   * @param options
+   * @returns {any}
+   */
+  static createImageryLayer(type, options) {
+    let imageryLayer = undefined
+    switch (type) {
+      case ImageryType.AMAP:
+        imageryLayer = this.createAmapImageryLayer(options)
+        break
+      case ImageryType.BAIDU:
+        imageryLayer = this.createBaiduImageryLayer(options)
+        break
+      case ImageryType.GOOGLE:
+        imageryLayer = this.createGoogleImageryLayer(options)
+        break
+      case ImageryType.TDT:
+        imageryLayer = this.createTdtImageryLayer(options)
+        break
+      case ImageryType.TENCENT:
+        imageryLayer = this.createTencentImageryLayer(options)
+        break
+      case ImageryType.ARCGIS:
+        imageryLayer = this.createArcGisImageryLayer(options)
+        break
+      case ImageryType.SINGLE_TILE:
+        imageryLayer = this.createSingleTileImageryLayer(options)
+        break
+      case ImageryType.WMS:
+        imageryLayer = this.createWMSImageryLayer(options)
+        break
+      case ImageryType.WMTS:
+        imageryLayer = this.createWMTSImageryLayer(options)
+        break
+      case ImageryType.XYZ:
+        imageryLayer = this.createXYZImageryLayer(options)
+        break
+      case ImageryType.COORD:
+        imageryLayer = this.createCoordImageryLayer(options)
+        break
+      case ImageryType.GRID:
+        imageryLayer = this.createGridImageryLayer(options)
+        break
+      case ImageryType.MAPBOX:
+        imageryLayer = this.createMapboxImageryLayer(options)
+        break
+      case ImageryType.MAPBOX_STYLE:
+        imageryLayer = this.createMapboxStyleImageryLayer(options)
+        break
+      case ImageryType.TMS:
+        imageryLayer = this.createTMSImageryLayer(options)
+        break
+      default:
+        break
+    }
+    return imageryLayer
+  }
+}
+
+export default ImageryLayerFactory

src/modules/imagery/ImageryType.js

@@ -0,0 +1,19 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-05-10 08:15:36
+ */
+
+let ImageryType = {
+  ARCGIS: 'arcgis',
+  SINGLE_TILE: 'single_tile',
+  WMS: 'wms',
+  WMTS: 'wmts',
+  XYZ: 'xyz',
+  COORD: 'coord',
+  GRID: 'grid',
+  MAPBOX: 'mapbox',
+  MAPBOX_STYLE: 'mapbox_style',
+  TMS: 'tms',
+}
+
+export default ImageryType

src/modules/imagery/index.js

@@ -0,0 +1,7 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-03-14 00:31:46
+ */
+
+export { default as ImageryType } from './ImageryType'
+export { default as ImageryLayerFactory } from './ImageryLayerFactory'

src/modules/imagery/projection/BaiduMercatorProjection.js

@@ -0,0 +1,414 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-01-30 22:41:41
+ */
+
+const EARTH_RADIUS = 6370996.81
+const MC_BAND = [12890594.86, 8362377.87, 5591021, 3481989.83, 1678043.12, 0]
+const LL_BAND = [75, 60, 45, 30, 15, 0]
+const MC2LL = [
+  [
+    1.410526172116255e-8, 8.98305509648872e-6, -1.9939833816331,
+    2.009824383106796e2, -1.872403703815547e2, 91.6087516669843,
+    -23.38765649603339, 2.57121317296198, -0.03801003308653, 1.73379812e7,
+  ],
+  [
+    -7.435856389565537e-9, 8.983055097726239e-6, -0.78625201886289,
+    96.32687599759846, -1.85204757529826, -59.36935905485877, 47.40033549296737,
+    -16.50741931063887, 2.28786674699375, 1.026014486e7,
+  ],
+  [
+    -3.030883460898826e-8, 8.98305509983578e-6, 0.30071316287616,
+    59.74293618442277, 7.357984074871, -25.38371002664745, 13.45380521110908,
+    -3.29883767235584, 0.32710905363475, 6.85681737e6,
+  ],
+  [
+    -1.981981304930552e-8, 8.983055099779535e-6, 0.03278182852591,
+    40.31678527705744, 0.65659298677277, -4.44255534477492, 0.85341911805263,
+    0.12923347998204, -0.04625736007561, 4.48277706e6,
+  ],
+  [
+    3.09191371068437e-9, 8.983055096812155e-6, 0.00006995724062,
+    23.10934304144901, -0.00023663490511, -0.6321817810242, -0.00663494467273,
+    0.03430082397953, -0.00466043876332, 2.5551644e6,
+  ],
+  [
+    2.890871144776878e-9, 8.983055095805407e-6, -0.00000003068298,
+    7.47137025468032, -0.00000353937994, -0.02145144861037, -0.00001234426596,
+    0.00010322952773, -0.00000323890364, 8.260885e5,
+  ],
+]
+const LL2MC = [
+  [
+    -0.0015702102444, 1.113207020616939e5, 1.704480524535203e15,
+    -1.033898737604234e16, 2.611266785660388e16, -3.51496691766537e16,
+    2.659570071840392e16, -1.072501245418824e16, 1.800819912950474e15, 82.5,
+  ],
+  [
+    8.277824516172526e-4, 1.113207020463578e5, 6.477955746671608e8,
+    -4.082003173641316e9, 1.077490566351142e10, -1.517187553151559e10,
+    1.205306533862167e10, -5.124939663577472e9, 9.133119359512032e8, 67.5,
+  ],
+  [
+    0.00337398766765, 1.113207020202162e5, 4.481351045890365e6,
+    -2.339375119931662e7, 7.968221547186455e7, -1.159649932797253e8,
+    9.723671115602145e7, -4.366194633752821e7, 8.477230501135234e6, 52.5,
+  ],
+  [
+    0.00220636496208, 1.113207020209128e5, 5.175186112841131e4,
+    3.796837749470245e6, 9.920137397791013e5, -1.22195221711287e6,
+    1.340652697009075e6, -6.209436990984312e5, 1.444169293806241e5, 37.5,
+  ],
+  [
+    -3.441963504368392e-4, 1.113207020576856e5, 2.782353980772752e2,
+    2.485758690035394e6, 6.070750963243378e3, 5.482118345352118e4,
+    9.540606633304236e3, -2.71055326746645e3, 1.405483844121726e3, 22.5,
+  ],
+  [
+    -3.218135878613132e-4, 1.113207020701615e5, 0.00369383431289,
+    8.237256402795718e5, 0.46104986909093, 2.351343141331292e3,
+    1.58060784298199, 8.77738589078284, 0.37238884252424, 7.45,
+  ],
+]
+
+class BaiduMercatorProjection {
+  constructor() {
+    this.isWgs84 = false
+  }
+
+  /**
+   *
+   * @param point1
+   * @param point2
+   * @returns {number}
+   */
+  getDistanceByMC(point1, point2) {
+    if (!point1 || !point2) {
+      return 0
+    }
+    point1 = this.convertMC2LL(point1)
+    if (!point1) {
+      return 0
+    }
+    let x1 = this.toRadians(point1['lng'])
+    let y1 = this.toRadians(point1['lat'])
+    point2 = this.convertMC2LL(point2)
+    if (!point2) {
+      return 0
+    }
+    let x2 = this.toRadians(point2['lng'])
+    let y2 = this.toRadians(point2['lat'])
+    return this.getDistance(x1, x2, y1, y2)
+  }
+
+  /**
+   * Calculate the distance between two points according to the latitude and longitude coordinates
+   * @param point1
+   * @param point2
+   * @returns {number|*}
+   */
+  getDistanceByLL(point1, point2) {
+    if (!point1 || !point2) {
+      return 0
+    }
+    point1['lng'] = this.getLoop(point1['lng'], -180, 180)
+    point1['lat'] = this.getRange(point1['lat'], -74, 74)
+    point2['lng'] = this.getLoop(point2['lng'], -180, 180)
+    point2['lat'] = this.getRange(point2['lat'], -74, 74)
+    let x1 = this.toRadians(point1['lng'])
+    let y1 = this.toRadians(point1['lat'])
+    let x2 = this.toRadians(point2['lng'])
+    let y2 = this.toRadians(point2['lat'])
+    return this.getDistance(x1, x2, y1, y2)
+  }
+
+  /**
+   * The plane cartesian coordinates are converted to latitude and longitude coordinates
+   * @param point
+   * @returns {Point|{lng: number, lat: number}}
+   */
+  convertMC2LL(point) {
+    if (!point) {
+      return { lng: 0, lat: 0 }
+    }
+    let lnglat = {}
+    if (this.isWgs84) {
+      lnglat.lng = (point.lng / 20037508.34) * 180
+      let mmy = (point.lat / 20037508.34) * 180
+      lnglat.lat =
+        (180 / Math.PI) *
+        (2 * Math.atan(Math.exp((mmy * Math.PI) / 180)) - Math.PI / 2)
+      return {
+        lng: lnglat['lng'].toFixed(6),
+        lat: lnglat['lat'].toFixed(6),
+      }
+    }
+
+    let temp = {
+      lng: Math.abs(point['lng']),
+      lat: Math.abs(point['lat']),
+    }
+
+    let factor = undefined
+    for (let i = 0; i < MC_BAND.length; i++) {
+      if (temp['lat'] >= MC_BAND[i]) {
+        factor = MC2LL[i]
+        break
+      }
+    }
+    lnglat = this.convertor(point, factor)
+    return {
+      lng: lnglat['lng'].toFixed(6),
+      lat: lnglat['lat'].toFixed(6),
+    }
+  }
+
+  /**
+   * The latitude and longitude coordinates are converted to plane cartesian coordinates
+   * @param point
+   * @returns {{lng: number, lat: number}|*}
+   */
+  convertLL2MC(point) {
+    if (!point) {
+      return { lng: 0, lat: 0 }
+    }
+    if (
+      point['lng'] > 180 ||
+      point['lng'] < -180 ||
+      point['lat'] > 90 ||
+      point['lat'] < -90
+    ) {
+      return point
+    }
+
+    if (this.isWgs84) {
+      let mercator = {}
+      let earthRad = 6378137.0
+      mercator.lng = ((point.lng * Math.PI) / 180) * earthRad
+      let a = (point.lat * Math.PI) / 180
+      mercator.lat =
+        (earthRad / 2) * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)))
+
+      return {
+        lng: parseFloat(mercator['lng'].toFixed(2)),
+        lat: parseFloat(mercator['lat'].toFixed(2)),
+      }
+    }
+
+    point['lng'] = this.getLoop(point['lng'], -180, 180)
+    point['lat'] = this.getRange(point['lat'], -74, 74)
+    let temp = { lng: point['lng'], lat: point['lat'] }
+    let factor = undefined
+    for (let i = 0; i < LL_BAND.length; i++) {
+      if (temp['lat'] >= LL_BAND[i]) {
+        factor = LL2MC[i]
+        break
+      }
+    }
+    if (!factor) {
+      for (let i = 0; i < LL_BAND.length; i++) {
+        if (temp['lat'] <= -LL_BAND[i]) {
+          factor = LL2MC[i]
+          break
+        }
+      }
+    }
+    let mc = this.convertor(point, factor)
+    return {
+      lng: parseFloat(mc['lng'].toFixed(2)),
+      lat: parseFloat(mc['lat'].toFixed(2)),
+    }
+  }
+
+  /**
+   *
+   * @param fromPoint
+   * @param factor
+   * @returns {{lng: *, lat: *}}
+   */
+  convertor(fromPoint, factor) {
+    if (!fromPoint || !factor) {
+      return { lng: 0, lat: 0 }
+    }
+    let x = factor[0] + factor[1] * Math.abs(fromPoint['lng'])
+    let temp = Math.abs(fromPoint['lat']) / factor[9]
+    let y =
+      factor[2] +
+      factor[3] * temp +
+      factor[4] * temp * temp +
+      factor[5] * temp * temp * temp +
+      factor[6] * temp * temp * temp * temp +
+      factor[7] * temp * temp * temp * temp * temp +
+      factor[8] * temp * temp * temp * temp * temp * temp
+    x *= fromPoint['lng'] < 0 ? -1 : 1
+    y *= fromPoint['lat'] < 0 ? -1 : 1
+    return {
+      lng: x,
+      lat: y,
+    }
+  }
+
+  /**
+   *
+   * @param x1
+   * @param x2
+   * @param y1
+   * @param y2
+   * @returns {number}
+   */
+  getDistance(x1, x2, y1, y2) {
+    return (
+      EARTH_RADIUS *
+      Math.acos(
+        Math.sin(y1) * Math.sin(y2) +
+          Math.cos(y1) * Math.cos(y2) * Math.cos(x2 - x1)
+      )
+    )
+  }
+
+  /**
+   *
+   * @param deg
+   * @returns {number}
+   */
+  toRadians(deg) {
+    return (Math.PI * deg) / 180
+  }
+
+  /**
+   *
+   * @param rad
+   * @returns {number}
+   */
+  toDegrees(rad) {
+    return (180 * rad) / Math.PI
+  }
+
+  /**
+   *
+   * @param v
+   * @param a
+   * @param b
+   * @returns {number}
+   */
+  getRange(v, a, b) {
+    if (a != null) {
+      v = Math.max(v, a)
+    }
+    if (b != null) {
+      v = Math.min(v, b)
+    }
+    return v
+  }
+
+  /**
+   *
+   * @param v
+   * @param a
+   * @param b
+   * @returns {*}
+   */
+  getLoop(v, a, b) {
+    while (v > b) {
+      v -= b - a
+    }
+    while (v < a) {
+      v += b - a
+    }
+    return v
+  }
+
+  /**
+   *
+   * @param point
+   * @returns {{lng: number, lat: number}|*}
+   */
+  lngLatToMercator(point) {
+    return this.convertLL2MC(point)
+  }
+
+  /**
+   *
+   * @param point
+   * @returns {{x: (number|*), y: (number|*)}}
+   */
+  lngLatToPoint(point) {
+    let mercator = this.convertLL2MC(point)
+    return {
+      x: mercator['lng'],
+      y: mercator['lat'],
+    }
+  }
+
+  /**
+   * WebMercator transforms to latitude and longitude
+   * @param point
+   * @returns {Point|{lng: number, lat: number}}
+   */
+  mercatorToLngLat(point) {
+    return this.convertMC2LL(point)
+  }
+
+  /**
+   *
+   * @param point
+   * @returns {Point|{lng: number, lat: number}}
+   */
+  pointToLngLat(point) {
+    let mercator = { lng: point.x, lat: point.y }
+    return this.convertMC2LL(mercator)
+  }
+
+  /**
+   * Latitude and longitude coordinates  transforms to  pixel coordinates
+   * @param point
+   * @param zoom
+   * @param mapCenter
+   * @param mapSize
+   * @returns {{x: number, y: number}}
+   */
+  pointToPixel(point, zoom, mapCenter, mapSize) {
+    if (!point) {
+      return { x: 0, y: 0 }
+    }
+    point = this.lngLatToMercator(point)
+    let zoomUnits = this.getZoomUnits(zoom)
+    let x = Math.round(
+      (point['lng'] - mapCenter['lng']) / zoomUnits + mapSize.width / 2
+    )
+    let y = Math.round(
+      (mapCenter['lat'] - point['lat']) / zoomUnits + mapSize.height / 2
+    )
+    return { x, y }
+  }
+
+  /**
+   * Pixel coordinates transforms to latitude and longitude coordinates
+   * @param pixel
+   * @param zoom
+   * @param mapCenter
+   * @param mapSize
+   * @returns {Point|{lng: number, lat: number}}
+   */
+  pixelToPoint(pixel, zoom, mapCenter, mapSize) {
+    if (!pixel) {
+      return { lng: 0, lat: 0 }
+    }
+    let zoomUnits = this.getZoomUnits(zoom)
+    let lng = mapCenter['lng'] + zoomUnits * (pixel.x - mapSize.width / 2)
+    let lat = mapCenter['lat'] - zoomUnits * (pixel.y - mapSize.height / 2)
+    let point = { lng, lat }
+    return this.mercatorToLngLat(point)
+  }
+
+  /**
+   *
+   * @param zoom
+   * @returns {number}
+   */
+  getZoomUnits(zoom) {
+    return Math.pow(2, 18 - zoom)
+  }
+}
+
+export default BaiduMercatorProjection

src/modules/imagery/provider/AmapImageryProvider.js

@@ -0,0 +1,34 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-15 20:31:28
+ */
+
+import { Cesium } from '@dc-modules/namespace'
+import ImageryType from '../ImageryType'
+import AmapMercatorTilingScheme from '../tiling-scheme/AmapMercatorTilingScheme'
+
+const TILE_URL = {
+  img: '//webst{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
+  elec: '//webrd{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
+  cva: '//webst{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
+}
+
+class AmapImageryProvider extends Cesium.UrlTemplateImageryProvider {
+  constructor(options = {}) {
+    options['url'] =
+      options.url ||
+      [
+        options.protocol || '',
+        TILE_URL[options.style] || TILE_URL['elec'],
+      ].join('')
+    options['subdomains'] = options.subdomains || ['01', '02', '03', '04']
+    if (options.crs === 'WGS84') {
+      options['tilingScheme'] = new AmapMercatorTilingScheme()
+    }
+    super(options)
+  }
+}
+
+ImageryType.AMAP = 'amap'
+
+export default AmapImageryProvider

src/modules/imagery/provider/BaiduImageryProvider.js

@@ -0,0 +1,176 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-15 20:27:27
+ */
+
+import { Cesium } from '../../../namespace'
+import ImageryType from '../ImageryType'
+import BaiduMercatorTilingScheme from '../tiling-scheme/BaiduMercatorTilingScheme'
+
+const TILE_URL = {
+  img: '//shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46',
+  vec: '//online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=sl&v=020',
+  custom:
+    '//api{s}.map.bdimg.com/customimage/tile?&x={x}&y={y}&z={z}&scale=1&customid={style}',
+  traffic:
+    '//its.map.baidu.com:8002/traffic/TrafficTileService?time={time}&label={labelStyle}&v=016&level={z}&x={x}&y={y}&scaler=2',
+}
+
+class BaiduImageryProvider {
+  constructor(options = {}) {
+    this._url =
+      options.url ||
+      [
+        options.protocol || '',
+        TILE_URL[options.style] || TILE_URL['custom'],
+      ].join('')
+    this._labelStyle = options.labelStyle || 'web2D'
+    this._tileWidth = 256
+    this._tileHeight = 256
+    this._maximumLevel = 18
+    this._crs = options.crs || 'BD09'
+    if (options.crs === 'WGS84') {
+      let resolutions = []
+      for (let i = 0; i < 19; i++) {
+        resolutions[i] = 256 * Math.pow(2, 18 - i)
+      }
+      this._tilingScheme = new BaiduMercatorTilingScheme({
+        resolutions,
+        rectangleSouthwestInMeters: new Cesium.Cartesian2(
+          -20037726.37,
+          -12474104.17
+        ),
+        rectangleNortheastInMeters: new Cesium.Cartesian2(
+          20037726.37,
+          12474104.17
+        ),
+      })
+    } else {
+      this._tilingScheme = new Cesium.WebMercatorTilingScheme({
+        rectangleSouthwestInMeters: new Cesium.Cartesian2(-33554054, -33746824),
+        rectangleNortheastInMeters: new Cesium.Cartesian2(33554054, 33746824),
+      })
+    }
+    this._rectangle = this._tilingScheme.rectangle
+    this._credit = undefined
+    this._token = undefined
+    this._style = options.style || 'normal'
+    this._errorEvent = new Cesium.Event()
+  }
+
+  get url() {
+    return this._url
+  }
+
+  get token() {
+    return this._token
+  }
+
+  get tileWidth() {
+    if (!this.ready) {
+      throw new Cesium.DeveloperError(
+        'tileWidth must not be called before the imagery provider is ready.'
+      )
+    }
+    return this._tileWidth
+  }
+
+  get tileHeight() {
+    if (!this.ready) {
+      throw new Cesium.DeveloperError(
+        'tileHeight must not be called before the imagery provider is ready.'
+      )
+    }
+    return this._tileHeight
+  }
+
+  get maximumLevel() {
+    if (!this.ready) {
+      throw new Cesium.DeveloperError(
+        'maximumLevel must not be called before the imagery provider is ready.'
+      )
+    }
+    return this._maximumLevel
+  }
+
+  get minimumLevel() {
+    if (!this.ready) {
+      throw new Cesium.DeveloperError(
+        'minimumLevel must not be called before the imagery provider is ready.'
+      )
+    }
+    return 0
+  }
+
+  get tilingScheme() {
+    if (!this.ready) {
+      throw new Cesium.DeveloperError(
+        'tilingScheme must not be called before the imagery provider is ready.'
+      )
+    }
+    return this._tilingScheme
+  }
+
+  get rectangle() {
+    if (!this.ready) {
+      throw new Cesium.DeveloperError(
+        'rectangle must not be called before the imagery provider is ready.'
+      )
+    }
+    return this._rectangle
+  }
+
+  get ready() {
+    return !!this._url
+  }
+
+  get credit() {
+    return this._credit
+  }
+
+  get hasAlphaChannel() {
+    return true
+  }
+
+  get errorEvent() {
+    return this._errorEvent
+  }
+
+  getTileCredits(x, y, level) {}
+
+  /**
+   * Request Image
+   * @param x
+   * @param y
+   * @param level
+   * @returns {Promise<HTMLImageElement | HTMLCanvasElement>}
+   */
+  requestImage(x, y, level) {
+    if (!this.ready) {
+      throw new Cesium.DeveloperError(
+        'requestImage must not be called before the imagery provider is ready.'
+      )
+    }
+    let xTiles = this._tilingScheme.getNumberOfXTilesAtLevel(level)
+    let yTiles = this._tilingScheme.getNumberOfYTilesAtLevel(level)
+    let url = this._url
+      .replace('{z}', level)
+      .replace('{s}', String(1))
+      .replace('{style}', this._style)
+      .replace('{labelStyle}', this._labelStyle)
+      .replace('{time}', String(new Date().getTime()))
+
+    if (this._crs === 'WGS84') {
+      url = url.replace('{x}', String(x)).replace('{y}', String(-y))
+    } else {
+      url = url
+        .replace('{x}', String(x - xTiles / 2))
+        .replace('{y}', String(yTiles / 2 - y - 1))
+    }
+    return Cesium.ImageryProvider.loadImage(this, url)
+  }
+}
+
+ImageryType.BAIDU = 'baidu'
+
+export default BaiduImageryProvider

src/modules/imagery/provider/GoogleImageryProvider.js

@@ -0,0 +1,30 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-21 16:06:14
+ */
+
+import { Cesium } from '../../../namespace'
+import ImageryType from '../ImageryType'
+
+const TILE_URL = {
+  img: '//mt{s}.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali',
+  elec: '//mt{s}.google.cn/vt/lyrs=m@207000000&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=Galile',
+  ter: '//mt{s}.google.cn/vt/lyrs=t@131,r@227000000&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}&s=Galile',
+}
+
+class GoogleImageryProvider extends Cesium.UrlTemplateImageryProvider {
+  constructor(options = {}) {
+    options['url'] =
+      options.url ||
+      [
+        options.protocol || '',
+        TILE_URL[options.style] || TILE_URL['elec'],
+      ].join('')
+    options['subdomains'] = options.subdomains || ['1', '2', '3']
+    super(options)
+  }
+}
+
+ImageryType.GOOGLE = 'google'
+
+export default GoogleImageryProvider

src/modules/imagery/provider/TdtImageryProvider.js

@@ -0,0 +1,30 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-15 20:31:46
+ */
+
+import { Cesium } from '../../../namespace'
+import ImageryType from '../ImageryType'
+
+const MAP_URL =
+  '//t{s}.tianditu.gov.cn/DataServer?T={style}_w&x={x}&y={y}&l={z}&tk={key}'
+
+class TdtImageryProvider extends Cesium.UrlTemplateImageryProvider {
+  constructor(options = {}) {
+    super({
+      url: [
+        options.protocol || '',
+        MAP_URL.replace(/\{style\}/g, options.style || 'vec').replace(
+          /\{key\}/g,
+          options.key || ''
+        ),
+      ].join(''),
+      subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+      maximumLevel: 18,
+    })
+  }
+}
+
+ImageryType.TDT = 'tdt'
+
+export default TdtImageryProvider

src/modules/imagery/provider/TencentImageryProvider.js

@@ -0,0 +1,40 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-21 18:10:47
+ */
+
+import { Cesium } from '../../../namespace'
+import ImageryType from '../ImageryType'
+
+const TILE_URL = {
+  img: '//p{s}.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{reverseY}.jpg?version=400',
+  elec: '//rt{s}.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid={style}&scene=0&version=347',
+}
+
+class TencentImageryProvider extends Cesium.UrlTemplateImageryProvider {
+  constructor(options = {}) {
+    let url =
+      options.url ||
+      [
+        options.protocol || '',
+        TILE_URL[options.style] || TILE_URL['elec'],
+      ].join('')
+    options['url'] = url.replace('{style}', options.style || 1)
+    options['subdomains'] = options.subdomains || ['1', '2', '3']
+    if (options.style === 'img') {
+      options['customTags'] = {
+        sx: (imageryProvider, x, y, level) => {
+          return x >> 4
+        },
+        sy: (imageryProvider, x, y, level) => {
+          return ((1 << level) - y) >> 4
+        },
+      }
+    }
+    super(options)
+  }
+}
+
+ImageryType.TENCENT = 'tencent'
+
+export default TencentImageryProvider

src/modules/imagery/tiling-scheme/AmapMercatorTilingScheme.js

@@ -0,0 +1,40 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-01-31 22:07:05
+ */
+
+import { Cesium } from '../../../namespace'
+import { CoordTransform } from '../../transform'
+
+class AmapMercatorTilingScheme extends Cesium.WebMercatorTilingScheme {
+  constructor(options) {
+    super(options)
+    let projection = new Cesium.WebMercatorProjection()
+    this._projection.project = function (cartographic, result) {
+      result = CoordTransform.WGS84ToGCJ02(
+        Cesium.Math.toDegrees(cartographic.longitude),
+        Cesium.Math.toDegrees(cartographic.latitude)
+      )
+      result = projection.project(
+        new Cesium.Cartographic(
+          Cesium.Math.toRadians(result[0]),
+          Cesium.Math.toRadians(result[1])
+        )
+      )
+      return new Cesium.Cartesian2(result.x, result.y)
+    }
+    this._projection.unproject = function (cartesian, result) {
+      let cartographic = projection.unproject(cartesian)
+      result = CoordTransform.GCJ02ToWGS84(
+        Cesium.Math.toDegrees(cartographic.longitude),
+        Cesium.Math.toDegrees(cartographic.latitude)
+      )
+      return new Cesium.Cartographic(
+        Cesium.Math.toRadians(result[0]),
+        Cesium.Math.toRadians(result[1])
+      )
+    }
+  }
+}
+
+export default AmapMercatorTilingScheme

src/modules/imagery/tiling-scheme/BaiduMercatorTilingScheme.js

@@ -0,0 +1,102 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-01-31 19:22:04
+ */
+
+import { Cesium } from '../../../namespace'
+import { CoordTransform } from '../../transform'
+import BaiduMercatorProjection from '../projection/BaiduMercatorProjection'
+
+class BaiduMercatorTilingScheme extends Cesium.WebMercatorTilingScheme {
+  constructor(options) {
+    super(options)
+    let projection = new BaiduMercatorProjection()
+    this._projection.project = function (cartographic, result) {
+      result = result || {}
+      result = CoordTransform.WGS84ToGCJ02(
+        Cesium.Math.toDegrees(cartographic.longitude),
+        Cesium.Math.toDegrees(cartographic.latitude)
+      )
+      result = CoordTransform.GCJ02ToBD09(result[0], result[1])
+      result[0] = Math.min(result[0], 180)
+      result[0] = Math.max(result[0], -180)
+      result[1] = Math.min(result[1], 74.000022)
+      result[1] = Math.max(result[1], -71.988531)
+      result = projection.lngLatToPoint({
+        lng: result[0],
+        lat: result[1],
+      })
+      return new Cesium.Cartesian2(result.x, result.y)
+    }
+    this._projection.unproject = function (cartesian, result) {
+      result = result || {}
+      result = projection.mercatorToLngLat({
+        lng: cartesian.x,
+        lat: cartesian.y,
+      })
+      result = CoordTransform.BD09ToGCJ02(result.lng, result.lat)
+      result = CoordTransform.GCJ02ToWGS84(result[0], result[1])
+      return new Cesium.Cartographic(
+        Cesium.Math.toRadians(result[0]),
+        Cesium.Math.toRadians(result[1])
+      )
+    }
+    this.resolutions = options.resolutions || []
+  }
+
+  /**
+   *
+   * @param x
+   * @param y
+   * @param level
+   * @param result
+   * @returns {module:cesium.Rectangle|*}
+   */
+  tileXYToNativeRectangle(x, y, level, result) {
+    const tileWidth = this.resolutions[level]
+    const west = x * tileWidth
+    const east = (x + 1) * tileWidth
+    const north = ((y = -y) + 1) * tileWidth
+    const south = y * tileWidth
+
+    if (!Cesium.defined(result)) {
+      return new Cesium.Rectangle(west, south, east, north)
+    }
+
+    result.west = west
+    result.south = south
+    result.east = east
+    result.north = north
+    return result
+  }
+
+  /**
+   *
+   * @param position
+   * @param level
+   * @param result
+   * @returns {undefined|*}
+   */
+  positionToTileXY(position, level, result) {
+    const rectangle = this._rectangle
+    if (!Cesium.Rectangle.contains(rectangle, position)) {
+      return undefined
+    }
+    const projection = this._projection
+    const webMercatorPosition = projection.project(position)
+    if (!Cesium.defined(webMercatorPosition)) {
+      return undefined
+    }
+    const tileWidth = this.resolutions[level]
+    const xTileCoordinate = Math.floor(webMercatorPosition.x / tileWidth)
+    const yTileCoordinate = -Math.floor(webMercatorPosition.y / tileWidth)
+    if (!Cesium.defined(result)) {
+      return new Cesium.Cartesian2(xTileCoordinate, yTileCoordinate)
+    }
+    result.x = xTileCoordinate
+    result.y = yTileCoordinate
+    return result
+  }
+}
+
+export default BaiduMercatorTilingScheme

src/modules/images/base64/index.js

@@ -0,0 +1,9 @@
+/**
+ * @Author: Caven
+ * @Date: 2022-05-28 23:30:45
+ */
+
+const IMG_PARTICLES =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAEACAYAAADSoXR2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjExQTg0NDEyMDEzQjExRUFBNDhBRjhGMUMzOUUyNTU0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjExQTg0NDEzMDEzQjExRUFBNDhBRjhGMUMzOUUyNTU0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTFBODQ0MTAwMTNCMTFFQUE0OEFGOEYxQzM5RTI1NTQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTFBODQ0MTEwMTNCMTFFQUE0OEFGOEYxQzM5RTI1NTQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz41vRwAAAAE90lEQVR42uydyW4UMRCG3T2dgYSAEGs4sp44cCJBcGUJbwCvALwWPAI8ABwAiUVwgLBdkEikJEiAGMhkZqhfU1aa1sy0g+yaJPyWSupOpPjz0uVyucrJer2eG2fJ3ZgLAQhAgC0PgN8XIlkqgGLE75oih0WmRVZEvop0rHog18rnRe6IzInsthyCXFt+TuSKyGmRXZZDgK5eFrkv8l7kiUhrxN/JSo3pigSvcNmI1bCh3b5LK2+NqHyvyEF9x3z5HgqRRViOAXhW5JrCoNdei/y20gMYxhmRSyIXRY6JTMT4DENLW+SdyD19x/NajDmwmYIW79Hnn+MA4GJEAAIQgABJbMJB+n5Sl9zWZvR9DABUfkJkVt8fi3zUldAEoKl24Y2S1fPZEmBdZFHkkb4vxTLRQ5djbyUf0ncYrD/UADUB8MZno2Q19yx7gIqIAAQgAAEIQIAtYZT+85LvRnjQCoPKR3rQUgN4Y3ZeK30g8qps0qeeAzDn4TWD9+ySG+BBS90DaGnVg9a2tgnR4il9/jkOACoiAhCAAASIZpAAFl6yulO0JACo/IDrn6CedP1zxOciv6wAYNnAP3RVBeWtJQCWzG8iL/X9g4vkqNzMctzUXtintt2KM/aS+bmQaY90rb8CF6tSKiICEIAABCAAAQiwbfcFIWVCbUcc9bZDLKiYAKj4uOv7Bb+ILLj+8W7PCgC7Jhzv44Qdh9yrru8V61jPgd645gD2io+15RiC5ZA5ENNPmGmDmtrta9YAVEQE2FlrQUM/J6efU8cSAD87ojodBaccS6kgiiErGiq/qe93XT+3oGU5BJnbyKrIUs6BQZoQUEcrQ7CYagiGqeKiMgnXLXsg5uJUm/RQJKy8fGS7PMw6SgVQPrJFGZr0kCfUL/7IFjIzrLGpemBQ0kPbehL6I9vMjUh6oEVEAAIQgAAEIAABdpyj0qcK71YrqGUJANNrv+sHOcAiRpDDM1cTY1BEHk7kqyP/2Ac5vLEEQEG8aDnIoTb5ObZRWg5ywG5o1dX4ClNYxT7IISgJPsXGpLut9MCWU0S5bqkmdAa3LQEwcZDAfkZ3tthQfkwNkVeeD6kiuaUabcp6DpS9YyalrAdQ8bT1EFQVUabarND9fNuyB2gREYAABCAAAQhAAAIQoM770UgBXARCIr/koDogVlzgrWuxemBKd0m4JnBed0+5ZQ9gn3BK5LK+P4y5ewoB8DFiKO91COLFfwVuTCZV1hSoYw1APZCsFIkbN1Haaa87wwiKQe6eT27AEX6esPVVd8/kOOdAz/oz9FE0p+uGIKUeqE5C8xgSKiICEIAABCAAAQhAAAIQgAAEIAABCECA6AA+sbkREyDUUYlKD6ggZwzRkr8tewBhusisv+0in5qE/hFchoZTE0TL4p8sTbtIpyahQ4Ag5fKpSVBmfdDECvQTZjoM0U9N6KgkwH9xY7PXpPiCmq5yuaLVldHIO7jgNi5XfOEhCqNh9udHV/RnC5YAUDTftdV4/ivvwEoRVS9XXPWa1FIT5ird8jpSB+BDN3rO8AaGMnGy0I0QRYTvdk6NkOsucuhGCMAgI8Q0isaHbmAevNMhiD4P6iZhstANGiQE2PEGCRo2NcgAsQDwKnxWFdlT17/duWU1BJmuHz6A5bwbEsCScgh+qAHit3Jr1oooOPExdRBLbeJjSpuwuy30AAH+CDAAPH5ltESNYl4AAAAASUVORK5CYII='
+
+export { IMG_PARTICLES }

src/modules/layer/Layer.js

@@ -0,0 +1,350 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-03 09:38:21
+ */
+
+import { Cesium } from '../../namespace'
+import { Util } from '../utils'
+import State from '../state/State'
+import { LayerEventType, OverlayEventType, LayerEvent } from '../event'
+import LayerType from './LayerType'
+
+class Layer {
+  constructor(id) {
+    this._id = Util.uuid()
+    this._bid = id || Util.uuid()
+    this._delegate = undefined
+    this._viewer = undefined
+    this._state = undefined
+    this._show = true
+    this._isGround = false
+    this._cache = {}
+    this._attr = {}
+    this._layerEvent = new LayerEvent()
+    this._layerEvent.on(LayerEventType.ADD, this._onAdd, this)
+    this._layerEvent.on(LayerEventType.REMOVE, this._onRemove, this)
+  }
+
+  get layerId() {
+    return this._id
+  }
+
+  get id() {
+    return this._bid
+  }
+
+  get delegate() {
+    return this._delegate
+  }
+
+  set show(show) {
+    this._show = show
+    this._delegate && (this._delegate.show = this._show)
+  }
+
+  get show() {
+    return this._show
+  }
+
+  get layerEvent() {
+    return this._layerEvent
+  }
+
+  set attr(attr) {
+    this._attr = attr
+  }
+
+  get attr() {
+    return this._attr
+  }
+
+  get state() {
+    return this._state
+  }
+
+  /**
+   * The hook for added
+   * @private
+   */
+  _addedHook() {}
+
+  /**
+   * The hook for removed
+   * @private
+   */
+  _removedHook() {}
+
+  /**
+   * The layer added callback function
+   * Subclasses need to be overridden
+   * @param viewer
+   * @private
+   */
+  _onAdd(viewer) {
+    this._viewer = viewer
+    if (!this._delegate) {
+      return
+    }
+    if (this._delegate instanceof Cesium.PrimitiveCollection) {
+      if (this._isGround) {
+        this._viewer.scene.groundPrimitives.add(this._delegate)
+      } else {
+        this._viewer.scene.primitives.add(this._delegate)
+      }
+    } else {
+      this._viewer.dataSources.add(this._delegate)
+    }
+    this._addedHook && this._addedHook()
+    this._state = State.ADDED
+  }
+
+  /**
+   * The layer added callback function
+   * Subclasses need to be overridden
+   * @private
+   */
+  _onRemove() {
+    if (!this._delegate) {
+      return
+    }
+    if (this._viewer) {
+      this._cache = {}
+      if (this._delegate instanceof Cesium.PrimitiveCollection) {
+        this._delegate.removeAll()
+        if (this._isGround) {
+          this._viewer.scene.groundPrimitives.remove(this._delegate)
+        } else {
+          this._viewer.scene.primitives.remove(this._delegate)
+        }
+      } else if (this._delegate.then) {
+        this._delegate.then((dataSource) => {
+          dataSource.entities.removeAll()
+        })
+        this._viewer.dataSources.remove(this._delegate)
+      } else {
+        this._delegate.entities && this._delegate.entities.removeAll()
+        this._viewer.dataSources.remove(this._delegate)
+      }
+      this._removedHook && this._removedHook()
+      this._state = State.REMOVED
+    }
+  }
+
+  /**
+   * The layer add overlay
+   * @param overlay
+   * @private
+   */
+  _addOverlay(overlay) {
+    // eslint-disable-next-line no-prototype-builtins
+    if (!this._cache.hasOwnProperty(overlay.overlayId)) {
+      this._cache[overlay.overlayId] = overlay
+      this._delegate && overlay.fire(OverlayEventType.ADD, this)
+      if (this._state === State.CLEARED) {
+        this._state = State.ADDED
+      }
+    }
+  }
+
+  /**
+   * The layer remove overlay
+   * @param overlay
+   * @private
+   */
+  _removeOverlay(overlay) {
+    // eslint-disable-next-line no-prototype-builtins
+    if (this._cache.hasOwnProperty(overlay.overlayId)) {
+      this._delegate && overlay.fire(OverlayEventType.REMOVE, this)
+      delete this._cache[overlay.overlayId]
+    }
+  }
+
+  /**
+   * Add overlay
+   * @param overlay
+   * @returns {Layer}
+   */
+  addOverlay(overlay) {
+    this._addOverlay(overlay)
+    return this
+  }
+
+  /**
+   * Add overlays
+   * @param overlays
+   * @returns {Layer}
+   */
+  addOverlays(overlays) {
+    if (Array.isArray(overlays)) {
+      overlays.forEach((item) => {
+        this._addOverlay(item)
+      })
+    }
+    return this
+  }
+
+  /**
+   * Remove overlay
+   * @param overlay
+   * @returns {Layer}
+   */
+  removeOverlay(overlay) {
+    this._removeOverlay(overlay)
+    return this
+  }
+
+  /**
+   * Returns the overlay by overlayId
+   * @param overlayId
+   * @returns {*|undefined}
+   */
+  getOverlay(overlayId) {
+    return this._cache[overlayId] || undefined
+  }
+
+  /**
+   * Returns the overlay by bid
+   * @param id
+   * @returns {any}
+   */
+  getOverlayById(id) {
+    let overlay = undefined
+    Object.keys(this._cache).forEach((key) => {
+      if (this._cache[key].id === id) {
+        overlay = this._cache[key]
+      }
+    })
+    return overlay
+  }
+
+  /**
+   * Returns the overlays by attrName and AttrVal
+   * @param attrName
+   * @param attrVal
+   * @returns {[]}
+   */
+  getOverlaysByAttr(attrName, attrVal) {
+    let result = []
+    this.eachOverlay((item) => {
+      if (item.attr[attrName] === attrVal) {
+        result.push(item)
+      }
+    }, this)
+    return result
+  }
+
+  /**
+   * Iterate through each overlay and pass it as an argument to the callback function
+   * @param method
+   * @param context
+   * @returns {Layer}
+   */
+  eachOverlay(method, context) {
+    Object.keys(this._cache).forEach((key) => {
+      method && method.call(context || this, this._cache[key])
+    })
+    return this
+  }
+
+  /**
+   * Returns all overlays
+   * @returns {[]}
+   */
+  getOverlays() {
+    let result = []
+    Object.keys(this._cache).forEach((key) => {
+      result.push(this._cache[key])
+    })
+    return result
+  }
+
+  /**
+   * Clears all overlays
+   * Subclasses need to be overridden
+   */
+  clear() {}
+
+  /**
+   * Removes from the viewer
+   */
+  remove() {
+    if (this._viewer) {
+      this._viewer.removeLayer(this)
+    }
+  }
+
+  /**
+   * Adds to the viewer
+   * @param viewer
+   * @returns {Layer}
+   */
+  addTo(viewer) {
+    if (viewer?.addLayer) {
+      viewer.addLayer(this)
+    }
+    return this
+  }
+
+  /**
+   * sets the style, the style will apply to every overlay of the layer
+   * Subclasses need to be overridden
+   * @param style
+   */
+  setStyle(style) {}
+
+  /**
+   * Subscribe event
+   * @param type
+   * @param callback
+   * @param context
+   * @returns {Layer}
+   */
+  on(type, callback, context) {
+    this._layerEvent.on(type, callback, context || this)
+    return this
+  }
+
+  /**
+   * Unsubscribe event
+   * @param type
+   * @param callback
+   * @param context
+   * @returns {Layer}
+   */
+  off(type, callback, context) {
+    this._layerEvent.off(type, callback, context || this)
+    return this
+  }
+
+  /**
+   * Trigger subscription event
+   * @param type
+   * @param params
+   * @returns {Layer}
+   */
+  fire(type, params) {
+    this._layerEvent.fire(type, params)
+    return this
+  }
+
+  /**
+   * Registers Type
+   * @param type
+   */
+  static registerType(type) {
+    if (type) {
+      LayerType[type.toLocaleUpperCase()] = type.toLocaleLowerCase()
+    }
+  }
+
+  /**
+   * Returns type
+   * @param type
+   * @returns {*|undefined}
+   */
+  static getLayerType(type) {
+    return LayerType[type.toLocaleUpperCase()] || undefined
+  }
+}
+
+export default Layer

src/modules/layer/LayerGroup.js

@@ -0,0 +1,148 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-27 19:50:32
+ */
+
+import { Util } from '../utils'
+import State from '../state/State'
+import { LayerGroupEventType, LayerGroupEvent } from '../event'
+import Layer from './Layer'
+
+class LayerGroup {
+  constructor(id) {
+    this._id = id || Util.uuid()
+    this._cache = {}
+    this._show = true
+    this._viewer = undefined
+    this._layerGroupEvent = new LayerGroupEvent()
+    this._layerGroupEvent.on(LayerGroupEventType.ADD, this._onAdd, this)
+    this._layerGroupEvent.on(LayerGroupEventType.REMOVE, this._onRemove, this)
+    this._state = State.INITIALIZED
+  }
+
+  get id() {
+    return this._id
+  }
+
+  get type() {
+    return Layer.getLayerType('layer_group')
+  }
+
+  set show(show) {
+    this._show = show
+    Object.keys(this._cache).forEach((key) => {
+      this._cache[key].show = this._show
+    })
+  }
+
+  get show() {
+    return this._show
+  }
+
+  get layerGroupEvent() {
+    return this._layerGroupEvent
+  }
+
+  get state() {
+    return this._state
+  }
+
+  /**
+   *
+   * @param viewer
+   * @private
+   */
+  _onAdd(viewer) {
+    this._viewer = viewer
+    Object.keys(this._cache).forEach((key) => {
+      this._viewer.addLayer(this._cache[key])
+    })
+    this._state = State.ADDED
+  }
+
+  /**
+   *
+   * @private
+   */
+  _onRemove() {
+    Object.keys(this._cache).forEach((key) => {
+      this._viewer && this._viewer.removeLayer(this._cache[key])
+    })
+    this._cache = {}
+    this._state = State.REMOVED
+  }
+
+  /**
+   * Adds a layer
+   * @param layer
+   * @returns {LayerGroup}
+   */
+  addLayer(layer) {
+    // eslint-disable-next-line no-prototype-builtins
+    if (!Object(this._cache).hasOwnProperty(layer.id)) {
+      this._cache[layer.id] = layer
+      this._viewer && this._viewer.addLayer(layer)
+    }
+    return this
+  }
+
+  /**
+   * Removes a layer
+   * @param layer
+   * @returns {LayerGroup}
+   */
+  removeLayer(layer) {
+    // eslint-disable-next-line no-prototype-builtins
+    if (Object(this._cache).hasOwnProperty(layer.id)) {
+      this._viewer && this._viewer.removeLayer(layer)
+      delete this._cache[layer.id]
+    }
+    return this
+  }
+
+  /**
+   * Returns a layer by id
+   * @param id
+   * @returns {*|undefined}
+   */
+  getLayer(id) {
+    return this._cache[id] || undefined
+  }
+
+  /**
+   * Returns all layers
+   * @returns {[]}
+   */
+  getLayers() {
+    let result = []
+    Object.keys(this._cache).forEach((key) => {
+      result.push(this._cache[key])
+    })
+    return result
+  }
+
+  /**
+   * Adds to the viewer
+   * @param viewer
+   * @returns {LayerGroup}
+   */
+  addTo(viewer) {
+    if (viewer && viewer.addLayerGroup) {
+      viewer.addLayerGroup(this)
+    }
+    return this
+  }
+
+  /**
+   *
+   * @returns {LayerGroup}
+   */
+  remove() {
+    this._viewer && this._viewer.removeLayerGroup(this)
+    return this
+  }
+}
+
+Layer.registerType('layer_group')
+
+export default LayerGroup

src/modules/layer/LayerType.js

@@ -0,0 +1,8 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-05-10 08:21:19
+ */
+
+let LayerType = {}
+
+export default LayerType

src/modules/layer/index.js

@@ -0,0 +1,27 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-03-13 13:46:19
+ */
+
+export { default as LayerType } from './LayerType'
+export { default as Layer } from './Layer'
+export { default as LayerGroup } from './LayerGroup'
+
+/**
+ * types
+ */
+export { default as ClusterLayer } from './type/ClusterLayer'
+export { default as CzmlLayer } from './type/CzmlLayer'
+export { default as DynamicLayer } from './type/DynamicLayer'
+export { default as FeatureGridLayer } from './type/FeatureGridLayer'
+export { default as GeoJsonLayer } from './type/GeoJsonLayer'
+export { default as GpxLayer } from './type/GpxLayer'
+export { default as GraticuleLayer } from './type/GraticuleLayer'
+export { default as GroundPrimitiveLayer } from './type/GroundPrimitiveLayer'
+export { default as HtmlLayer } from './type/HtmlLayer'
+export { default as KmlLayer } from './type/KmlLayer'
+export { default as LabelLayer } from './type/LabelLayer'
+export { default as PrimitiveLayer } from './type/PrimitiveLayer'
+export { default as TilesetLayer } from './type/TilesetLayer'
+export { default as TopoJsonLayer } from './type/TopoJsonLayer'
+export { default as VectorLayer } from './type/VectorLayer'

src/modules/layer/type/ClusterLayer.js

@@ -0,0 +1,183 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-02-10 10:05:41
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+import Layer from '../Layer'
+
+const DEF_OPT = {
+  size: 18,
+  pixelRange: 40,
+  gradient: {
+    0.0001: Cesium.Color.DEEPSKYBLUE,
+    0.001: Cesium.Color.GREEN,
+    0.01: Cesium.Color.ORANGE,
+    0.1: Cesium.Color.RED,
+  },
+  fontSize: 12,
+  fontColor: Cesium.Color.BLACK,
+  style: 'circle',
+}
+
+class ClusterLayer extends Layer {
+  constructor(id, options = {}) {
+    super(id)
+    this._delegate = new Cesium.CustomDataSource(id)
+    this._options = {
+      ...DEF_OPT,
+      ...options,
+    }
+    this._delegate.clustering.enabled = true
+    this._delegate.clustering.clusterEvent.addEventListener(
+      this._clusterEventHandler,
+      this
+    )
+    this._delegate.clustering.pixelRange = this._options.pixelRange
+
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return Layer.getLayerType('cluster')
+  }
+
+  set enableCluster(enableCluster) {
+    this._delegate.clustering.enabled = enableCluster
+  }
+
+  /**
+   *
+   * @param color
+   * @param numLength
+   * @returns {*}
+   * @private
+   */
+  _drawCircle(color, numLength) {
+    let size = this._options.size * (numLength + 1)
+    let key = color.toCssColorString() + '-' + size
+    if (!this._cache[key]) {
+      let canvas = document.createElement('canvas')
+      canvas.width = size
+      canvas.height = size
+      let context2D = canvas.getContext('2d')
+      context2D.save()
+      context2D.scale(size / 24, size / 24) //Added to auto-generated code to scale up to desired size.
+      context2D.fillStyle = color.withAlpha(0.2).toCssColorString() //Modified from auto-generated code.
+      context2D.beginPath()
+      context2D.arc(12, 12, 9, 0, 2 * Math.PI)
+      context2D.closePath()
+      context2D.fill()
+      context2D.beginPath()
+      context2D.arc(12, 12, 6, 0, 2 * Math.PI)
+      context2D.fillStyle = color.toCssColorString()
+      context2D.fill()
+      context2D.closePath()
+      context2D.restore()
+      this._cache[key] = canvas.toDataURL()
+    }
+    return this._cache[key]
+  }
+
+  /**
+   *
+   * @param color
+   * @param numLength
+   * @returns {*}
+   * @private
+   */
+  _drawClustering(color, numLength) {
+    let size = this._options.size * (numLength + 1)
+    let key = color.toCssColorString() + '-' + size
+    let startAngle = -Math.PI / 12
+    let angle = Math.PI / 2
+    let intervalAngle = Math.PI / 6
+    if (!this._cache[key]) {
+      let canvas = document.createElement('canvas')
+      canvas.width = size
+      canvas.height = size
+      let context2D = canvas.getContext('2d')
+      context2D.save()
+      context2D.scale(size / 24, size / 24) //Added to auto-generated code to scale up to desired size.
+      context2D.beginPath()
+      context2D.arc(12, 12, 6, 0, 2 * Math.PI)
+      context2D.fillStyle = color.toCssColorString()
+      context2D.fill()
+      context2D.closePath()
+      context2D.lineWidth = 2
+      for (let i = 0; i < 3; i++) {
+        context2D.beginPath()
+        context2D.arc(12, 12, 8, startAngle, startAngle + angle, false)
+        context2D.strokeStyle = color.withAlpha(0.4).toCssColorString()
+        context2D.stroke()
+        context2D.arc(12, 12, 11, startAngle, startAngle + angle, false)
+        context2D.strokeStyle = color.withAlpha(0.2).toCssColorString()
+        context2D.stroke()
+        context2D.closePath()
+        startAngle = startAngle + angle + intervalAngle
+      }
+      context2D.restore()
+      this._cache[key] = canvas.toDataURL()
+    }
+    return this._cache[key]
+  }
+
+  /**
+   *
+   * @param {*} clusteredEntities
+   * @param {*} cluster
+   */
+  _clusterEventHandler(clusteredEntities, cluster) {
+    if (!this._delegate.clustering.enabled) {
+      return
+    }
+    cluster.billboard.show = true
+    cluster.label.font = `bold ${this._options.fontSize}px sans-serif`
+    cluster.label.fillColor = this._options.fontColor
+    cluster.label.disableDepthTestDistance = Number.POSITIVE_INFINITY
+    if (this._delegate.entities.values.length) {
+      let allCount = this._delegate.entities.values.length || 0
+      for (let key in this._options.gradient) {
+        if (clusteredEntities.length >= allCount * key) {
+          let numLength = String(clusteredEntities.length).length
+          if (this._options.style === 'circle') {
+            cluster.billboard.image = this._drawCircle(
+              this._options.gradient[key],
+              numLength
+            )
+          } else if (this._options.style === 'custom') {
+            cluster.billboard.image = this._options.gradient[key]
+          } else {
+            cluster.billboard.image = this._drawClustering(
+              this._options.gradient[key],
+              numLength
+            )
+          }
+          cluster.label.show = true
+          if (numLength === 1) {
+            cluster.label.pixelOffset = new Cesium.Cartesian2(-2, 3)
+          } else {
+            cluster.label.pixelOffset = new Cesium.Cartesian2(
+              -5 * (numLength - 1),
+              5
+            )
+          }
+        } else if (clusteredEntities.length <= 1) {
+          cluster.label.show = false
+        }
+      }
+    }
+  }
+
+  clear() {
+    this._delegate.entities.removeAll()
+    this._cache = {}
+    this._state = State.CLEARED
+    return this
+  }
+}
+
+Layer.registerType('cluster')
+
+export default ClusterLayer

src/modules/layer/type/CzmlLayer.js

@@ -0,0 +1,54 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-19 13:38:48
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+import Layer from '../Layer'
+
+class CzmlLayer extends Layer {
+  constructor(id, url = '', options = {}) {
+    super(id)
+    this._delegate = Cesium.CzmlDataSource.load(url, options)
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return Layer.getLayerType('czml')
+  }
+
+  set show(show) {
+    this._show = show
+    this._delegate &&
+      this._delegate.then((dataSource) => {
+        dataSource.show = this._show
+      })
+  }
+
+  get show() {
+    return this._show
+  }
+
+  /**
+   *
+   * @param method
+   * @param context
+   * @returns {CzmlLayer}
+   */
+  eachOverlay(method, context) {
+    if (this._delegate) {
+      this._delegate.then((dataSource) => {
+        let entities = dataSource.entities.values
+        entities.forEach((item) => {
+          method.call(context, item)
+        })
+      })
+      return this
+    }
+  }
+}
+
+Layer.registerType('czml')
+
+export default CzmlLayer

src/modules/layer/type/DynamicLayer.js

@@ -0,0 +1,35 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-05-05 09:12:41
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+import Layer from '../Layer'
+
+class DynamicLayer extends Layer {
+  constructor(id) {
+    super(id)
+    this._delegate = new Cesium.CustomDataSource(id)
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return Layer.getLayerType('dynamic')
+  }
+
+  /**
+   * Clears all entities
+   * @returns {DynamicLayer}
+   */
+  clear() {
+    this._delegate.entities && this._delegate.entities.removeAll()
+    this._cache = {}
+    this._state = State.CLEARED
+    return this
+  }
+}
+
+Layer.registerType('dynamic')
+
+export default DynamicLayer

src/modules/layer/type/FeatureGridLayer.js

@@ -0,0 +1,221 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-04-15 20:00:42
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+import Layer from '../Layer'
+import VectorLayer from './VectorLayer'
+
+const DEF_OPTS = {
+  name: '',
+  count: 10,
+  maximumLevel: 21,
+  dataProperty: '',
+  callback: () => {
+    return null
+  },
+}
+
+class FeatureGridLayer extends Layer {
+  constructor(id, url, options = {}) {
+    super(id)
+    this._url = url
+    this._options = {
+      ...DEF_OPTS,
+      ...options,
+    }
+    this._levelLayers = {}
+    this._tileWidth = 256
+    this._tileHeight = 256
+    this._maximumLevel = this._options.maximumLevel
+    this._tilingScheme =
+      this._options.tilingScheme || new Cesium.GeographicTilingScheme()
+    this._rectangle = this._tilingScheme.rectangle
+    this._credit = undefined
+    this._token = undefined
+    for (let i = 0; i < this.maximumLevel; i++) {
+      this._levelLayers[String(i)] = new VectorLayer(id + '-grid-' + i)
+    }
+    this._viewer = undefined
+    this._imageryLayer = undefined
+    this._imagery = document.createElement('canvas')
+    this._imagery.width = this._tileWidth
+    this._imagery.height = this._tileHeight
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return Layer.getLayerType('feature_grid')
+  }
+
+  get url() {
+    return this._url
+  }
+
+  set show(show) {
+    this._show = show
+    Object.keys(this._levelLayers).forEach((key) => {
+      this._levelLayers[key].show = show
+    })
+    return this
+  }
+
+  get show() {
+    return this._show
+  }
+
+  get token() {
+    return this._token
+  }
+
+  get tileWidth() {
+    if (!this.ready) {
+      throw new Cesium.DeveloperError(
+        'tileWidth must not be called before the imagery provider is ready.'
+      )
+    }
+    return this._tileWidth
+  }
+
+  get tileHeight() {
+    if (!this.ready) {
+      throw new Cesium.DeveloperError(
+        'tileHeight must not be called before the imagery provider is ready.'
+      )
+    }
+    return this._tileHeight
+  }
+
+  get maximumLevel() {
+    if (!this.ready) {
+      throw new Cesium.DeveloperError(
+        'maximumLevel must not be called before the imagery provider is ready.'
+      )
+    }
+    return this._maximumLevel
+  }
+
+  get minimumLevel() {
+    if (!this.ready) {
+      throw new Cesium.DeveloperError(
+        'minimumLevel must not be called before the imagery provider is ready.'
+      )
+    }
+    return 0
+  }
+
+  get tilingScheme() {
+    if (!this.ready) {
+      throw new Cesium.DeveloperError(
+        'tilingScheme must not be called before the imagery provider is ready.'
+      )
+    }
+    return this._tilingScheme
+  }
+
+  get rectangle() {
+    if (!this.ready) {
+      throw new Cesium.DeveloperError(
+        'rectangle must not be called before the imagery provider is ready.'
+      )
+    }
+    return this._rectangle
+  }
+
+  get ready() {
+    return !!this._url
+  }
+
+  get credit() {
+    return this._credit
+  }
+
+  get hasAlphaChannel() {
+    return true
+  }
+
+  /**
+   *
+   * @param {*} viewer
+   * @returns
+   */
+  _onAdd(viewer) {
+    this._viewer = viewer
+    this._imageryLayer = this._viewer.imageryLayers.addImageryProvider(this)
+    Object.keys(this._levelLayers).forEach((key) => {
+      this._viewer.addLayer(this._levelLayers[key])
+    })
+    this._state = State.ADDED
+  }
+
+  _onRemove() {
+    this._imageryLayer && this._viewer.imageryLayers.remove(this._imageryLayer)
+    Object.keys(this._levelLayers).forEach((key) => {
+      this._viewer.removeLayer(this._levelLayers[key])
+    })
+    this._state = State.REMOVED
+  }
+
+  getTileCredits(x, y, level) {}
+
+  /**
+   *
+   * @param {*} x
+   * @param {*} y
+   * @param {*} level
+   * @param {*} request
+   * @returns
+   */
+  requestImage(x, y, level, request) {
+    let layer = this._levelLayers[String(level)]
+    let rectangle = this._tilingScheme.tileXYToRectangle(x, y, level)
+    if (
+      this._viewer &&
+      rectangle &&
+      layer &&
+      Cesium.Rectangle.intersection(rectangle, this._viewer.viewBounds)
+    ) {
+      Cesium.Resource.fetchJson({
+        url: this._url,
+        queryParameters: {
+          minX: Cesium.Math.toDegrees(rectangle.west),
+          minY: Cesium.Math.toDegrees(rectangle.south),
+          maxX: Cesium.Math.toDegrees(rectangle.east),
+          maxY: Cesium.Math.toDegrees(rectangle.north),
+          count: this._options.count,
+        },
+      }).then((res) => {
+        let dataList = res
+        if (this._options.dataProperty) {
+          dataList = eval('res.' + this._options.dataProperty)
+        }
+        if (dataList && dataList.length) {
+          for (let i = level + 3; i < this._maximumLevel; i++) {
+            this._levelLayers[String(i)] && this._levelLayers[String(i)].clear()
+          }
+          dataList.forEach((item) => {
+            let overlay = this._options.callback(item)
+            overlay && layer.addOverlay(overlay)
+          })
+        }
+      })
+    }
+    return this._imagery
+  }
+
+  /**
+   *
+   */
+  clear() {
+    Object.keys(this._levelLayers).forEach((key) => {
+      this._levelLayers[key].clear()
+    })
+    this._state = State.CLEARED
+  }
+}
+
+Layer.registerType('feature_grid')
+
+export default FeatureGridLayer

src/modules/layer/type/GeoJsonLayer.js

@@ -0,0 +1,133 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-13 10:13:53
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+import { Billboard, Polyline, Polygon, Model } from '../../overlay'
+import Layer from '../Layer'
+import VectorLayer from './VectorLayer'
+
+class GeoJsonLayer extends Layer {
+  constructor(id, url, options = {}) {
+    if (!url) {
+      throw new Error('GeoJsonLayer：the url invalid')
+    }
+    super(id)
+    this._delegate = Cesium.GeoJsonDataSource.load(url, options)
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return Layer.getLayerType('geojson')
+  }
+
+  set show(show) {
+    this._show = show
+    this._delegate &&
+      this._delegate.then((dataSource) => {
+        dataSource.show = this._show
+      })
+  }
+
+  get show() {
+    return this._show
+  }
+
+  _createBillboard(entity) {
+    if (entity.position && entity.billboard) {
+      return Billboard.fromEntity(entity)
+    }
+  }
+
+  /**
+   * Returns polyline Entity
+   * @param entity
+   * @returns {any}
+   * @private
+   */
+  _createPolyline(entity) {
+    if (entity.polyline) {
+      return Polyline.fromEntity(entity)
+    }
+  }
+
+  /**
+   * Returns polygon Entity
+   * @param entity
+   * @returns {any}
+   * @private
+   */
+  _createPolygon(entity) {
+    if (entity.polygon) {
+      return Polygon.fromEntity(entity)
+    }
+  }
+
+  /**
+   * Returns model Entity
+   * @param entity
+   * @param modelUrl
+   * @returns {Model}
+   * @private
+   */
+  _createModel(entity, modelUrl) {
+    if (entity) {
+      return Model.fromEntity(entity, modelUrl)
+    }
+  }
+
+  /**
+   *
+   * @param method
+   * @param context
+   * @returns {GeoJsonLayer}
+   */
+  eachOverlay(method, context) {
+    if (this._delegate) {
+      this._delegate.then((dataSource) => {
+        let entities = dataSource.entities.values
+        entities.forEach((item) => {
+          method.call(context, item)
+        })
+      })
+      return this
+    }
+  }
+
+  /**
+   * Converts to VectorLayer
+   * @returns {VectorLayer}
+   */
+  toVectorLayer() {
+    let layer = new VectorLayer(this.id)
+    this.eachOverlay((item) => {
+      if (item.billboard) {
+        layer.addOverlay(this._createBillboard(item))
+      } else if (item.polyline) {
+        layer.addOverlay(this._createPolyline(item))
+      } else if (item.polygon) {
+        layer.addOverlay(this._createPolygon(item))
+      }
+    }, this)
+    return layer
+  }
+
+  /**
+   * Converts to VectorLayer
+   * @param modelUrl
+   * @returns {VectorLayer}
+   */
+  toModelLayer(modelUrl) {
+    let layer = new VectorLayer(this.id)
+    this.eachOverlay((item) => {
+      layer.addOverlay(this._createModel(item, modelUrl))
+    }, this)
+    return layer
+  }
+}
+
+Layer.registerType('geojson')
+
+export default GeoJsonLayer

src/modules/layer/type/GpxLayer.js

@@ -0,0 +1,51 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-19 11:03:17
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+import Layer from '../Layer'
+
+class GpxLayer extends Layer {
+  constructor(id, url, options = {}) {
+    if (!url) {
+      throw new Error('GpxLayer: the url is empty')
+    }
+    super(id)
+    this._delegate = Cesium.KmlDataSource.load(url, options)
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return Layer.getLayerType('gpx')
+  }
+
+  set show(show) {
+    this._show = show
+    this._delegate &&
+      this._delegate.then((dataSource) => {
+        dataSource.show = this._show
+      })
+  }
+
+  get show() {
+    return this._show
+  }
+
+  eachOverlay(method, context) {
+    if (this._delegate) {
+      this._delegate.then((dataSource) => {
+        let entities = dataSource.entities.values
+        entities.forEach((item) => {
+          method.call(context, item)
+        })
+      })
+      return this
+    }
+  }
+}
+
+Layer.registerType('gpx')
+
+export default GpxLayer

src/modules/layer/type/GraticuleLayer.js

@@ -0,0 +1,78 @@
+/**
+  @Author: Caven Chen
+  @Date: 2023-01-12
+**/
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+import Layer from '../Layer'
+
+const DEF_OPTS = {
+  radialColor: Cesium.Color.WHITE,
+  radialWidth: 2,
+  showRadial: true,
+  LabelColor: Cesium.Color.YELLOW,
+  weftColor: Cesium.Color.WHITE,
+  weftWidth: 2,
+}
+
+class GraticuleLayer extends Layer {
+  constructor(id, options) {
+    super(id)
+    this._options = {
+      ...DEF_OPTS,
+      ...options,
+    }
+    this._delegate = new Cesium.CustomDataSource(id)
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return Layer.getLayerType('graticule')
+  }
+
+  _addedHook() {
+    for (let i = 0; i < 36; i++) {
+      this._delegate.entities.add({
+        polyline: {
+          positions: Cesium.Cartesian3.fromDegreesArray([
+            i * 10,
+            89.5,
+            i * 10,
+            -89.5,
+          ]),
+          material: this._options.radialColor,
+          width: this._options.radialWidth,
+        },
+        show: this._options.showRadial,
+      })
+
+      this._delegate.entities.add({
+        position: Cesium.Cartesian3.fromDegrees(i * 10, 0.0),
+        label: {
+          text: i * 10 + '°',
+          font: '12px',
+          fillColor: this._options.LabelColor,
+        },
+      })
+    }
+
+    for (let i = 0; i < 18; i++) {
+      let coords = []
+      for (let k = 0; k < 129; k++) {
+        coords.push(-180 + k * (360 / 128), (i < 9 ? i : -i) * 10)
+      }
+      this._delegate.entities.add({
+        polyline: {
+          positions: Cesium.Cartesian3.fromDegreesArray(coords),
+          material: this._options.weftColor,
+          width: this._options.weftWidth,
+        },
+      })
+    }
+  }
+}
+
+Layer.registerType('graticule')
+
+export default GraticuleLayer

src/modules/layer/type/GroundPrimitiveLayer.js

@@ -0,0 +1,36 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-12-03 20:12:59
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+import Layer from '../Layer'
+
+class GroundPrimitiveLayer extends Layer {
+  constructor(id) {
+    super(id)
+    this._delegate = new Cesium.PrimitiveCollection()
+    this._isGround = true
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return Layer.getLayerType('ground_primitive')
+  }
+
+  /**
+   *
+   * @return {GroundPrimitiveLayer}
+   */
+  clear() {
+    this._delegate && this._delegate.removeAll()
+    this._cache = {}
+    this._state = State.CLEARED
+    return this
+  }
+}
+
+Layer.registerType('ground_primitive')
+
+export default GroundPrimitiveLayer

src/modules/layer/type/HtmlLayer.js

@@ -0,0 +1,98 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-02-12 21:43:33
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+import { DomUtil } from '../../utils'
+import { Transform } from '../../transform'
+import Layer from '../Layer'
+
+class HtmlLayer extends Layer {
+  constructor(id) {
+    super(id)
+    this._delegate = DomUtil.create('div', 'html-layer', undefined)
+    this._delegate.setAttribute('id', this._id)
+    this._renderRemoveCallback = undefined
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return Layer.getLayerType('html')
+  }
+
+  set show(show) {
+    this._show = show
+    this._delegate.style.visibility = this._show ? 'visible' : 'hidden'
+    Object.keys(this._cache).forEach((key) => {
+      this._cache[key].show = show
+    })
+  }
+
+  get show() {
+    return this._show
+  }
+
+  /**
+   * add handler
+   * @param viewer
+   * @private
+   */
+  _onAdd(viewer) {
+    this._viewer = viewer
+    this._viewer.dcContainer.appendChild(this._delegate)
+    let scene = this._viewer.scene
+    this._renderRemoveCallback = scene.postRender.addEventListener(() => {
+      let cp = this._viewer.camera.positionWC
+      let cd = this._viewer.camera.direction
+      this.eachOverlay((item) => {
+        if (item && item.position) {
+          let position = Transform.transformWGS84ToCartesian(item.position)
+          let up = scene.globe.ellipsoid.geodeticSurfaceNormal(
+            position,
+            new Cesium.Cartesian3()
+          )
+          let windowCoord = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
+            scene,
+            position
+          )
+          item._updateStyle(
+            windowCoord,
+            Cesium.Cartesian3.distance(position, cp),
+            Cesium.Cartesian3.dot(cd, up) <= 0
+          )
+        }
+      }, this)
+    }, this)
+    this._state = State.ADDED
+  }
+
+  /**
+   * remove handler
+   * @returns {boolean}
+   * @private
+   */
+  _onRemove() {
+    this._renderRemoveCallback && this._renderRemoveCallback()
+    this._viewer.dcContainer.removeChild(this._delegate)
+    this._state = State.REMOVED
+  }
+
+  /**
+   * Clears all divIcons
+   * @returns {HtmlLayer}
+   */
+  clear() {
+    while (this._delegate.hasChildNodes()) {
+      this._delegate.removeChild(this._delegate.firstChild)
+    }
+    this._cache = {}
+    this._state = State.CLEARED
+    return this
+  }
+}
+
+Layer.registerType('html')
+
+export default HtmlLayer

src/modules/layer/type/KmlLayer.js

@@ -0,0 +1,51 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-19 11:03:17
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+import Layer from '../Layer'
+
+class KmlLayer extends Layer {
+  constructor(id, url, options = {}) {
+    if (!url) {
+      throw new Error('KmlLayer: the url is empty')
+    }
+    super(id)
+    this._delegate = Cesium.KmlDataSource.load(url, options)
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return Layer.getLayerType('kml')
+  }
+
+  set show(show) {
+    this._show = show
+    this._delegate &&
+      this._delegate.then((dataSource) => {
+        dataSource.show = this._show
+      })
+  }
+
+  get show() {
+    return this._show
+  }
+
+  eachOverlay(method, context) {
+    if (this._delegate) {
+      this._delegate.then((dataSource) => {
+        let entities = dataSource.entities.values
+        entities.forEach((item) => {
+          method.call(context, item)
+        })
+      })
+      return this
+    }
+  }
+}
+
+Layer.registerType('kml')
+
+export default KmlLayer

src/modules/layer/type/LabelLayer.js

@@ -0,0 +1,43 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-03-30 17:14:00
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+import { Label } from '../../overlay'
+import Layer from '../Layer'
+
+class LabelLayer extends Layer {
+  constructor(id, url = '') {
+    super(id)
+    this._dataSource = Cesium.GeoJsonDataSource.load(url)
+    this._delegate = new Cesium.CustomDataSource(id)
+    this._initLabel()
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return Layer.getLayerType('label')
+  }
+
+  _createLabel(entity) {
+    if (entity.position && entity.name) {
+      return Label.fromEntity(entity)
+    }
+  }
+
+  _initLabel() {
+    this._dataSource.then((dataSource) => {
+      let entities = dataSource.entities.values
+      entities.forEach((item) => {
+        let label = this._createLabel(item)
+        this.addOverlay(label)
+      })
+    })
+  }
+}
+
+Layer.registerType('label')
+
+export default LabelLayer

src/modules/layer/type/PrimitiveLayer.js

@@ -0,0 +1,72 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-10-11 18:16:47
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+import Layer from '../Layer'
+
+/**
+ * PrimitiveLayer is used to add primitive
+ */
+class PrimitiveLayer extends Layer {
+  constructor(id) {
+    super(id)
+    this._delegate = new Cesium.PrimitiveCollection()
+    this._points = this._delegate.add(new Cesium.PointPrimitiveCollection())
+    this._labels = this._delegate.add(new Cesium.LabelCollection())
+    this._billboards = this._delegate.add(new Cesium.BillboardCollection())
+    this._polylines = this._delegate.add(new Cesium.PolylineCollection())
+    if (Cesium.CloudCollection) {
+      this._clouds = this._delegate.add(new Cesium.CloudCollection())
+    }
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return Layer.getLayerType('primitive')
+  }
+
+  get points() {
+    return this._points
+  }
+
+  get labels() {
+    return this._labels
+  }
+
+  get billboards() {
+    return this._billboards
+  }
+
+  get polylines() {
+    return this._polylines
+  }
+
+  get clouds() {
+    return this._clouds
+  }
+
+  /**
+   * Clears all primitives
+   * @returns {PrimitiveLayer}
+   */
+  clear() {
+    this._delegate && this._delegate.removeAll()
+    this._points = this._delegate.add(new Cesium.PointPrimitiveCollection())
+    this._labels = this._delegate.add(new Cesium.LabelCollection())
+    this._billboards = this._delegate.add(new Cesium.BillboardCollection())
+    this._polylines = this._delegate.add(new Cesium.PolylineCollection())
+    if (Cesium.CloudCollection) {
+      this._clouds = this._delegate.add(new Cesium.CloudCollection())
+    }
+    this._cache = {}
+    this._state = State.CLEARED
+    return this
+  }
+}
+
+Layer.registerType('primitive')
+
+export default PrimitiveLayer

src/modules/layer/type/TilesetLayer.js

@@ -0,0 +1,38 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-09 09:16:27
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+import Layer from '../Layer'
+
+/**
+ * TilesetLayer is used to add various tileset
+ */
+class TilesetLayer extends Layer {
+  constructor(id) {
+    super(id)
+    this._delegate = new Cesium.PrimitiveCollection()
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return Layer.getLayerType('tileset')
+  }
+
+  /**
+   * Clear all tileset
+   * @returns {TilesetLayer}
+   */
+  clear() {
+    this._delegate.removeAll()
+    this._cache = {}
+    this._state = State.CLEARED
+    return this
+  }
+}
+
+Layer.registerType('tileset')
+
+export default TilesetLayer

src/modules/layer/type/TopoJsonLayer.js

@@ -0,0 +1,26 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-09-11 19:32:22
+ */
+
+import State from '../../state/State'
+import GeoJsonLayer from './GeoJsonLayer'
+import Layer from '../Layer'
+
+class TopoJsonLayer extends GeoJsonLayer {
+  constructor(id, url, options = {}) {
+    if (!url) {
+      throw new Error('TopoJsonLayer：the url invalid')
+    }
+    super(id, url, options)
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return Layer.getLayerType('topojson')
+  }
+}
+
+GeoJsonLayer.registerType('topojson')
+
+export default TopoJsonLayer

src/modules/layer/type/VectorLayer.js

@@ -0,0 +1,39 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-02 16:42:03
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+import Layer from '../Layer'
+
+/**
+ * The vector layer is used to add various entity, which is essentially a CustomDataSource
+ * that is used to place entities of the same class or business attribute into the same layer
+ */
+class VectorLayer extends Layer {
+  constructor(id) {
+    super(id)
+    this._delegate = new Cesium.CustomDataSource(id)
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return Layer.getLayerType('vector')
+  }
+
+  /**
+   * Clears all entities
+   * @returns {VectorLayer}
+   */
+  clear() {
+    this._delegate.entities && this._delegate.entities.removeAll()
+    this._cache = {}
+    this._state = State.CLEARED
+    return this
+  }
+}
+
+Layer.registerType('vector')
+
+export default VectorLayer

src/modules/material/MaterialProperty.js

@@ -0,0 +1,41 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-02-27 22:33:50
+ */
+
+import { Cesium } from '@dc-modules/namespace'
+
+class MaterialProperty {
+  constructor(options = {}) {
+    this._definitionChanged = new Cesium.Event()
+    this._color = undefined
+    this._colorSubscription = undefined
+    this._speed = undefined
+    this._speedSubscription = undefined
+    this.color = options.color || Cesium.Color.fromBytes(0, 255, 255, 255)
+    this.speed = options.speed || 1
+  }
+
+  get isConstant() {
+    return false
+  }
+
+  get definitionChanged() {
+    return this._definitionChanged
+  }
+
+  getType(time) {
+    return null
+  }
+
+  getValue(time, result) {
+    result = Cesium.defaultValue(result, {})
+    return result
+  }
+
+  equals(other) {
+    return this === other
+  }
+}
+
+export default MaterialProperty

src/modules/material/index.js

@@ -0,0 +1,63 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-02-24 13:28:37
+ */
+
+// material
+
+export * from './type/thirdpart'
+export * from './type/circle'
+export * from './type/cylinder'
+export * from './type/ellipsoid'
+export * from './type/polyline'
+export * from './type/radar'
+export * from './type/wall'
+
+/**
+ * circle material property
+ */
+
+export { default as CircleBlurMaterialProperty } from './property/circle/CircleBlurMaterialProperty'
+export { default as CircleDiffuseMaterialProperty } from './property/circle/CircleDiffuseMaterialProperty'
+export { default as CircleFadeMaterialProperty } from './property/circle/CircleFadeMaterialProperty'
+export { default as CirclePulseMaterialProperty } from './property/circle/CirclePulseMaterialProperty'
+export { default as CircleScanMaterialProperty } from './property/circle/CircleScanMaterialProperty'
+export { default as CircleSpiralMaterialProperty } from './property/circle/CircleSpiralMaterialProperty'
+export { default as CircleVaryMaterialProperty } from './property/circle/CircleVaryMaterialProperty'
+export { default as CircleWaveMaterialProperty } from './property/circle/CircleWaveMaterialProperty'
+
+/**
+ * ellipsoid material property
+ */
+export { default as EllipsoidElectricMaterialProperty } from './property/ellipsoid/EllipsoidElectricMaterialProperty'
+export { default as EllipsoidTrailMaterialProperty } from './property/ellipsoid/EllipsoidTrailMaterialProperty'
+
+/**
+ * polyline material property
+ */
+
+export { default as PolylineFlickerMaterialProperty } from './property/polyline/PolylineFlickerMaterialProperty'
+export { default as PolylineFlowMaterialProperty } from './property/polyline/PolylineFlowMaterialProperty'
+export { default as PolylineImageTrailMaterialProperty } from './property/polyline/PolylineImageTrailMaterialProperty'
+export { default as PolylineLightingMaterialProperty } from './property/polyline/PolylineLightingMaterialProperty'
+export { default as PolylineLightingTrailMaterialProperty } from './property/polyline/PolylineLightingTrailMaterialProperty'
+export { default as PolylineTrailMaterialProperty } from './property/polyline/PolylineTrailMaterialProperty'
+
+/**
+ * radar material property
+ */
+export { default as RadarLineMaterialProperty } from './property/radar/RadarLineMaterialProperty'
+export { default as RadarSweepMaterialProperty } from './property/radar/RadarSweepMaterialProperty'
+export { default as RadarWaveMaterialProperty } from './property/radar/RadarWaveMaterialProperty'
+
+/**
+ * wall material property
+ */
+export { default as WallImageTrailMaterialProperty } from './property/wall/WallImageTrailMaterialProperty'
+export { default as WallLineTrailMaterialProperty } from './property/wall/WallLineTrailMaterialProperty'
+export { default as WallTrailMaterialProperty } from './property/wall/WallTrailMaterialProperty'
+
+/**
+ * water material property
+ */
+export { default as WaterMaterialProperty } from './property/water/WaterMaterialProperty'

src/modules/material/property/circle/CircleBlurMaterialProperty.js

@@ -0,0 +1,40 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-02-27 22:10:18
+ */
+
+import { Cesium } from '../../../../namespace'
+import MaterialProperty from '../../MaterialProperty'
+
+class CircleBlurMaterialProperty extends MaterialProperty {
+  constructor(options = {}) {
+    super(options)
+  }
+
+  getType(time) {
+    return Cesium.Material.CircleBlurType
+  }
+
+  getValue(time, result) {
+    result = Cesium.defaultValue(result, {})
+    result.color = Cesium.Property.getValueOrUndefined(this._color, time)
+    result.speed = this._speed
+    return result
+  }
+
+  equals(other) {
+    return (
+      this === other ||
+      (other instanceof CircleBlurMaterialProperty &&
+        Cesium.Property.equals(this._color, other._color) &&
+        Cesium.Property.equals(this._speed, other._speed))
+    )
+  }
+}
+
+Object.defineProperties(CircleBlurMaterialProperty.prototype, {
+  color: Cesium.createPropertyDescriptor('color'),
+  speed: Cesium.createPropertyDescriptor('speed'),
+})
+
+export default CircleBlurMaterialProperty

src/modules/material/property/circle/CircleDiffuseMaterialProperty.js

@@ -0,0 +1,40 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-02-27 22:10:18
+ */
+
+import { Cesium } from '../../../../namespace'
+import MaterialProperty from '../../MaterialProperty'
+
+class CircleDiffuseMaterialProperty extends MaterialProperty {
+  constructor(options = {}) {
+    super(options)
+  }
+
+  getType(time) {
+    return Cesium.Material.CircleDiffuseType
+  }
+
+  getValue(time, result) {
+    result = Cesium.defaultValue(result, {})
+    result.color = Cesium.Property.getValueOrUndefined(this._color, time)
+    result.speed = this._speed
+    return result
+  }
+
+  equals(other) {
+    return (
+      this === other ||
+      (other instanceof CircleDiffuseMaterialProperty &&
+        Cesium.Property.equals(this._color, other._color) &&
+        Cesium.Property.equals(this._speed, other._speed))
+    )
+  }
+}
+
+Object.defineProperties(CircleDiffuseMaterialProperty.prototype, {
+  color: Cesium.createPropertyDescriptor('color'),
+  speed: Cesium.createPropertyDescriptor('speed'),
+})
+
+export default CircleDiffuseMaterialProperty

src/modules/material/property/circle/CircleFadeMaterialProperty.js

@@ -0,0 +1,42 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-03-06 17:56:39
+ */
+
+import { Cesium } from '../../../../namespace'
+import MaterialProperty from '../../MaterialProperty'
+
+class CircleFadeMaterialProperty extends MaterialProperty {
+  constructor(options = {}) {
+    super(options)
+  }
+
+  getType(time) {
+    return Cesium.Material.CircleFadeType
+  }
+
+  getValue(time, result) {
+    if (!result) {
+      result = {}
+    }
+    result.color = Cesium.Property.getValueOrUndefined(this._color, time)
+    result.speed = this._speed
+    return result
+  }
+
+  equals(other) {
+    return (
+      this === other ||
+      (other instanceof CircleFadeMaterialProperty &&
+        Cesium.Property.equals(this._color, other._color) &&
+        Cesium.Property.equals(this._speed, other._speed))
+    )
+  }
+}
+
+Object.defineProperties(CircleFadeMaterialProperty.prototype, {
+  color: Cesium.createPropertyDescriptor('color'),
+  speed: Cesium.createPropertyDescriptor('speed'),
+})
+
+export default CircleFadeMaterialProperty

src/modules/material/property/circle/CirclePulseMaterialProperty.js

@@ -0,0 +1,42 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-02-27 23:03:44
+ */
+
+import { Cesium } from '../../../../namespace'
+import MaterialProperty from '../../MaterialProperty'
+
+class CirclePulseMaterialProperty extends MaterialProperty {
+  constructor(options = {}) {
+    super(options)
+  }
+
+  getType(time) {
+    return Cesium.Material.CirclePulseType
+  }
+
+  getValue(time, result) {
+    if (!result) {
+      result = {}
+    }
+    result.color = Cesium.Property.getValueOrUndefined(this._color, time)
+    result.speed = this._speed
+    return result
+  }
+
+  equals(other) {
+    return (
+      this === other ||
+      (other instanceof CirclePulseMaterialProperty &&
+        Cesium.Property.equals(this._color, other._color) &&
+        Cesium.Property.equals(this._speed, other._speed))
+    )
+  }
+}
+
+Object.defineProperties(CirclePulseMaterialProperty.prototype, {
+  color: Cesium.createPropertyDescriptor('color'),
+  speed: Cesium.createPropertyDescriptor('speed'),
+})
+
+export default CirclePulseMaterialProperty

src/modules/material/property/circle/CircleScanMaterialProperty.js

@@ -0,0 +1,42 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-01-09 20:23:53
+ */
+
+import { Cesium } from '../../../../namespace'
+import MaterialProperty from '../../MaterialProperty'
+
+class CircleScanMaterialProperty extends MaterialProperty {
+  constructor(options = {}) {
+    super(options)
+  }
+
+  getType(time) {
+    return Cesium.Material.CircleScanType
+  }
+
+  getValue(time, result) {
+    if (!result) {
+      result = {}
+    }
+    result.color = Cesium.Property.getValueOrUndefined(this._color, time)
+    result.speed = this._speed
+    return result
+  }
+
+  equals(other) {
+    return (
+      this === other ||
+      (other instanceof CircleScanMaterialProperty &&
+        Cesium.Property.equals(this._color, other._color) &&
+        Cesium.Property.equals(this._speed, other._speed))
+    )
+  }
+}
+
+Object.defineProperties(CircleScanMaterialProperty.prototype, {
+  color: Cesium.createPropertyDescriptor('color'),
+  speed: Cesium.createPropertyDescriptor('speed'),
+})
+
+export default CircleScanMaterialProperty

src/modules/material/property/circle/CircleSpiralMaterialProperty.js

@@ -0,0 +1,42 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-01-09 20:23:53
+ */
+
+import { Cesium } from '../../../../namespace'
+import MaterialProperty from '../../MaterialProperty'
+
+class CircleSpiralMaterialProperty extends MaterialProperty {
+  constructor(options = {}) {
+    super(options)
+  }
+
+  getType(time) {
+    return Cesium.Material.CircleSpiralType
+  }
+
+  getValue(time, result) {
+    if (!result) {
+      result = {}
+    }
+    result.color = Cesium.Property.getValueOrUndefined(this._color, time)
+    result.speed = this._speed
+    return result
+  }
+
+  equals(other) {
+    return (
+      this === other ||
+      (other instanceof CircleSpiralMaterialProperty &&
+        Cesium.Property.equals(this._color, other._color) &&
+        Cesium.Property.equals(this._speed, other._speed))
+    )
+  }
+}
+
+Object.defineProperties(CircleSpiralMaterialProperty.prototype, {
+  color: Cesium.createPropertyDescriptor('color'),
+  speed: Cesium.createPropertyDescriptor('speed'),
+})
+
+export default CircleSpiralMaterialProperty

src/modules/material/property/circle/CircleVaryMaterialProperty.js

@@ -0,0 +1,40 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-02-27 22:10:18
+ */
+
+import { Cesium } from '../../../../namespace'
+import MaterialProperty from '../../MaterialProperty'
+
+class CircleVaryMaterialProperty extends MaterialProperty {
+  constructor(options = {}) {
+    super(options)
+  }
+
+  getType(time) {
+    return Cesium.Material.CircleVaryType
+  }
+
+  getValue(time, result) {
+    result = Cesium.defaultValue(result, {})
+    result.color = Cesium.Property.getValueOrUndefined(this._color, time)
+    result.speed = this._speed
+    return result
+  }
+
+  equals(other) {
+    return (
+      this === other ||
+      (other instanceof CircleVaryMaterialProperty &&
+        Cesium.Property.equals(this._color, other._color) &&
+        Cesium.Property.equals(this._speed, other._speed))
+    )
+  }
+}
+
+Object.defineProperties(CircleVaryMaterialProperty.prototype, {
+  color: Cesium.createPropertyDescriptor('color'),
+  speed: Cesium.createPropertyDescriptor('speed'),
+})
+
+export default CircleVaryMaterialProperty

src/modules/material/property/circle/CircleWaveMaterialProperty.js

@@ -0,0 +1,54 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-03-06 17:56:39
+ */
+
+import { Cesium } from '../../../../namespace'
+import MaterialProperty from '../../MaterialProperty'
+
+class CircleWaveMaterialProperty extends MaterialProperty {
+  constructor(options = {}) {
+    super(options)
+    this.count = Math.max(options.count || 3, 1)
+    this.gradient = Cesium.Math.clamp(options.gradient || 0.1, 0, 1)
+  }
+
+  get isConstant() {
+    return false
+  }
+
+  get definitionChanged() {
+    return this._definitionChanged
+  }
+
+  getType(time) {
+    return Cesium.Material.CircleWaveType
+  }
+
+  getValue(time, result) {
+    if (!result) {
+      result = {}
+    }
+    result.color = Cesium.Property.getValueOrUndefined(this._color, time)
+    result.speed = this._speed
+    result.count = this.count
+    result.gradient = this.gradient
+    return result
+  }
+
+  equals(other) {
+    return (
+      this === other ||
+      (other instanceof CircleWaveMaterialProperty &&
+        Cesium.Property.equals(this._color, other._color) &&
+        Cesium.Property.equals(this._speed, other._speed))
+    )
+  }
+}
+
+Object.defineProperties(CircleWaveMaterialProperty.prototype, {
+  color: Cesium.createPropertyDescriptor('color'),
+  speed: Cesium.createPropertyDescriptor('speed'),
+})
+
+export default CircleWaveMaterialProperty

src/modules/material/property/ellipsoid/EllipsoidElectricMaterialProperty.js

@@ -0,0 +1,40 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-03-04 22:10:18
+ */
+
+import { Cesium } from '../../../../namespace'
+import MaterialProperty from '../../MaterialProperty'
+
+class EllipsoidElectricMaterialProperty extends MaterialProperty {
+  constructor(options = {}) {
+    super(options)
+  }
+
+  getType(time) {
+    return Cesium.Material.EllipsoidElectricType
+  }
+
+  getValue(time, result) {
+    result = Cesium.defaultValue(result, {})
+    result.color = Cesium.Property.getValueOrUndefined(this._color, time)
+    result.speed = this._speed
+    return result
+  }
+
+  equals(other) {
+    return (
+      this === other ||
+      (other instanceof EllipsoidElectricMaterialProperty &&
+        Cesium.Property.equals(this._color, other._color) &&
+        Cesium.Property.equals(this._speed, other._speed))
+    )
+  }
+}
+
+Object.defineProperties(EllipsoidElectricMaterialProperty.prototype, {
+  color: Cesium.createPropertyDescriptor('color'),
+  speed: Cesium.createPropertyDescriptor('speed'),
+})
+
+export default EllipsoidElectricMaterialProperty

src/modules/material/property/ellipsoid/EllipsoidTrailMaterialProperty.js

@@ -0,0 +1,40 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-03-04 22:10:18
+ */
+
+import { Cesium } from '../../../../namespace'
+import MaterialProperty from '../../MaterialProperty'
+
+class EllipsoidTrailMaterialProperty extends MaterialProperty {
+  constructor(options = {}) {
+    super(options)
+  }
+
+  getType(time) {
+    return Cesium.Material.EllipsoidTrailType
+  }
+
+  getValue(time, result) {
+    result = Cesium.defaultValue(result, {})
+    result.color = Cesium.Property.getValueOrUndefined(this._color, time)
+    result.speed = this._speed
+    return result
+  }
+
+  equals(other) {
+    return (
+      this === other ||
+      (other instanceof EllipsoidTrailMaterialProperty &&
+        Cesium.Property.equals(this._color, other._color) &&
+        Cesium.Property.equals(this._speed, other._speed))
+    )
+  }
+}
+
+Object.defineProperties(EllipsoidTrailMaterialProperty.prototype, {
+  color: Cesium.createPropertyDescriptor('color'),
+  speed: Cesium.createPropertyDescriptor('speed'),
+})
+
+export default EllipsoidTrailMaterialProperty

src/modules/material/property/polyline/PolylineEmissionMaterialProperty.js

@@ -0,0 +1,39 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-02-26 10:15:55
+ */
+
+import { Cesium } from '../../../../namespace'
+import MaterialProperty from '../../MaterialProperty'
+
+class PolylineEmissionMaterialProperty extends MaterialProperty {
+  constructor(options = {}) {
+    super(options)
+  }
+
+  getType(time) {
+    return Cesium.Material.PolylineEmissionType
+  }
+
+  getValue(time, result) {
+    if (!result) {
+      result = {}
+    }
+    result.color = Cesium.Property.getValueOrUndefined(this._color, time)
+    return result
+  }
+
+  equals(other) {
+    return (
+      this === other ||
+      (other instanceof PolylineEmissionMaterialProperty &&
+        Cesium.Property.equals(this._color, other._color))
+    )
+  }
+}
+
+Object.defineProperties(PolylineEmissionMaterialProperty.prototype, {
+  color: Cesium.createPropertyDescriptor('color'),
+})
+
+export default PolylineEmissionMaterialProperty

src/modules/material/property/polyline/PolylineFlickerMaterialProperty.js

@@ -0,0 +1,42 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-01-11 21:08:02
+ */
+
+import { Cesium } from '../../../../namespace'
+import MaterialProperty from '../../MaterialProperty'
+
+class PolylineFlickerMaterialProperty extends MaterialProperty {
+  constructor(options = {}) {
+    super(options)
+  }
+
+  getType(time) {
+    return Cesium.Material.PolylineFlickerType
+  }
+
+  getValue(time, result) {
+    if (!result) {
+      result = {}
+    }
+    result.color = Cesium.Property.getValueOrUndefined(this._color, time)
+    result.speed = this._speed
+    return result
+  }
+
+  equals(other) {
+    return (
+      this === other ||
+      (other instanceof PolylineFlickerMaterialProperty &&
+        Cesium.Property.equals(this._color, other._color) &&
+        Cesium.Property.equals(this._speed, other._speed))
+    )
+  }
+}
+
+Object.defineProperties(PolylineFlickerMaterialProperty.prototype, {
+  color: Cesium.createPropertyDescriptor('color'),
+  speed: Cesium.createPropertyDescriptor('speed'),
+})
+
+export default PolylineFlickerMaterialProperty