添加聚合图层

src/core/DC.js

  * @Author: Caven
  * @Date: 2019-12-27 14:29:05
  * @Last Modified by: Caven
- * @Last Modified time: 2020-01-31 17:17:07
+ * @Last Modified time: 2020-02-10 10:47:17
  */
 ;(function() {
   let namespace = {}
     Version: '1.0.0',
     Config: {}
   }
+
+  delete window.DC
+
   window.DC = DC
+
   function requireCesium() {
     return new Promise((resolve, reject) => {
       let Cesium = require('cesium/Cesium')
   }
 
   /**
-   * 获取 namespace
+   *  namespace
    */
   DC.getNamespace = function() {
     return namespace
   }
 
   /**
-   * 开始
+   *  start
    */
   DC.init = function(callback) {
     DC.ready(callback)
   }
 
   /**
-   * 开始
+   * start
    */
   DC.ready = function(callback) {
     try {
           require('./DC.Loader')
           delete window.Cesium //删除winow下的Cesium
         })
+        initialized = true
       }
       callback && callback()
-      initialized = true
     } catch (e) {
       delete window.Cesium
       initialized = false

src/core/const/index.js

  * @Author: Caven
  * @Date: 2020-01-03 10:09:19
  * @Last Modified by: Caven
- * @Last Modified time: 2020-02-01 13:52:48
+ * @Last Modified time: 2020-02-10 11:30:45
  */
 import Cesium from '@/namespace'
 
   TILESET: 'tileset',
   KML: 'kml',
   CZML: 'czml',
-  GEOJSON: 'geojson'
+  GEOJSON: 'geojson',
+  CLUSTER: 'cluster'
 }
 
 DC.LayerEventType = {

src/core/layer/DC.ClusterLayer.js

+/*
+ * @Author: Caven
+ * @Date: 2020-02-10 10:05:41
+ * @Last Modified by: Caven
+ * @Last Modified time: 2020-02-10 15:11:15
+ */
+import Cesium from '@/namespace'
+import Layer from './Layer'
+
+const DEF_OPT = {
+  size: 48,
+  pixelRange: 40,
+  gradient: {
+    0.0001: Cesium.Color.BLUE,
+    0.001: Cesium.Color.GREEN,
+    0.01: Cesium.Color.ORANGE,
+    0.1: Cesium.Color.RED
+  },
+  fontSize: 14,
+  fontColor: Cesium.Color.BLACK
+}
+
+DC.ClusterLayer = class 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._cicleCache = {}
+    this._delegate.clustering.pixelRange = this._options.pixelRange
+    this._state = DC.LayerState.INITIALIZED
+    this.type = DC.LayerType.CLUSTER
+  }
+
+  _drawCircle(color) {
+    let key = color.toCssColorString()
+    let size = this._options.size
+    if (!this._cicleCache[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, 12, 0, 2 * Math.PI)
+      context2D.closePath()
+      context2D.fill()
+      context2D.beginPath()
+      context2D.arc(12, 12, 9, 0, 2 * Math.PI)
+      context2D.fillStyle = color.toCssColorString()
+      context2D.fill()
+      context2D.closePath()
+      context2D.restore()
+      this._cicleCache[key] = canvas.toDataURL()
+    }
+    return this._cicleCache[key]
+  }
+
+  _clusterEventHandler(clusteredEntities, cluster) {
+    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) {
+          cluster.billboard.image = this._drawCircle(
+            this._options.gradient[key]
+          )
+          cluster.label.show = true
+          let numLenth = String(clusteredEntities.length + ',').length
+          cluster.label.pixelOffset = new Cesium.Cartesian2(
+            -(this._options.size / this._options.fontSize) * (numLenth - 1),
+            6
+          )
+        } else if (clusteredEntities.length <= 1) {
+          cluster.label.show = false
+        }
+      }
+    }
+  }
+
+  addOverlays(overlays) {
+    if (Array.isArray(overlays)) {
+      overlays.forEach(item => {
+        this.addOverlay(item)
+      })
+    }
+    return this
+  }
+
+  toVectorLayer() {}
+
+  clear() {
+    this._cache = {}
+    this._delegate.entities.removeAll()
+    this._state = DC.LayerState.CLEARED
+    return this
+  }
+}

