@anov/3d 0.0.13 → 0.0.15

package/dist/factory/unit/CameraPoi.js

@@ -8,59 +8,125 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-import { PerspectiveCamera, Sprite, SpriteMaterial, utils } from '@anov/3d-core';
-var createDomTexture = utils.createDomTexture;
-var data = [{
-  position: [386.24, 7.73, 143.96],
-  name: '摄像1',
-  type: 'camera'
-}];
-var dom = document.createElement('img');
-dom.src = './camera.png';
+import { AdditiveBlending, Box3, CircleGeometry, Color, DoubleSide, Group, MathUtils, Matrix4, Mesh, MeshBasicMaterial, ModelLoader, PerspectiveCamera, PlaneGeometry, ShaderMaterial, Sprite, SpriteMaterial, Texture, TextureLoader, Vector3, use } from '@anov/3d-core';
+import { Css2DPoi, SpritePoi } from '@anov/3d-ability';
+
+// @ts-ignore
+import heatMap from 'anov-heat-map';
+// @ts-ignore
+import { regionMap } from "../regionData";
+import { usePath } from "../3d";
+var load = new ModelLoader();
 var CameraPoi = /*#__PURE__*/function () {
   function CameraPoi(gobal) {
     _classCallCheck(this, CameraPoi);
     _defineProperty(this, "gobal", void 0);
-    _defineProperty(this, "spriteCameraPoi", new Map());
+    _defineProperty(this, "cameraMesh", new Map());
+    _defineProperty(this, "warnMesh", new Map());
+    _defineProperty(this, "headMap", void 0);
+    _defineProperty(this, "dialogManage", void 0);
+    _defineProperty(this, "eventListener", new Set());
     this.gobal = gobal;
-    this.generateObject();
+    this.dialogManage = new Dialog(this);
+    this.dialogManage.addStyle();
   }
   _createClass(CameraPoi, [{
     key: "generateObject",
     value: function () {
-      var _generateObject = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var _generateObject = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
         var _this = this;
-        var texture, baseSprite;
-        return _regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
+        var model, rotatingRight, unFrame;
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              _context.next = 2;
-              return createDomTexture(dom, {
-                width: 62,
-                height: 62
+              _context2.next = 2;
+              return load.loadGLTF("".concat(usePath, "shexiang.glb"), false, true, './draco/', function (gltf) {
+                return gltf;
               });
             case 2:
-              texture = _context.sent;
-              baseSprite = new Sprite(new SpriteMaterial({
-                map: texture,
-                depthTest: false,
-                depthWrite: false
-              }));
-              baseSprite.scale.set(10, 10, 10);
-              baseSprite.center.set(0.5, 0);
-              data.forEach(function (poi) {
-                var sprite = baseSprite.clone();
-                sprite.position.fromArray(poi.position);
-                _this.gobal.interactionManager.add(sprite);
-                _this.bindEvent(sprite);
-                _this.spriteCameraPoi.set(poi.name, sprite);
-                _this.gobal.scene.add(sprite);
+              model = _context2.sent;
+              Object.keys(regionMap).forEach( /*#__PURE__*/function () {
+                var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(key) {
+                  var _region$probePoint;
+                  var region, group, sprite, position, scan, point;
+                  return _regeneratorRuntime().wrap(function _callee$(_context) {
+                    while (1) switch (_context.prev = _context.next) {
+                      case 0:
+                        // 摄像机
+                        region = regionMap[key];
+                        group = new Group();
+                        group.name = region.camera.name;
+                        sprite = new SpritePoi("".concat(usePath, "camera.png"), {
+                          scale: [10, 10, 1]
+                        });
+                        sprite.rotation.y = Math.PI;
+                        position = new Vector3().fromArray(region.camera.position);
+                        sprite.position.copy(position);
+                        group.add(sprite);
+                        scan = model.scene.clone();
+                        scan.scale.addScalar(5);
+                        scan.rotation.x = -Math.PI / 2 + 0.5;
+                        scan.position.copy(position.clone().add(new Vector3(0, -2, 0)));
+                        group.add(scan);
+                        _this.cameraMesh.set(region.title, group);
+                        _this.gobal.interactionManager.add(group);
+                        _this.cameraEvent(group, region);
+                        _this.gobal.scene.add(group);
+
+                        // 甲烷检测点
+                        point = new MethanePoint();
+                        (_region$probePoint = region.probePoint) === null || _region$probePoint === void 0 ? void 0 : _region$probePoint.forEach(function (item) {
+                          var mesh;
+                          if (item.warn) {
+                            mesh = new SpritePoi("".concat(usePath, "p4/warn.png"), {
+                              scale: [10, 10, 1]
+                            });
+                            _this.gobal.interactionManager.add(mesh);
+                            _this.probeEvent(mesh, region);
+                          } else {
+                            mesh = point.create();
+                          }
+                          mesh.position.copy(new Vector3().fromArray(item.position));
+                          _this.warnMesh.set(region.title, mesh);
+                          _this.gobal.scene.add(mesh);
+                        });
+                      case 19:
+                      case "end":
+                        return _context.stop();
+                    }
+                  }, _callee);
+                }));
+                return function (_x) {
+                  return _ref.apply(this, arguments);
+                };
+              }());
+              // 设置左右旋转的标志位和旋转速度
+              rotatingRight = true; // 是否正在向右转动
+              unFrame = use.useframe(function () {
+                _this.cameraMesh.forEach(function (group) {
+                  var scan = group.children[1];
+                  // 更新相机的旋转角度
+                  if (rotatingRight) {
+                    // 向右旋转
+                    scan.rotation.z += 0.005;
+                  } else {
+                    // 向左旋转
+                    scan.rotation.z -= 0.005;
+                  }
+
+                  // 检查是否达到目标旋转角度
+                  if (Math.abs(scan.rotation.z) >= Math.abs(Math.PI / 4)) {
+                    // 到达目标角度，切换旋转方向并更新目标角度
+                    rotatingRight = !rotatingRight;
+                  }
+                });
               });
+              this.eventListener.add(unFrame);
             case 7:
             case "end":
-              return _context.stop();
+              return _context2.stop();
           }
-        }, _callee);
+        }, _callee2, this);
       }));
       function generateObject() {
         return _generateObject.apply(this, arguments);
@@ -68,36 +134,616 @@ var CameraPoi = /*#__PURE__*/function () {
       return generateObject;
     }()
   }, {
-    key: "bindEvent",
-    value: function bindEvent(sprite) {
+    key: "cameraEvent",
+    value: function cameraEvent(sprite, region) {
       var _this2 = this;
-      sprite.addEventListener('click', function () {
-        var camera = new PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 100000000);
-        camera.position.set(373.72, 7.73, 144.75);
-        camera.lookAt(407.48, 0.03, 177.44);
-        var _this2$gobal$scene$se = _this2.gobal.scene.setCustomPerspective(camera),
-          texture = _this2$gobal$scene$se.texture;
-        var baseSprite = new Sprite(new SpriteMaterial({
-          map: texture,
-          depthTest: false,
-          depthWrite: false
-        }));
-        baseSprite.scale.set(70, 50, 50);
-        baseSprite.center.set(0.5, 0);
-        baseSprite.position.set(349.80, 0.00, 129.74);
-        _this2.gobal.scene.add(baseSprite);
+      var _use$useScene = use.useScene(),
+        camera = _use$useScene.camera;
+      var unClick = sprite.addEventListener('click', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+        var position, targetPosition, camaraPosition, startPosition, cameraLookAt, dialogMesh;
+        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              position = new Vector3().fromArray(region.camera.position);
+              targetPosition = position.clone().toArray();
+              camaraPosition = position.clone().add(new Vector3(0, 40, 80)).toArray();
+              startPosition = camera.position.clone(); // 获取相机朝向
+              cameraLookAt = new Vector3(); // 创建一个向量来存储相机朝向
+              camera.getWorldDirection(cameraLookAt); // 获取相机朝向并存储在向量中
+              _this2.gobal.cameraUtil.set({
+                position: camaraPosition,
+                target: targetPosition
+              });
+              _context3.next = 9;
+              return _this2.dialogManage.getMesh(position, position.clone().add(new Vector3(0, -15, 5)));
+            case 9:
+              dialogMesh = _context3.sent;
+              _this2.dialogManage.addEventListener('close', function () {
+                // 初始相机到原始位置
+                _this2.gobal.cameraUtil.set({
+                  position: startPosition.toArray(),
+                  target: cameraLookAt.toArray()
+                });
+              });
+              _this2.gobal.scene.add(dialogMesh);
+            case 12:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3);
+      })));
+      // this.eventListener.add(unClick)
+    }
+  }, {
+    key: "probeEvent",
+    value: function probeEvent(sprite, region) {
+      var _this3 = this;
+      var _use$useScene2 = use.useScene(),
+        camera = _use$useScene2.camera;
+      sprite.addEventListener('click', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
+        var position, targetPosition, camaraPosition, startPosition, cameraLookAt, mesh;
+        return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              if (sprite.visible) {
+                _context4.next = 2;
+                break;
+              }
+              return _context4.abrupt("return");
+            case 2:
+              sprite.visible = false;
+              _this3.togglePoi(false);
+              position = new Vector3().fromArray(region.probePoint[0].position);
+              targetPosition = position.clone().toArray();
+              camaraPosition = position.clone().add(new Vector3(0, 30, 0)).toArray();
+              startPosition = camera.position.clone(); // 获取相机朝向
+              cameraLookAt = new Vector3(); // 创建一个向量来存储相机朝向
+              camera.getWorldDirection(cameraLookAt); // 获取相机朝向并存储在向量中
+              _this3.gobal.cameraUtil.set({
+                position: camaraPosition,
+                target: targetPosition
+              });
+              _this3.headMap = new HeadMap();
+              mesh = _this3.headMap.create();
+              mesh.position.copy(sprite.position);
+              mesh.position.y = 0.5;
+              _this3.gobal.scene.add(mesh);
+              _this3.headMap.addBack();
+              _this3.headMap.addEventListener('close', function () {
+                _this3.togglePoi(true);
+                _this3.gobal.cameraUtil.set({
+                  position: startPosition.toArray(),
+                  target: cameraLookAt.toArray()
+                });
+              });
+            case 18:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee4);
+      })));
+    }
+  }, {
+    key: "togglePoi",
+    value: function togglePoi() {
+      var visible = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      this.warnMesh.forEach(function (sprite) {
+        sprite.visible = visible;
+      });
+      this.cameraMesh.forEach(function (sprite) {
+        sprite.visible = visible;
       });
     }
   }, {
     key: "remove",
     value: function remove() {
-      this.spriteCameraPoi.forEach(function (sprite) {
+      // 删除摄像机POI点
+      this.cameraMesh.forEach(function (sprite) {
+        sprite.removeFromParent();
+        sprite.remove();
+      });
+      this.cameraMesh.clear();
+      this.warnMesh.forEach(function (sprite) {
         sprite.removeFromParent();
+        sprite.remove();
       });
-      this.spriteCameraPoi.clear();
+      this.warnMesh.clear();
+      this.eventListener.forEach(function (fn) {
+        fn();
+      });
+      // 热力图
+      if (this.headMap) this.headMap.remove();
+      this.eventListener.clear();
+      this.dialogManage.close();
     }
   }]);
   return CameraPoi;
 }();
 export default CameraPoi;
