fix Popup/ToolTip/ContextMenu/DivIcon postion error when viewer container has offset

src/modules/layer/type/HtmlLayer.js

@@ -45,6 +45,7 @@ class HtmlLayer extends Layer {
     this._renderRemoveCallback = scene.postRender.addEventListener(() => {
       let cp = this._viewer.camera.positionWC
       let cd = this._viewer.camera.direction
+      const offset = this._viewer.getOffset();
       this.eachOverlay((item) => {
         if (item && item.position) {
           let position = Transform.transformWGS84ToCartesian(item.position)
@@ -56,6 +57,11 @@ class HtmlLayer extends Layer {
             scene,
             position
           )
+
+          if (windowCoord) {
+            windowCoord.x += offset.x;
+            windowCoord.y += offset.y;
+          }
           item._updateStyle(
             windowCoord,
             Cesium.Cartesian3.distance(position, cp),

src/modules/viewer/Viewer.js

@@ -31,13 +31,13 @@ class Viewer {
     }
     this._delegate = Cesium.Viewer
       ? new Cesium.Viewer(id, {
-          ...DEF_OPTS,
-          ...options,
-        })
+        ...DEF_OPTS,
+        ...options,
+      })
       : new CesiumViewer(id, {
-          ...DEF_OPTS,
-          ...options,
-        }) // Initialize the viewer
+        ...DEF_OPTS,
+        ...options,
+      }) // Initialize the viewer
 
     /**
      *  Registers events
@@ -656,6 +656,22 @@ class Viewer {
     link.click()
     return this
   }
+
+  getOffset() {
+    const offset = { x: 0, y: 0 };
+    const container = this._delegate?.container;
+    if (container) {
+      if (container.getBoundingClientRect) {
+        const rect = container.getBoundingClientRect();
+        offset.x = rect.left;
+        offset.y = rect.top;
+      } else {
+        offset.x = container.offsetLeft;
+        offset.y = container.offsetTop;
+      }
+    }
+    return offset;
+  }
 }
 
 export default Viewer

src/modules/widget/Widget.js

@@ -34,19 +34,19 @@ class Widget {
    * mount content
    * @private
    */
-  _mountContent() {}
+  _mountContent() { }
 
   /**
    * binds event
    * @private
    */
-  _bindEvent() {}
+  _bindEvent() { }
 
   /**
    * Unbinds event
    * @private
    */
-  _unbindEvent() {}
+  _unbindEvent() { }
 
   /**
    * When enable modifies the hook executed, the subclass copies it as required
@@ -70,13 +70,13 @@ class Widget {
    * @param windowCoord
    * @private
    */
-  _updateWindowCoord(windowCoord) {}
+  _updateWindowCoord(windowCoord) { }
 
   /**
    * Hook for installed
    * @private
    */
-  _installHook() {}
+  _installHook() { }
 
   /**
    * Installs to viewer
@@ -127,6 +127,13 @@ class Widget {
     `)
   }
 
+  getViewerOffset() {
+    if (!this._viewer) {
+      return { x: 0, y: 0 };
+    }
+    return this._viewer.getOffset();
+  }
+
   /**
    * Registers type
    * @param type

src/modules/widget/type/ContextMenu.js

@@ -233,12 +233,19 @@ class ContextMenu extends Widget {
    * @private
    */
   _updateWindowCoord(windowCoord) {
-    let visibility = this._ulEl.hasChildNodes() ? 'visible' : 'hidden'
+    let visibility = this._ulEl.hasChildNodes() ? 'visible' : 'hidden';
+    let { x, y } = windowCoord;
+
+    const offset = this.getViewerOffset();
+
+    x += offset.x;
+    y += offset.y;
+
     this._wrapper.style.cssText = `
     visibility:${visibility};
     z-index:1;
-    transform:translate3d(${Math.round(windowCoord.x)}px,${Math.round(
-      windowCoord.y
+    transform:translate3d(${Math.round(x)}px,${Math.round(
+      y
     )}px, 0);
     `
   }

src/modules/widget/type/Popup.js

@@ -95,6 +95,9 @@ class Popup extends Widget {
       x = windowCoord.x
       y = windowCoord.y
     }
+    const offset = this.getViewerOffset();
+    x += offset.x;
+    y += offset.y;
 
     this._wrapper.style.cssText = `
     visibility:visible;

src/modules/widget/type/Tooltip.js

@@ -38,7 +38,12 @@ class Tooltip extends Widget {
    */
   _updateWindowCoord(windowCoord) {
     let x = windowCoord.x + 10
-    let y = windowCoord.y - this._wrapper.offsetHeight / 2
+    let y = windowCoord.y - this._wrapper.offsetHeight / 2;
+    const offset = this.getViewerOffset();
+
+    x += offset.x;
+    y += offset.y;
+
     this._wrapper.style.cssText = `
     visibility:visible;
     z-index:1;