src/core/layer/DC.GeoJsonLayer.js

  * @Author: Caven
  * @Date: 2020-01-13 10:13:53
  * @Last Modified by: Caven
- * @Last Modified time: 2020-02-03 13:44:14
+ * @Last Modified time: 2020-02-10 11:17:23
  */
 import Cesium from '@/namespace'
 import Layer from './Layer'
     this.type = DC.LayerType.GEOJSON
   }
 
-  _addCallback(viewer) {
-    this._viewer = viewer
-    this._viewer.delegate.dataSources.add(this._delegate)
-    this._state = DC.LayerState.ADDED
-  }
-
-  _removeCallback() {
-    if (this._viewer) {
-      this._cache = {}
-      this._delegate.removeAll()
-      this._viewer.delegate.dataSources.remove(this._delegate)
-      this._state = DC.LayerState.REMOVED
-    }
-  }
-
   _createBillboard(entity) {
     if (entity.position && entity.billboard) {
       return DC.Billboard.fromEntity(entity)
     }
   }
 
-  clear() {
-    this._cache = {}
-    this._delegate.removeAll()
-    this._state = DC.LayerState.CLEARED
-    return this
-  }
-
   /**
    *
    */

src/core/layer/DC.TilesetLayer.js

  * @Author: Caven
  * @Date: 2020-01-09 09:16:27
  * @Last Modified by: Caven
- * @Last Modified time: 2020-02-02 14:10:48
+ * @Last Modified time: 2020-02-10 11:17:13
  */
 
 import Cesium from '@/namespace'
     this.type = DC.LayerType.TILESET
   }
 
-  _addCallback(viewer) {
-    this._viewer = viewer
-    this._viewer.delegate.scene.primitives.add(this._delegate)
-    this._state = DC.LayerState.ADDED
-  }
-
-  _removeCallback() {
-    if (this._viewer) {
-      this._cache = {}
-      this._delegate.removeAll()
-      this._viewer.delegate.scene.primitives.remove(this._delegate)
-      this._state = DC.LayerState.REMOVED
-    }
-  }
-
   clear() {
     this._cache = {}
     this._delegate.removeAll()

src/core/layer/DC.VectorLayer.js

  * @Author: Caven
  * @Date: 2020-01-02 16:42:03
  * @Last Modified by: Caven
- * @Last Modified time: 2020-01-31 15:05:19
+ * @Last Modified time: 2020-02-11 11:14:53
  */
 
 import Cesium from '@/namespace'
     this.type = DC.LayerType.VECTOR
   }
 
-  _addCallback(viewer) {
-    this._viewer = viewer
-    this._viewer.delegate.dataSources.add(this._delegate)
-    this._state = DC.LayerState.ADDED
-  }
-
-  _removeCallback() {
-    if (this._viewer) {
-      this._cache = {}
-      this._delegate.removeAll()
-      this._viewer.delegate.dataSources.remove(this._delegate)
-      this._state = DC.LayerState.REMOVED
-    }
-  }
-
   clear() {
     this._cache = {}
-    this._delegate.removeAll()
+    this._delegate.entities.removeAll()
     this._state = DC.LayerState.CLEARED
     return this
   }

src/core/layer/Layer.js

  * @Author: Caven
  * @Date: 2020-01-03 09:38:21
  * @Last Modified by: Caven
- * @Last Modified time: 2020-02-02 14:18:15
+ * @Last Modified time: 2020-02-11 11:15:30
  */