+var MethanePoint = /*#__PURE__*/function () {
+  function MethanePoint() {
+    _classCallCheck(this, MethanePoint);
+  }
+  _createClass(MethanePoint, [{
+    key: "create",
+    value: function create() {
+      // 定义Shader的uniform变量
+
+      var geometry = new PlaneGeometry(10, 10);
+      var texture = new TextureLoader().load("".concat(usePath, "p4/monitor.png"));
+      var circle = new Mesh(geometry, new MeshBasicMaterial({
+        map: texture,
+        side: DoubleSide,
+        transparent: true
+      }));
+      circle.rotateX(-Math.PI / 3);
+      return circle;
+    }
+
+    // 随机多点的方案
+  }, {
+    key: "createBack",
+    value: function createBack() {
+      // 定义Shader的uniform变量
+
+      var group = new Group();
+      var geometry = new CircleGeometry(2, 32);
+      // 创建自定义着色器材质
+      var material = new ShaderMaterial({
+        vertexShader: "\n          void main() {\n              gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n              gl_PointSize = 20.0; // \u8BBE\u7F6E\u70B9\u7684\u5927\u5C0F\n          }\n      ",
+        fragmentShader: "\n          void main() {\n              vec2 center = vec2(0.5, 0.5); // \u5706\u5FC3\u5750\u6807\n              vec2 toCenter = gl_PointCoord - center; // \u8BA1\u7B97\u70B9\u5230\u5706\u5FC3\u7684\u5411\u91CF\n              float distance = length(toCenter); // \u8BA1\u7B97\u70B9\u5230\u5706\u5FC3\u7684\u8DDD\u79BB\n              if (distance > 0.5) discard; // \u8D85\u51FA\u534A\u5F84\u8303\u56F4\u7684\u70B9\u76F4\u63A5\u4E22\u5F03\n              vec3 innerColor = vec3(1.0, .8, 0.0); // \u5185\u5708\u989C\u8272\u4E3A\u9EC4\u8272\n              vec3 outerColor = vec3(0.8, 0.4, 0.0); // \u5916\u5708\u989C\u8272\u4E3A\u6DF1\u6A58\u8272\n    \n              vec3 finalColor = mix(innerColor, outerColor, smoothstep(0.1, 0.23, distance)); // \u6839\u636E\u8DDD\u79BB\u6DF7\u5408\u989C\u8272\n              if(distance>0.3) finalColor = mix(finalColor, vec3(0.75, 0.4, 0.0), smoothstep(0.25, 0.3, distance)); // \u6839\u636E\u8DDD\u79BB\u6DF7\u5408\u989C\u8272\n              gl_FragColor = vec4(finalColor, 1.0); // \u8BBE\u7F6E\u7247\u6BB5\u989C\u8272\n          }\n      ",
+        blending: AdditiveBlending,
+        depthTest: false,
+        transparent: true,
+        side: DoubleSide
+      });
+      var circle = new Mesh(geometry, new MeshBasicMaterial({
+        color: '#f7a157'
+      }));
+      var numPoints = 100; // 点的数量
+
+      for (var i = 0; i < numPoints; i++) {
+        var x = Math.random() * 700 - 322; // 随机生成 x 坐标
+        var z = Math.random() * 340 - 144; // 随机生成 z 坐标
+        var point = circle.clone();
+        point.position.copy(new Vector3(x, 20.55, z));
+        point.rotateX(-Math.PI / 2);
+        group.add(point);
+      }
+      return group;
+    }
+  }]);
+  return MethanePoint;
+}();
+var Dialog = /*#__PURE__*/function () {
+  function Dialog(cameraManage) {
+    _classCallCheck(this, Dialog);
+    _defineProperty(this, "manage", void 0);
+    _defineProperty(this, "camera", void 0);
+    _defineProperty(this, "cameraPosition", void 0);
+    _defineProperty(this, "cameraTargetPosition", void 0);
+    _defineProperty(this, "borderMesh", void 0);
+    _defineProperty(this, "cuteSprite", void 0);
+    _defineProperty(this, "eventListener", new Set());
+    _defineProperty(this, "eventList", new Map());
+    this.manage = cameraManage;
+  }
+  _createClass(Dialog, [{
+    key: "getMesh",
+    value: function () {
+      var _getMesh = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(position, cameraPosition) {
+        var _this4 = this;
+        var target, _this$manage$gobal$sc, texture, close, unFrame;
+        return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+          while (1) switch (_context5.prev = _context5.next) {
+            case 0:
+              this.camera = new PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 100000000);
+              this.camera.position.copy(cameraPosition);
+              target = this.getTarget(cameraPosition);
+              this.camera.lookAt(target);
+              _this$manage$gobal$sc = this.manage.gobal.scene.setCustomPerspective(this.camera), texture = _this$manage$gobal$sc.texture, close = _this$manage$gobal$sc.close;
+              this.cuteSprite = new Sprite(new SpriteMaterial({
+                map: texture,
+                depthTest: false,
+                depthWrite: false
+              }));
+              this.cuteSprite.center.set(0.5, 0.5);
+              this.cuteSprite.position.copy(position);
+              unFrame = use.useframe(function () {
+                _this4.updateScale(_this4.cuteSprite);
+              });
+              this.eventListener.add(unFrame);
+              return _context5.abrupt("return", new Promise(function (reslove) {
+                setTimeout(function () {
+                  _this4.getBorderMesh(_this4.camera, _this4.cuteSprite);
+                  var group = new Group();
+                  group.add(_this4.borderMesh);
+                  group.add(_this4.cuteSprite);
+                  close();
+                  reslove(group);
+                }, 1000);
+              }));
+            case 11:
+            case "end":
+              return _context5.stop();
+          }
+        }, _callee5, this);
+      }));
+      function getMesh(_x2, _x3) {
+        return _getMesh.apply(this, arguments);
+      }
+      return getMesh;
+    }()
+  }, {
+    key: "getTarget",
+    value: function getTarget(cameraPosition) {
+      var rotation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [-30, 0, 0];
+      // 将旋转角度转换为弧度
+      var angleX = MathUtils.degToRad(rotation[0]);
+      var angleY = MathUtils.degToRad(rotation[1]);
+      var angleZ = MathUtils.degToRad(rotation[2]);
+
+      // 创建旋转矩阵
+      var rotationMatrix = new Matrix4();
+      rotationMatrix.makeRotationX(angleX);
+      rotationMatrix.multiply(new Matrix4().makeRotationY(angleY));
+      rotationMatrix.multiply(new Matrix4().makeRotationZ(angleZ));
+
+      // 定义相机的方向向量（例如，相机的方向默认为(0, 0, -1)）
+      var cameraDirection = new Vector3(0, 0, 1);
+
+      // 将相机的方向向量乘以旋转矩阵，得到相机目标位置的向量
+      var targetDirection = cameraDirection.clone().applyMatrix4(rotationMatrix);
+
+      // 计算相机的目标位置
+      return cameraPosition.clone().add(targetDirection);
+    }
+  }, {
+    key: "getBoxSize",
+    value: function getBoxSize(sprite) {
+      var _use$useScene3 = use.useScene(),
+        camera = _use$useScene3.camera;
+
+      // 获取设备像素比
+      var devicePixelRatio = window.devicePixelRatio || 1;
+      // 获取精灵对象的边界框
+      var bbox = new Box3().setFromObject(sprite);
+      // 将边界框的最小和最大顶点转换为屏幕坐标
+      var min = bbox.min.project(camera);
+      var max = bbox.max.project(camera);
+
+      // 计算精灵在屏幕中的宽度和高度像素值
+      var width = (max.x - min.x) * window.innerWidth / devicePixelRatio * 0.9458;
+      var height = (max.y - min.y) * window.innerHeight / devicePixelRatio * 1.0617;
+
+      // 定义设备像素比和对应的缩放系数的映射关系
+      var scaleFactors = {
+        1: 0.5,
+        1.5: 0.75,
+        2: 1
+      };
+      var scaleFactor = scaleFactors[devicePixelRatio] || 1;
+      // 应用缩放系数
+      width *= scaleFactor;
+      height *= scaleFactor;
+      return {
+        width: width,
+        height: height
+      };
+    }
+  }, {
+    key: "updateScale",
+    value: function updateScale(sprite) {
+      var _use$useScene4 = use.useScene(),
+        camera = _use$useScene4.camera;
+      // 距离限制范围的值，用于计算缩放比例
+      var minDistance = 0.1;
+      var maxDistance = 1000000;
+      // 获取相机和物体的世界坐标位置
+      var cameraPosition = camera === null || camera === void 0 ? void 0 : camera.position;
+      var objectPosition = sprite.position;
+
+      // 计算相机和物体之间的距离
+      var distance = (cameraPosition === null || cameraPosition === void 0 ? void 0 : cameraPosition.distanceTo(objectPosition)) || 0.1;
+
+      // 使用 Math.min() 和 Math.max() 方法限制 resultDistance 的范围
+      var clampedDistance = Math.max(minDistance, Math.min(maxDistance, distance));
+      // console.log('clampedDistance:',clampedDistance)
+      // 按照缩放系数和距离进行缩放，缩放系数应该约定好一个固定值
+
+      sprite.scale.copy(new Vector3(clampedDistance * 1.5, 1.05 * clampedDistance, 1));
+    }
+  }, {
+    key: "addEventListener",
+    value: function addEventListener(eventName, fn) {
+      if (this.eventList.has(eventName)) this.eventList[eventName] = fn;else this.eventList.set(eventName, fn);
+    }
+  }, {
+    key: "getBorderMesh",
+    value: function getBorderMesh(camera, sprite) {
+      var _this5 = this;
+      var _this$getBoxSize = this.getBoxSize(sprite),
+        width = _this$getBoxSize.width,
+        height = _this$getBoxSize.height;
+
+      // 弹窗容器
+      var dialogDiv = document.createElement('div');
+      width += 5;
+      height += 5;
+      Object.assign(dialogDiv.style, {
+        width: "".concat(width, "px"),
+        height: "".concat(height, "px"),
+        zIndex: 2,
+        backgroundImage: "url(".concat(usePath, "p4/border.png)"),
+        backgroundSize: '100% 100%',
+        backgroundRepeat: 'no-repeat',
+        position: 'releate'
+        // left: `${(window.innerWidth - width) / 2}px`,
+        // top: `${(window.innerHeight - height) / 2}px`,
+      });
+
+      var maskingDiv = document.createElement('div');
+      maskingDiv.className = 'dialog-masking';
+      dialogDiv.appendChild(maskingDiv);
+
+      // 关闭按钮
+      var closeSpan = document.createElement('span');
+      closeSpan.className = 'dialog-close';
+      closeSpan.addEventListener('click', function () {
+        _this5.eventList.has('close') && _this5.eventList.get('close')();
+        _this5.close();
+      });
+      var hLine = document.createElement('span');
+      hLine.className = 'dialog-close-line dialog-close-h-line';
+      closeSpan.appendChild(hLine);
+      var vLine = document.createElement('span');
+      vLine.className = 'dialog-close-line dialog-close-v-line';
+      closeSpan.appendChild(vLine);
+      dialogDiv.appendChild(closeSpan);
+
+      // 操作按钮
+      var op = document.createElement('div');
+      op.className = 'dialog-operate';
+      dialogDiv.appendChild(op);
+      var opList = ['left', 'right', 'top', 'bottom'];
+      opList.forEach(function (key) {
+        var btnSpan = document.createElement('span');
+        btnSpan.className = "dialog-operate-btn dialog-operate-".concat(key);
+        btnSpan.addEventListener('click', function () {
+          switch (key) {
+            case 'top':
+              camera.rotation.x -= 0.01;
+              break;
+            case 'bottom':
+              camera.rotation.x += 0.01;
+              break;
+            case 'left':
+              camera.rotation.y -= 0.01;
+              break;
+            case 'right':
+              camera.rotation.y += 0.01;
+              break;
+          }
+          var _this5$manage$gobal$s = _this5.manage.gobal.scene.setCustomPerspective(camera),
+            texture = _this5$manage$gobal$s.texture,
+            close = _this5$manage$gobal$s.close;
+          sprite.material = new SpriteMaterial({
+            map: texture,
+            depthTest: false,
+            depthWrite: false
+          });
+          setTimeout(function () {
+            return close();
+          }, 800);
+        });
+        op.appendChild(btnSpan);
+      });
+
+      // 滑动条
+      var sliderDiv = document.createElement('div');
+      sliderDiv.className = 'dialog-slider-container';
+      var sliderBar = document.createElement('input');
+      sliderBar.type = 'range';
+      sliderBar.min = '30';
+      sliderBar.max = '120';
+      sliderBar.value = '90';
+      sliderBar.className = 'dialog-slider';
+      sliderBar.addEventListener('input', function () {
+        camera.fov = sliderBar.value;
+        camera.updateProjectionMatrix();
+        var _this5$manage$gobal$s2 = _this5.manage.gobal.scene.setCustomPerspective(camera),
+          texture = _this5$manage$gobal$s2.texture,
+          close = _this5$manage$gobal$s2.close;
+        sprite.material = new SpriteMaterial({
+          map: texture,
+          depthTest: false,
+          depthWrite: false
+        });
+        setTimeout(function () {
+          return close();
+        }, 800);
+      });
+      sliderDiv.appendChild(sliderBar);
+      dialogDiv.appendChild(sliderDiv);
+      this.borderMesh = new Css2DPoi(dialogDiv);
+      this.borderMesh.position.copy(sprite.position);
+      return this.borderMesh;
+    }
+  }, {
+    key: "addStyle",
+    value: function addStyle() {
+      // 设置 CSS 规则
+      var css = "\n    .dialog-masking{\n      position: absolute;\n      top: 8px;\n      left: 6px;\n      width: calc(100% - 12px);\n      height: calc(100% - 16px);\n     background: linear-gradient(90deg, rgba(0, 0, 0,.4) 0%,rgba(0, 0, 0,.2) 10%, rgba(0, 0, 0,0) 20%, rgba(0,0,0, 0) 50%, rgba(0, 0, 0,0) 80%, rgba(0, 0, 0,0.2) 90%, rgba(0, 0, 0,.4) 100%);\n     pointer-events: auto;\n     opacity: 1;\n     transform: perspective(100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);\n     transform-origin: center center;\n    }\n    .hot-back{\n      width: 70px;\n      height: 25px;\n      border-radius: 2px;\n      color: #fff;\n      font-weight: bold;\n      font-size: 14px;\n      border:1px solid #d1ae6d;\n      background-color: #c8ab75;\n      cursor: pointer; /* \u9F20\u6807\u6307\u9488\u6837\u5F0F */\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      position: absolute;\n      left: 30px;\n      top: 30px;\n      pointer-events: auto;\n    }\n    .hot-back:hover{\n      background-color:#c8a158;\n    }\n    .dialog-close{\n      width: 20px;\n      height: 20px;\n      border-radius: 2px;\n      color: #fff;\n      background-color: #c8ab75;\n      cursor: pointer; /* \u9F20\u6807\u6307\u9488\u6837\u5F0F */\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      position: absolute;\n      right: 20px;\n      top: 15px;\n      pointer-events: auto;\n    }\n\n    .dialog-close:hover{\n      background-color:#c8a158;\n    }\n\n    .dialog-close-line{\n      width: 14px;\n      height: 2px;\n      background-color: #fff;\n      position: absolute;\n      top: 9px;\n      display: block;\n    }\n\n    .dialog-close-h-line{\n      transform: rotate(-45deg);\n    }\n\n    .dialog-close-v-line{\n      transform: rotate(45deg);\n    }\n\n    .dialog-operate{\n      width: 120px;\n      height: 120px;\n      background-image: url(".concat(usePath, "p4/operate.png);\n      background-size: 100% 100%;\n      background-repeat: no-repeat;\n      position: absolute;\n      right: 15px;\n      bottom: 10px;\n      pointer-events: auto;\n    }\n\n    .dialog-operate-btn{\n      width: 0;\n      height: 0;\n      position: absolute;\n      cursor: pointer;\n      pointer-events: auto;\n    }\n\n    .dialog-operate-top{\n      border-left: 8px solid transparent; /* \u5DE6\u8FB9\u900F\u660E */\n      border-right: 8px solid transparent; /* \u53F3\u8FB9\u900F\u660E */\n      border-bottom: 8px solid #f2c67d; /* \u5E95\u8FB9\u5B9E\u5FC3 */\n      left: calc(50% - 9px);\n      top: 20px;\n    }\n    .dialog-operate-top:hover{\n      border-bottom-color:#fff2dd;\n    }\n\n    .dialog-operate-bottom{\n      border-left: 8px solid transparent; /* \u5DE6\u8FB9\u900F\u660E */\n      border-right: 8px solid transparent; /* \u53F3\u8FB9\u900F\u660E */\n      border-top: 8px solid #f2c67d; /* \u5E95\u8FB9\u5B9E\u5FC3 */\n      left: calc(50% - 9px);\n      bottom: 20px;\n    }\n\n    .dialog-operate-bottom:hover{\n      border-top-color:#fff2dd;\n    }\n\n    .dialog-operate-left{\n      border-top: 8px solid transparent; /* \u5DE6\u8FB9\u900F\u660E */\n        border-bottom: 8px solid transparent; /* \u53F3\u8FB9\u900F\u660E */\n        border-right: 8px solid #f2c67d; /* \u5E95\u8FB9\u5B9E\u5FC3 */\n        top: calc(50% - 9px);\n        left: 20px;\n    }\n    .dialog-operate-left:hover{\n      border-right-color:#fff2dd;\n    }\n\n    .dialog-operate-right{\n      border-top: 8px solid transparent; /* \u5DE6\u8FB9\u900F\u660E */\n      border-bottom: 8px solid transparent; /* \u53F3\u8FB9\u900F\u660E */\n      border-left: 8px solid #f2c67d; /* \u5E95\u8FB9\u5B9E\u5FC3 */\n      top: calc(50% - 9px);\n      right: 20px;\n    }\n\n    .dialog-operate-right:hover{\n      border-left-color:#fff2dd;\n    }\n    \n    .dialog-slider-container {\n      width: 13px;\n      height: 300px;\n      background: url(").concat(usePath, "p4/slider.png);\n      background-size: 100% 100%;\n      position:absolute;\n      right:23px;\n      top:50px;\n  }\n\n  .dialog-slider {\n      -webkit-appearance: none;\n      width: 300px;\n      height: 13px;\n      background: transparent;\n      outline: none;\n      opacity: 0.7;\n      -webkit-transition: .2s;\n      transition: opacity .2s;\n      transform: rotate(-90deg);\n      margin-left: -144px;\n      margin-top: 144px;\n      pointer-events: auto;\n  }\n\n  .dialog-slider::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      appearance: none;\n      width: 7px;\n      height: 20px;\n      background: #eebe76;\n      cursor: pointer;\n      border-radius: 5px;\n  }\n\n  .dialog-slider::-moz-range-thumb {\n      width: 7px;\n      height: 20px;\n      background: #eebe76;\n      cursor: pointer;\n      border-radius: 5px;\n  }\n");
+      // 创建一个 <style> 元素
+      var styleElement = document.createElement('style');
+      styleElement.appendChild(document.createTextNode(css));
+      // 将 <style> 元素添加到 <head> 中
+      document.head.appendChild(styleElement);
+    }
+  }, {
+    key: "close",
+    value: function close() {
+      // 删除弹窗POI
+      if (this.borderMesh) {
+        this.borderMesh.remove();
+        this.borderMesh.removeFromParent();
+      }
+      if (this.cuteSprite) {
+        this.cuteSprite.remove();
+        this.cuteSprite.removeFromParent();
+      }
+      // 移除事件监听
+      this.eventListener.forEach(function (fn) {
+        fn();
+      });
+      this.eventListener.clear();
+      this.eventList.clear();
+    }
+  }]);
+  return Dialog;
+}();
+var HeadMap = /*#__PURE__*/function () {
+  function HeadMap() {
+    _classCallCheck(this, HeadMap);
+    _defineProperty(this, "TemperatureColorStops", {
+      1.0: '#f00',
+      0.9: '#e2fa00',
+      0.6: '#33f900',
+      0.3: '#0349df',
+      0.0: '#0f00ff'
+    });
+    _defineProperty(this, "eventList", new Map());
+    _defineProperty(this, "backEle", void 0);
+    _defineProperty(this, "heatMapPlane", void 0);
+    _defineProperty(this, "canvasList", []);
+  }
+
+  // 热力图
+  _createClass(HeadMap, [{
+    key: "create",
+    value: function create() {
+      var heatmap = heatMap.create({
+        container: this.createDom(),
+        gradient: this.TemperatureColorStops
+      });
+      var len = 1200;
+      var width = 2000;
+      var height = 1000;
+      var points = [];
+      var max = 0;
+      while (len--) {
+        var val = Math.floor(Math.random() * 10);
+        max = Math.max(max, val);
+        var point = {
+          x: Math.floor(Math.random() * width),
+          y: Math.floor(Math.random() * height),
+          value: val
+        };
+        points.push(point);
+      }
+      heatmap.setData({
+        max: max,
+        data: points
+      });
+
+      // 灰度图
+      var greymap = heatMap.create({
+        container: this.createDom(),
+        gradient: {
+          '0': 'black',
+          '1.0': 'white'
+        }
+      });
+      greymap.setData({
+        max: max,
+        data: points
+      });
+      var heatMapMaterial = new ShaderMaterial({
+        transparent: true,
+        depthTest: false,
+        side: DoubleSide,
+        vertexShader: "varying vec2 vUv;\n        uniform float Zscale;\n        uniform sampler2D greyMap;\n        void main() {\n         vUv = uv;\n        vec4 frgColor = texture2D(greyMap, uv);//\u83B7\u53D6\u7070\u5EA6\u56FE\u70B9\u4F4D\u4FE1\u606F\n        float height = Zscale * frgColor.a;//\u901A\u8FC7\u7070\u5EA6\u56FE\u7684rgb*\u9700\u8981\u8BBE\u7F6E\u7684\u9AD8\u5EA6\u8BA1\u7B97\u51FA\u70ED\u529B\u56FE\u6BCF\u4E2A\u70B9\u4F4D\u6700\u7EC8\u5728z\u8F74\u9AD8\u5EA6\n        vec3 transformed = vec3( position.x, position.y, height);//\u91CD\u65B0\u7EC4\u88C5\u70B9\u5750\u6807\n        gl_Position = projectionMatrix * modelViewMatrix * vec4(transformed, 1.0);//\u6E32\u67D3\u70B9\u4F4D\n       \n        }\n      ",
+        fragmentShader: "varying vec2 vUv;\n        uniform sampler2D heatMap;//\u70ED\u529B\u56FE\n        uniform vec3 u_color;//\u57FA\u7840\u989C\u8272\n        uniform float u_opacity; // \u900F\u660E\u5EA6\n        void main() {\n          //vec4 alphaColor = texture2D(heatMap, vUv);\n          // gl_FragColor = alphaColor;\n           gl_FragColor = vec4(u_color, u_opacity) * texture2D(heatMap, vUv);//\u628A\u70ED\u529B\u56FE\u989C\u8272\u548C\u900F\u660E\u5EA6\u8FDB\u884C\u6E32\u67D3\n        }",
+        uniforms: {
+          heatMap: {
+            value: {
+              value: undefined
+            }
+          },
+          greyMap: {
+            value: {
+              value: undefined
+            }
+          },
+          Zscale: {
+            value: 0
+          },
+          // 高度参数
+          u_color: {
+            value: new Color('rgb(255, 255, 255)')
+          },
+          u_opacity: {
+            value: 0.8
+          }
+        }
+      });
+      var texture = new Texture(heatmap._renderer.canvas);
+      texture.needsUpdate = true;
+      var greyTexture = new Texture(greymap._renderer.canvas);
+      greyTexture.needsUpdate = true;
+      heatMapMaterial.uniforms.heatMap.value = texture;
+      heatMapMaterial.uniforms.greyMap.value = greyTexture;
+      var heatMapGeometry = new PlaneGeometry(200, 100, 100, 100); // 3d热力图大小，及分块数量
+      var heatMapPlane = new Mesh(heatMapGeometry, heatMapMaterial);
+      heatMapPlane.rotation.set(-Math.PI / 2, 0, 0);
+      // heatMapPlane.position.set(0, 0, 0) //  3d热力图中心点位置
+
+      this.heatMapPlane = heatMapPlane;
+      return heatMapPlane;
+    }
+  }, {
+    key: "addEventListener",
+    value: function addEventListener(eventName, fn) {
+      if (this.eventList.has(eventName)) this.eventList[eventName] = fn;else this.eventList.set(eventName, fn);
+    }
+  }, {
+    key: "addBack",
+    value: function addBack() {
+      var _this6 = this;
+      this.backEle = document.createElement('div');
+      this.backEle.className = 'hot-back';
+      this.backEle.innerHTML = '返回';
+      document.body.appendChild(this.backEle);
+      this.backEle.addEventListener('click', function () {
+        _this6.eventList.has('close') && _this6.eventList.get('close')();
+        _this6.remove();
+      });
+    }
+  }, {
+    key: "createDom",
+    value: function createDom() {
+      // 创建一个新的 canvas 元素
+      var canvas = document.createElement('canvas');
+      canvas.style.zIndex = '-1';
+      // 设置 canvas 元素的宽度和高度
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+      document.body.appendChild(canvas);
+      this.canvasList.push(canvas);
+      return canvas;
+    }
+  }, {
+    key: "remove",
+    value: function remove() {
+      this.canvasList.forEach(function (canvas) {
+        canvas.remove();
+      });
+      this.canvasList.length = 0;
+      this.backEle && this.backEle.remove();
+      this.heatMapPlane.removeFromParent();
+      this.heatMapPlane.remove();
+    }
+  }]);
+  return HeadMap;
+}();
 //# sourceMappingURL=CameraPoi.js.map