hide the div icon at the back #56

modules/layer/type/HtmlLayer.js

@@ -45,7 +45,8 @@ class HtmlLayer extends Layer {
     this._viewer.dcContainer.appendChild(this._delegate)
     let scene = this._viewer.scene
     this._renderRemoveCallback = scene.postRender.addEventListener(() => {
-      let cameraPosition = this._viewer.camera.positionWC
+      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)
@@ -53,8 +54,17 @@ class HtmlLayer extends Layer {
             scene,
             position
           )
-          let distance = Cesium.Cartesian3.distance(position, cameraPosition)
-          windowCoord && item._updateStyle({ transform: windowCoord }, distance)
+          let up = scene.globe.ellipsoid.geodeticSurfaceNormal(
+            position,
+            new Cesium.Cartesian3()
+          )
+
+          windowCoord &&
+            item._updateStyle(
+              { transform: windowCoord },
+              Cesium.Cartesian3.distance(position, cp),
+              Cesium.Cartesian3.dot(cd, up) <= 0
+            )
         }
       }, this)
     }, this)

modules/overlay/html/DivIcon.js

@@ -70,16 +70,20 @@ class DivIcon extends Overlay {
    * Updates style
    * @param style
    * @param distance
+   * @param isFront
    * @private
    */
-  _updateStyle(style, distance) {
+  _updateStyle(style, distance, isFront) {
+    if (!this._show) {
+      return
+    }
+    let isDisplay = true
     let translate3d = 'translate3d(0,0,0)'
     if (style.transform) {
       let x = style.transform.x - this._delegate.offsetWidth / 2
       let y = style.transform.y - this._delegate.offsetHeight / 2
       translate3d = `translate3d(${Math.round(x)}px,${Math.round(y)}px, 0)`
     }
-
     let scale3d = 'scale3d(1,1,1)'
     let scaleByDistance = this._style.scaleByDistance
     if (distance && scaleByDistance) {
@@ -95,18 +99,17 @@ class DivIcon extends Overlay {
         scale3d = `scale3d(${scale},${scale},1)`
       }
     }
-
     let distanceDisplayCondition = this._style.distanceDisplayCondition
     if (distance && distanceDisplayCondition) {
-      this.show =
-        this._show &&
-        isBetween(
-          distance,
-          distanceDisplayCondition.near,
-          distanceDisplayCondition.far
-        )
+      isDisplay = isBetween(
+        distance,
+        distanceDisplayCondition.near,
+        distanceDisplayCondition.far
+      )
     }
     this._delegate.style.transform = `${translate3d} ${scale3d}`
+    this._delegate.style.visibility =
+      isDisplay && isFront ? 'visible' : 'hidden'
   }
 
   /**