+import Cesium from '@/namespace'
 import LayerEvent from '../event/LayerEvent'
 
 class Layer {
     this._layerEvent = new LayerEvent()
     this._layerEvent.on(DC.LayerEventType.ADD, this._addCallback, this)
     this._layerEvent.on(DC.LayerEventType.REMOVE, this._removeCallback, this)
-    this._layerEvent.on(DC.LayerEventType.ADD_OVERLAY, this._addOverlayCallback, this)
-    this._layerEvent.on(DC.LayerEventType.REMOVE_OVERLAY, this._removeOverlayCallback, this)
+    this._layerEvent.on(
+      DC.LayerEventType.ADD_OVERLAY,
+      this._addOverlayCallback,
+      this
+    )
+    this._layerEvent.on(
+      DC.LayerEventType.REMOVE_OVERLAY,
+      this._removeOverlayCallback,
+      this
+    )
     this.type = undefined
   }
 
    * subclasses need to be overridden
    */
 
-  _addCallback(veiwer) {}
+  _addCallback(viewer) {
+    this._viewer = viewer
+    if (this._delegate && this._delegate instanceof Cesium.CustomDataSource) {
+      this._viewer.delegate.dataSources.add(this._delegate)
+      this._state = DC.LayerState.ADDED
+    } else if (
+      this._delegate &&
+      this._delegate instanceof Cesium.PrimitiveCollection
+    ) {
+      this._viewer.delegate.scene.primitives.add(this._delegate)
+      this._state = DC.LayerState.ADDED
+    }
+  }
 
   /**
    * the layer removed callback function
    * subclasses need to be overridden
    */
-  _removeCallback() {}
+  _removeCallback() {
+    if (this._viewer) {
+      this._cache = {}
+      if (this._delegate && this._delegate instanceof Cesium.CustomDataSource) {
+        this._delegate.entities.removeAll()
+        this._viewer.delegate.dataSources.remove(this._delegate)
+        this._state = DC.LayerState.REMOVED
+      } else if (
+        this._delegate &&
+        this._delegate instanceof Cesium.PrimitiveCollection
+      ) {
+        this._delegate.removeAll()
+        this._viewer.delegate.scene.primitives.remove(this._delegate)
+        this._state = DC.LayerState.REMOVED
+      }
+    }
+  }
 
   /**
    *
    * the layer add overlay callback function
    */
   _addOverlayCallback(overlay) {
-    if (overlay && overlay.overlayEvent && overlay.state !== DC.OverlayState.ADDED) {
+    if (
+      overlay &&
+      overlay.overlayEvent &&
+      overlay.state !== DC.OverlayState.ADDED
+    ) {
       overlay.overlayEvent.fire(DC.OverlayEventType.ADD, this)
       this._cache[overlay.id] = overlay
     }
    * the layer remove overlay callback function
    */
   _removeOverlayCallback(overlay) {
-    if (overlay && overlay.overlayEvent && overlay.state !== DC.OverlayState.REMOVED) {
+    if (
+      overlay &&
+      overlay.overlayEvent &&
+      overlay.state !== DC.OverlayState.REMOVED
+    ) {
       overlay.overlayEvent.fire(DC.OverlayEventType.REMOVE, this)
       delete this._cache[overlay.id]
     }
     return this
   }
 
+  /**
+   *
+   */
   clear() {}
 
   /**

src/core/layer/index.js

  * @Author: Caven
  * @Date: 2020-01-03 11:06:26
  * @Last Modified by: Caven
- * @Last Modified time: 2020-01-31 15:05:24
+ * @Last Modified time: 2020-02-10 12:33:54
  */
 import './DC.VectorLayer'
 import './DC.TilesetLayer'
 import './DC.GeoJsonLayer'
+import './DC.ClusterLayer'

src/core/overlay/base/DC.Billboard.js

  * @Author: Caven
  * @Date: 2020-01-19 10:18:23
  * @Last Modified by: Caven
- * @Last Modified time: 2020-02-01 18:31:04
+ * @Last Modified time: 2020-02-10 12:41:11
  */
 
 import Cesium from '@/namespace'
       throw new Error('the position invalid')
     }
     super()
+
     this._position = position
     this._icon = icon
     this._size = [32, 32]

src/core/overlay/base/DC.Polygon.js

  * @Author: Caven
  * @Date: 2020-01-09 09:10:37
  * @Last Modified by: Caven
- * @Last Modified time: 2020-02-04 15:24:43
+ * @Last Modified time: 2020-02-06 20:29:32
  */
 import Overlay from '../Overlay'
 import Cesium from '@/namespace'
     return result
   }
 
+  /**
+   * prepare entity
+   */
   _prepareDelegate() {
     /**
      *  initialize the Overlay parameter
     this._delegate.overlayId = this._id
   }
 
-  _addCallback(layer) {
-    this._layer = layer
-    this._prepareDelegate()
-    this._layer.delegate.entities.add(this._delegate)
-    this._state = DC.OverlayState.ADDED
-  }
-
-  _removeCallback() {
-    if (this._layer) {
-      this._layer.delegate.entities.remove(this._delegate)
-      this._state = DC.OverlayState.REMOVED
-    }
-  }
-
   /**
    *
    * @param {*} extrudedHeight
       this._delegate.polygon.extrudedHeight = new Cesium.CallbackProperty(
         time => {
           let result = 0
-          if (DC.JulianDate.greaterThan(stopTime, time)) {
+          if (Cesium.JulianDate.greaterThan(stopTime, time)) {
             result =
               oriValue +
               (duration - Cesium.JulianDate.secondsDifference(stopTime, time)) *
     this._delegate.polygon && this._delegate.polygon.merge(style)
     return this
   }
-
   static fromEntity(entity) {}
 }

src/core/overlay/model/DC.Tileset.js

  * @Author: Caven
  * @Date: 2020-01-07 08:51:56
  * @Last Modified by: Caven
- * @Last Modified time: 2020-02-03 13:41:06
+ * @Last Modified time: 2020-02-06 16:28:52
  */
 import Cesium from '@/namespace'
 import Overlay from '../Overlay'
     })
     this._state = DC.OverlayState.INITIALIZED
     this._delegate.tileVisible.addEventListener(this._tileVisibleHandler, this)
