feat: ✨ Add and close information box operation

Author: dengxiaoning

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "cesium_dev_kit",
-  "version": "1.0.100",
+  "version": "1.1.1",
   "license": "MIT",
   "scripts": {
     "dev": "vite",
@@ -39,11 +39,11 @@
     "@vue/compiler-sfc": "^3.4.32",
     "mitt": "^2.1.0",
     "prettier": "^2.2.1",
+    "sass": "1.77.6",
     "typescript": "^5.4.5",
     "unplugin-auto-import": "^0.17.6",
     "unplugin-vue-components": "^0.27.2",
     "vite": "^2.6.10",
-    "sass": "1.77.6",
     "vite-plugin-cesium": "^1.2.9",
     "vite-plugin-compression": "^0.2.5",
     "vite-plugin-html": "^2.0.7",

package.json

@@ -771,19 +771,34 @@ Plugin.prototype = {
         this._container = null
         this._elements = elements
         this._isBackHide = isBackHide
+        this._parentEleId =elements[0].parentEleId
 
         this.init()
       }
       Css3Renderer.prototype.init = function () {
         var container = document.createElement('div')
         container.className = `ys-css3-container`
+        const _parentEleId = this._parentEleId
         // document.body.appendChild(container)
-        document.getElementById('info-warp').appendChild(container)
+        document.getElementById(_parentEleId).appendChild(container)
         this._container = container
 
         this._elements.forEach(function (e) {
           container.insertAdjacentHTML('beforeend', e.element)
         })
+       function getElementsByClass(className, parentElement = document) {
+            return parentElement.querySelectorAll(`.${className}`);
+        }
+      var boxElements = getElementsByClass('close__box__btn');
+            // 遍历所有元素并绑定点击事件
+         boxElements.forEach(function(element) {
+                element.addEventListener('click', function() {
+                  document.getElementById(_parentEleId).removeChild(container)
+                });
+            });
+
+
+
         var $this = this
         this._scene.preRender.addEventListener(function () {
           //
@@ -831,7 +846,9 @@ Plugin.prototype = {
         })
         this._container.removeChild(document.getElementById(id))
       }
-
+      Css3Renderer.prototype.removeChild = function () {
+      document.getElementById(this._parentEleId).removeChild(this._container)
+     }
       Css3Renderer.prototype.append = function (object) {
         this._elements.push(object)
         this._container.insertAdjacentHTML('beforeend', object.element)

src/utils/cesiumPluginsExtends/libs/Plugin.js

@@ -64,8 +64,9 @@ export default {
     addEntityToScene (viewer) {
       let css3Renderer = new Cesium.Scene.Css3Renderer([{
         id: 'box4',
+        parentEleId: 'info-warp',
         position: [104.08985268964015, 30.635443158056148, 50.0],
-        element: `<div class="ys-css3-box ex-box" id="box4">xxx 信息点</div>`,
+        element: `<div class="ys-css3-box ex-box" id="box4"><div class="close__box__btn">X</div>xxx 信息点</div>`,
         offset: [10, 10]
       }], true);
     }

src/views/example/infoBox/constructBox.vue

@@ -1,7 +1,5 @@
 .ysc-dynamic-layer{
-    /*重要*/
-    user-select: none; /*禁止选中*/
-    pointer-events: none; /*鼠标穿透*/
+
     /*重要*/
     position: fixed;
     top:0;
@@ -10,6 +8,13 @@
     height:250px;
     z-index: 99999;
 }
+.close__box__btn {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  cursor: pointer;
+  color: #fff;
+}
 .ysc-dynamic-layer .line{
     position: absolute;
     left:0;
@@ -53,9 +58,7 @@
   padding: 8px 20px;
 }
 
-.ys-css3-box {
-  pointer-events: none;
-}
+
 #box4{
   font-size: 20px;
   color: orange;