添加HTML图层以及DivIcon

src/core/const/index.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-01-03 10:09:19
  * @Last Modified by: Caven
- * @Last Modified time: 2020-02-11 18:37:36
+ * @Last Modified time: 2020-02-12 22:04:00
  */
 import Cesium from '@/namespace'
 
@@ -26,10 +26,12 @@ DC.ViewerEventType = {
 DC.LayerType = {
   VECTOR: 'vector',
   TILESET: 'tileset',
+  CLUSTER: 'cluster',
+  GEOJSON: 'geojson',
   KML: 'kml',
   CZML: 'czml',
-  GEOJSON: 'geojson',
-  CLUSTER: 'cluster'
+  HTML: 'html',
+  HEAT: 'heat'
 }
 
 DC.LayerEventType = {

src/core/layer/DC.GeoJsonLayer.js

@@ -2,13 +2,16 @@
  * @Author: Caven
  * @Date: 2020-01-13 10:13:53
  * @Last Modified by: Caven
- * @Last Modified time: 2020-02-11 18:59:58
+ * @Last Modified time: 2020-02-12 22:04:26
  */
 import Cesium from '@/namespace'
 import Layer from './Layer'
 
 DC.GeoJsonLayer = class extends Layer {
   constructor(id, url) {
+    if (!url) {
+      throw new Error('the url is empty')
+    }
     super(id)
     this._delegate = Cesium.GeoJsonDataSource.load(url)
     this._state = DC.LayerState.INITIALIZED

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

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-01-31 18:57:02
  * @Last Modified by: Caven
- * @Last Modified time: 2020-02-01 18:29:13
+ * @Last Modified time: 2020-02-12 21:38:00
  */
 import Cesium from '@/namespace'
 import Overlay from '../Overlay'
@@ -14,7 +14,7 @@ DC.Circle = class extends Overlay {
     }
     super()
     this._center = center
-    this._redius = redius
+    this._radius = redius
     this._delegate = new Cesium.Entity()
     this._state = DC.OverlayState.INITIALIZED
     this.type = DC.OverlayType.CIRCLE
@@ -29,7 +29,7 @@ DC.Circle = class extends Overlay {
   }
 
   set radius(radius) {
-    this._redius = radius
+    this._radius = radius
   }
 
   get radius() {
@@ -51,11 +51,11 @@ DC.Circle = class extends Overlay {
      */
     this._delegate.orientation = new Cesium.CallbackProperty(time => {
       return Cesium.Transforms.headingPitchRollQuaternion(
-        DC.T.transformWSG84ToCartesian(this._position),
+        DC.T.transformWSG84ToCartesian(this._center),
         new Cesium.HeadingPitchRoll(
-          Cesium.Math.toRadians(this._position.heading),
-          Cesium.Math.toRadians(this._position.pitch),
-          Cesium.Math.toRadians(this._position.roll)
+          Cesium.Math.toRadians(this._center.heading),
+          Cesium.Math.toRadians(this._center.pitch),
+          Cesium.Math.toRadians(this._center.roll)
         )
       )
     })

src/plugins/DC.Pulgins.Loader.js

@@ -2,9 +2,10 @@
  * @Author: Caven
  * @Date: 2020-01-14 18:24:57
  * @Last Modified by: Caven
- * @Last Modified time: 2020-02-06 19:40:32
+ * @Last Modified time: 2020-02-12 22:22:19
  */
 import './animation/DC.GlobeRotate'
 import './roaming/DC.Roaming'
 import './plot/DC.Plot'
+import './layer'
 import './overlay'

src/plugins/layer/DC.CzmlLayer.js

@@ -2,7 +2,32 @@
  * @Author: Caven
  * @Date: 2020-01-19 13:38:48
  * @Last Modified by: Caven
- * @Last Modified time: 2020-01-19 13:40:27
+ * @Last Modified time: 2020-02-12 22:04:13
  */
 
-DC.CzmlLayer = class {}
+import Cesium from '@/namespace'
+import Layer from '../../core/layer/Layer'
+
+DC.CzmlLayer = class extends Layer {
+  constructor(id, url) {
+    if (!url) {
+      throw new Error('the url is empty')
+    }
+    super(id)
+    this._delegate = Cesium.CzmlDataSource.load(url, {})
+    this._state = DC.LayerState.INITIALIZED
+    this.type = DC.LayerType.CZML
+  }
+
+  eachOverlay(method, context) {
+    if (this._delegate) {
+      this._delegate.then(dataSource => {
+        let entities = dataSource.entities.values
+        entities.forEach(item => {
+          method.call(context, item)
+        })
+      })
+      return this
+    }
+  }
+}

src/plugins/layer/DC.HtmlLayer.js

@@ -0,0 +1,85 @@
+/*
+ * @Author: Caven
+ * @Date: 2020-02-12 21:43:33
+ * @Last Modified by: Caven
+ * @Last Modified time: 2020-02-12 23:41:02
+ */
+/*
+ * @Author: Caven
+ * @Date: 2020-01-19 11:03:17
+ * @Last Modified by: Caven
+ * @Last Modified time: 2020-02-12 22:05:57
+ */
+/*
+ * @Author: Caven
+ * @Date: 2020-01-19 13:38:48
+ * @Last Modified by: Caven
+ * @Last Modified time: 2020-02-12 22:04:13
+ */
+
+import Cesium from '@/namespace'
+import Layer from '../../core/layer/Layer'
+
+DC.HtmlLayer = class extends Layer {
+  constructor(id) {
+    super(id)
+    this._delegate = DC.DomUtil.create('div', 'html-layer')
+    this._delegate.setAttribute('id', this._id)
+    this._state = DC.LayerState.INITIALIZED
+    this.type = DC.LayerType.HTML
+    this._renderCallback = undefined
+  }
+
+  set show(show) {
+    this._show = show
+    this._delegate.style.visibility = this._show ? 'visible' : 'hidden'
+  }
+
+  get show() {
+    return this._show
+  }
+  /**
+   *
+   * @param {*} veiwer
+   * the layer added callback function
+   * subclasses need to be overridden
+   */
+
+  _addCallback(viewer) {
+    this._viewer = viewer
+    this._viewer.dcContainer.appendChild(this._delegate)
+    let scene = this._viewer.scene
+    this._renderCallback = scene.postRender.addEventListener(() => {
+      this.eachOverlay(item => {
+        if (item && item.position) {
+          let windowCoord = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
+            scene,
+            DC.T.transformWSG84ToCartesian(item.position)
+          )
+          windowCoord && item._updateWindowCoord(windowCoord)
+        }
+      })
+    }, this)
+    this._state = DC.LayerState.ADDED
+  }
+
+  /**
+   * the layer removed callback function
+   * subclasses need to be overridden
+   */
+  _removeCallback() {
+    this._renderCallback()
+    this._viewer.dcContainer.removeChild(this._delegate)
+    this._state = DC.LayerState.REMOVED
+  }
+
+  clear() {
+    this._cache = {}
+    let childs = this._delegate.childNodes
+    for (let i = childs.length - 1; i >= 0; i--) {
+      this._delegate.removeChild(childs[i])
+    }
+    this._state = DC.LayerState.CLEARED
+    return this
+  }
+}

src/plugins/layer/DC.KmlLayer.js

@@ -1,6 +1,39 @@
 /*
  * @Author: Caven
  * @Date: 2020-01-19 11:03:17
- * @Last Modified by:   Caven
- * @Last Modified time: 2020-01-19 11:03:17
+ * @Last Modified by: Caven
+ * @Last Modified time: 2020-02-12 22:05:57
  */
+/*
+ * @Author: Caven
+ * @Date: 2020-01-19 13:38:48
+ * @Last Modified by: Caven
+ * @Last Modified time: 2020-02-12 22:04:13
+ */
+
+import Cesium from '@/namespace'
+import Layer from '../../core/layer/Layer'
+
+DC.KmlLayer = class extends Layer {
+  constructor(id, url) {
+    if (!url) {
+      throw new Error('the url is empty')
+    }
+    super(id)
+    this._delegate = Cesium.KmlDataSource.load(url, {})
+    this._state = DC.LayerState.INITIALIZED
+    this.type = DC.LayerType.KML
+  }
+
+  eachOverlay(method, context) {
+    if (this._delegate) {
+      this._delegate.then(dataSource => {
+        let entities = dataSource.entities.values
+        entities.forEach(item => {
+          method.call(context, item)
+        })
+      })
+      return this
+    }
+  }
+}

src/plugins/layer/index.js

@@ -2,7 +2,8 @@
  * @Author: Caven
  * @Date: 2020-01-19 11:04:45
  * @Last Modified by: Caven
- * @Last Modified time: 2020-01-19 11:13:00
+ * @Last Modified time: 2020-02-12 22:19:05
  */
 import './DC.CzmlLayer'
 import './DC.KmlLayer'
+import './DC.HtmlLayer'

src/plugins/overlay/DC.CustomBillboard.js

@@ -0,0 +1,6 @@
+/*
+ * @Author: Caven
+ * @Date: 2020-02-12 21:44:24
+ * @Last Modified by: Caven
+ * @Last Modified time: 2020-02-12 21:45:31
+ */

src/plugins/overlay/DC.CustomPolygon.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-02-06 13:11:58
  * @Last Modified by: Caven
- * @Last Modified time: 2020-02-06 20:46:58
+ * @Last Modified time: 2020-02-12 21:43:49
  */
 import Cesium from '@/namespace'
 import '../../core/overlay/base/DC.Polygon'

src/plugins/overlay/DC.DivIcon.js

@@ -0,0 +1,86 @@
+/*
+ * @Author: Caven
+ * @Date: 2020-02-12 21:46:22
+ * @Last Modified by: Caven
+ * @Last Modified time: 2020-02-12 23:57:00
+ */
+import Cesium from '@/namespace'
+import Overlay from '../../core/overlay/Overlay'
+
+DC.DivIcon = class extends Overlay {
+  constructor(position, content) {
+    if (!position || !(position instanceof DC.Position)) {
+      throw new Error('the position invalid')
+    }
+    super()
+    this._position = position
+    this._delegate = DC.DomUtil.create('div', 'div-icon')
+    this._delegate.setAttribute('id', this._id)
+    this._delegate.style.position = 'absolute'
+    this._delegate.style.top = '0'
+    this._delegate.style.left = '0'
+    if (content && typeof content === 'string') {
+      this._delegate.innerHTML = content
+    } else if (content && content instanceof Element) {
+      this._delegate.appendChild(content)
+    }
+    this._delegate.addEventListener('click', e => {
+      this._overlayEvent.fire(DC.MouseEventType.CLICK, {
+        layer: this._layer,
+        overlay: this,
+        position: DC.T.transformWSG84ToCartesian(this._position)
+      })
+    })
+  }
+
+  set show(show) {
+    this._show = show
+    this._delegate.style.visibility = this._show ? 'visible' : 'hidden'
+  }
+
+  get show() {
+    return this._show
+  }
+
+  set position(position) {
+    this._position = position
+  }
+
+  get position() {
+    return this._position
+  }
+
+  _updateWindowCoord(windowCoord) {
+    let x = windowCoord.x - this._delegate.offsetWidth / 2
+    let y = windowCoord.y - this._delegate.offsetHeight / 2
+    this._delegate.style.transform = `translate3d(${Math.round(
+      x
+    )}px,${Math.round(y)}px, 0)`
+  }
+
+  /**
+   *
+   * @param {*} layer
+   * Overrides parent methods
+   */
+  _addCallback(layer) {
+    this._layer = layer
+    this._layer.delegate.appendChild(this._delegate)
+    this._state = DC.OverlayState.ADDED
+  }
+
+  /**
+   * Overrides parent methods
+   */
+  _removeCallback() {
+    if (this._layer) {
+      this._layer.delegate.removeChild(this._delegate)
+      this._state = DC.OverlayState.REMOVED
+    }
+  }
+
+  addClass(name) {
+    DC.DomUtil.addClass(this._delegate, name)
+    return this
+  }
+}

src/plugins/overlay/index.js

@@ -2,6 +2,8 @@
  * @Author: Caven
  * @Date: 2020-02-06 19:40:43
  * @Last Modified by: Caven
- * @Last Modified time: 2020-02-06 19:41:38
+ * @Last Modified time: 2020-02-12 21:46:15
  */
+import './DC.CustomBillboard'
 import './DC.CustomPolygon'
+import './DC.DivIcon'

src/themes/index.scss

@@ -18,3 +18,13 @@
     }
   }
 }
+
+.div-icon {
+  user-select: none;
+  background-color: #fff;
+  padding: 2px 2px;
+  border-radius: 4px;
+  &:hover {
+    cursor: pointer;
+  }
+}