-    this._propertyMap = undefined
+    this._height = undefined
+    this._properties = undefined
+    this._stopTime = undefined
+    this._duration = undefined
+    this._center = undefined
   }
 
   /**
    * @param {*} tile
    */
   _tileVisibleHandler(tile) {
+    this._updateProperties(tile)
+    this._updateHeight(tile)
+  }
+
+  /**
+   *
+   * @param {*} tile
+   */
+  _updateProperties(tile) {
     if (this._properties && this._properties.length) {
       let content = tile.content
       for (let i = 0; i < content.featuresLength; i++) {
       }
     }
   }
+  /**
+   *
+   * @param {*} height
+   */
+  _updateHeight(tile) {
+    if (this._duration) {
+      let rate = this._height / this._duration
+      let now = Cesium.JulianDate.now()
+      if (
+        this._stopTime &&
+        Cesium.JulianDate.greaterThan(this._stopTime, now)
+      ) {
+        this._setHeight(
+          (this._duration -
+            Cesium.JulianDate.secondsDifference(this._stopTime, now)) *
+            rate
+        )
+      }
+    }
+  }
+
+  /**
+   *
+   * @param {*} height
+   */
+  _setHeight(height) {
+    this._delegate.readyPromise.then(tileset => {
+      let surface = Cesium.Cartesian3.fromRadians(
+        this._center.longitude,
+        this._center.latitude,
+        this._center.height
+      )
+      let offset = Cesium.Cartesian3.fromRadians(
+        this._center.longitude,
+        this._center.latitude,
+        this._center.height + height
+      )
+      let translation = Cesium.Cartesian3.subtract(
+        offset,
+        surface,
+        new Cesium.Cartesian3()
+      )
+      tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation)
+    })
+  }
 
   /**
    *
    *
    * @param {*} height
    */
-  setHeight(height) {
+  setHeight(height, duration) {
+    this._height = height
     this._delegate.readyPromise.then(tileset => {
-      let cartographic = Cesium.Cartographic.fromCartesian(
+      this._center = Cesium.Cartographic.fromCartesian(
         tileset.boundingSphere.center
       )
-      let surface = Cesium.Cartesian3.fromRadians(
-        cartographic.longitude,
-        cartographic.latitude,
-        cartographic.height
-      )
-      let offset = Cesium.Cartesian3.fromRadians(
-        cartographic.longitude,
-        cartographic.latitude,
-        cartographic.height + height
-      )
-      let translation = Cesium.Cartesian3.subtract(
-        offset,
-        surface,
-        new Cesium.Cartesian3()
-      )
-      tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation)
+      if (duration) {
+        this._duration = duration
+        this._stopTime = Cesium.JulianDate.addSeconds(
+          Cesium.JulianDate.now(),
+          duration,
+          new Cesium.JulianDate()
+        )
+      } else {
+        this._setHeight(this._height)
+      }
     })
     return this
   }

src/core/position/DC.Position.js

  * @Author: Caven
  * @Date: 2019-12-27 14:35:02
  * @Last Modified by: Caven
- * @Last Modified time: 2020-02-03 14:37:45
+ * @Last Modified time: 2020-02-10 12:11:36
  */
 
 DC.Position = class {

src/plugins/DC.Pulgins.Loader.js

  * @Author: Caven
  * @Date: 2020-01-14 18:24:57
  * @Last Modified by: Caven
- * @Last Modified time: 2020-01-31 17:48:44
+ * @Last Modified time: 2020-02-06 19:40:32
  */
 import './animation/DC.GlobeRotate'
 import './roaming/DC.Roaming'
 import './plot/DC.Plot'
+import './overlay'

src/plugins/DC.Pulgins.js

  * @Author: Caven
  * @Date: 2020-01-14 18:22:10
  * @Last Modified by: Caven
- * @Last Modified time: 2020-01-31 15:09:47
+ * @Last Modified time: 2020-02-04 19:03:08
  */
 ;(function() {
   let initialized = false

src/plugins/overlay/DC.CustomPolygon.js

+/*
+ * @Author: Caven
+ * @Date: 2020-02-06 13:11:58
+ * @Last Modified by: Caven
+ * @Last Modified time: 2020-02-06 20:46:58
+ */
+import Cesium from '@/namespace'
+import '../../core/overlay/base/DC.Polygon'
+
+DC.CustomPolygon = class extends DC.Polygon {
+  constructor(positions) {
+    super(positions)
+    this._topOutline = undefined
+    this._bottomOutline = undefined
+    this._topOutline = new Cesium.Entity({
+      polyline: {
+        positions: this._computePolylinePositions(0)
+      },
+      show: false
+    })
+    this._bottomOutline = new Cesium.Entity({
+      polyline: {
+        positions: this._computePolylinePositions(0)
+      },
+      show: false
+    })
+  }
+
+  set show(show) {
+    this._show = show
+    this._delegate && (this._delegate.show = show)
+    this._topOutline && (this._topOutline.show = show)
+    this._bottomOutline && (this._bottomOutline = show)
+  }
+
+  get show() {
+    return this._show
+  }
+
+  /**
+   *
+   * @param {*} height
+   */
+  _computePolylinePositions(height) {
+    let positions = this._positions.slice(0)
+    positions.push(positions[0])
+    positions.forEach(item => {
+      item.alt = height
+    })
+    return DC.T.transformWSG84ArrayToCartesianArray(positions)
+  }
+
+  /**
+   *
+   * @param {*} layer
+   */
+  _addCallback(layer) {
+    this._layer = layer
+    this._prepareDelegate()
+    if (this._layer && this._layer.delegate && this._layer.delegate.entities) {
+      this._layer.delegate.entities.add(this._delegate)
+      this._layer.delegate.entities.add(this._topOutline)
+      this._layer.delegate.entities.add(this._bottomOutline)
+      this._state = DC.OverlayState.ADDED
+    }
+  }
+
+  /**
+   *
+   */
+  _removeCallback() {
+    if (this._layer && this._layer.delegate && this._layer.delegate.entities) {
+      this._layer.delegate.entities.remove(this._delegate)
+      this._layer.delegate.entities.remove(this._topOutline)
+      this._layer.delegate.entities.remove(this._bottomOutline)
+      this._state = DC.OverlayState.REMOVED
+    }
+  }
+
+  /**
+   *
+   * @param {*} extrudedHeight
+   * @param {*} duration
+   */
+  setExtrudedHeight(extrudedHeight, duration) {
+    if (this._delegate.polygon) {
+      let now = Cesium.JulianDate.now()
+      let oriValue = this._delegate.polygon.extrudedHeight
+        ? this._delegate.polygon.extrudedHeight.getValue(now)
+        : 0
+      let rate = 0
+      let stopTime = now
+      if (duration) {
+        rate = (extrudedHeight - oriValue) / duration
+        stopTime = DC.JulianDate.addSeconds(
+          now,
+          duration,
+          new Cesium.JulianDate()
+        )
+      }
+      this._delegate.polygon.extrudedHeight = new Cesium.CallbackProperty(
+        time => {
+          let result = 0
+          if (Cesium.JulianDate.greaterThan(stopTime, time)) {
+            result =
+              oriValue +
+              (duration - Cesium.JulianDate.secondsDifference(stopTime, time)) *
+                rate
+          } else {
+            result = extrudedHeight
+          }
+          return result
+        }
+      )
+      if (this._topOutline && this._topOutline.show) {
+        this._topOutline.polyline.positions = new Cesium.CallbackProperty(
+          time => {
+            let result = []
+            if (Cesium.JulianDate.greaterThan(stopTime, time)) {
+              result = this._computePolylinePositions(
+                oriValue +
+                  (duration -
+                    Cesium.JulianDate.secondsDifference(stopTime, time)) *
+                    rate
+              )
+            } else {
+              result = this._computePolylinePositions(extrudedHeight)
+            }
+            return result
+          }
+        )
+      }
+    }
+    return this
+  }
+
+  /**
+   *
+   * @param {*} lineStyle
+   */
+  setTopOutline(lineStyle) {
+    if (this._topOutline) {
+      this._topOutline.show = true
+      this._topOutline.polyline.merge(lineStyle)
+    }
+    return this
+  }
+
+  /**
+   *
+   * @param {*} lineStyle
+   */
+  setBottomOutline(lineStyle) {
+    if (this._bottomOutline) {
+      this._bottomOutline.show = true
+      this._bottomOutline.polyline.merge(lineStyle)
+    }
+    return this
+  }
+}

src/plugins/overlay/index.js

+/*
+ * @Author: Caven
+ * @Date: 2020-02-06 19:40:43
+ * @Last Modified by: Caven
+ * @Last Modified time: 2020-02-06 19:41:38
+ */
+import './DC.CustomPolygon'

src/thirdpart/index.js

  * @Author: Caven
  * @Date: 2019-12-30 09:35:51
  * @Last Modified by: Caven
- * @Last Modified time: 2020-02-04 14:21:26
+ * @Last Modified time: 2020-02-06 20:46:21
  */
 import Cesium from '@/namespace'
 
 DC.Color = Cesium.Color
-
 DC.Cartesian2 = Cesium.Cartesian2
 DC.Cartesian3 = Cesium.Cartesian3
 DC.Cartesian4 = Cesium.Cartesian4
+
 DC.TilesetStyle = Cesium.Cesium3DTileStyle
-DC.SceneMode = Cesium.SceneMode
 
+DC.SceneMode = Cesium.SceneMode
 DC.CallbackProperty = Cesium.CallbackProperty
 DC.JulianDate = Cesium.JulianDate
-
 DC.Math = Cesium.Math
+
+DC.PolylineDashMaterialProperty = Cesium.PolylineDashMaterialProperty
+DC.PolylineGlowMaterialProperty = Cesium.PolylineGlowMaterialProperty
+DC.PolylineOutlineMaterialProperty = Cesium.PolylineOutlineMaterialProperty