@aibee/crc-bmap 0.0.90 → 0.0.92

package/lib/bmap.esm.js

@@ -500,7 +500,8 @@ import {
   Box3,
   Vector3 as Vector32,
   BufferGeometry,
-  LineSegments
+  LineSegments,
+  Ray
 } from "three";
 var defaultOptions = {
   id: "",
@@ -642,7 +643,7 @@ var Graphic = class extends Object3D {
   }
   getPosition() {
     const center2 = this.getCenter();
-    center2.setZ(center2.z + this.options.height);
+    center2.setZ(center2.z + this.options.height / 2);
     return center2;
   }
   init() {
@@ -685,31 +686,67 @@ var Graphic = class extends Object3D {
     this.material = [material, material1];
     return [material, material1];
   }
+  // createMesh(pos: Vector3, color = 0xff0000) { 
+  //   const geometry = new BoxGeometry(1, 1, 1)
+  //   const material = new MeshBasicMaterial({ color })
+  //   const mesh = new Mesh(geometry, material)
+  //   mesh.position.copy(pos)
+  //   this.context.scene.add(mesh)
+  // }
+  // createLine(points: Vector3[], color = 0xff0000) {
+  //   const material = new LineBasicMaterial({
+  //     color: color
+  //   });
+  //   const geometry = new BufferGeometry().setFromPoints(points);
+  //   const line = new Line( geometry, material );
+  //   this.context.scene.add(line)
+  // }
+  getMaxAndMin(pos, dir) {
+    const box = new Box3().setFromObject(this);
+    const minOrigin = pos.clone().add(dir.clone().multiplyScalar(1e3));
+    const raycaster = new Ray(minOrigin, dir.clone().multiplyScalar(-1));
+    const min = new Vector32();
+    raycaster.intersectBox(box, min);
+    const maxOrigin = pos.clone().add(dir.clone().multiplyScalar(-1e3));
+    const raycaster2 = new Ray(maxOrigin, dir.clone());
+    const max = new Vector32();
+    raycaster2.intersectBox(box, max);
+    return {
+      max,
+      min
+    };
+  }
   initGradualMaterial() {
     const { max, min } = new Box3().setFromObject(this);
     const _max = max.clone().sub(min);
     const maxValue = Math.max(_max.x, _max.y, _max.z) / 2;
+    const pos = this.getPosition();
+    const dir = new Vector32(-1, 0.2, 0).normalize();
+    const { max: __max, min: _min } = this.getMaxAndMin(pos, dir);
     const material = this.context.materialFactory.createShaderMaterial({
       gradualColor: this.options.gradualColor,
       center: this.getPosition(),
       maxValue,
       opacity: this.options.fillOpacity,
       direction: new Vector32(-1, 0.2, 0),
-      max,
-      min
+      max: __max,
+      min: _min
     });
     if (this.options.height <= 0.1) {
       this.material = material;
       return material;
     }
+    const center2 = this.getCenter();
+    const dir2 = new Vector32(-1, 0.2, 1).normalize();
+    const { max: ___max, min: __min } = this.getMaxAndMin(center2, dir2);
     const material1 = this.context.materialFactory.createShaderMaterial({
       gradualColor: [darkenColor(this.options.gradualColor[0], this.options.colorFactor), darkenColor(this.options.gradualColor[1], this.options.colorFactor)],
       center: this.getCenter(),
       maxValue,
       opacity: this.options.fillOpacity,
       direction: new Vector32(-1, 0.2, 1),
-      max,
-      min
+      max: ___max,
+      min: __min
     });
     this.material = [material, material1];
     return [material, material1];
@@ -867,9 +904,11 @@ import { EventDispatcher as EventDispatcher2, Vector3 as Vector35 } from "three"
 
 // src/elements/overlay.ts
 import { Box3 as Box32, EventDispatcher, Vector3 as Vector34 } from "three";
+import { debounce } from "lodash";
 var defaultOptions2 = {
   autoUpdate: true,
-  appendToBody: false
+  appendToBody: false,
+  autoChangePlacement: false
 };
 var Overlay = class extends EventDispatcher {
   constructor(context, options = {}) {
@@ -881,8 +920,14 @@ var Overlay = class extends EventDispatcher {
     __publicField(this, "clientPos", { x: 0, y: 0 });
     __publicField(this, "visible", true);
     __publicField(this, "options");
+    __publicField(this, "placement", "top");
+    __publicField(this, "observer", null);
     __publicField(this, "onUpdate", () => {
-      this.updatePosition();
+      if (this.options.autoChangePlacement) {
+        this.usePlacement();
+      } else {
+        this.updatePosition();
+      }
     });
     this.options = __spreadValues(__spreadValues({}, defaultOptions2), options);
     this.registryEvent();
@@ -893,13 +938,175 @@ var Overlay = class extends EventDispatcher {
       this.context.container.appendChild(this.div);
     }
   }
+  initObserver() {
+    const observer = new MutationObserver(
+      debounce(() => {
+        this.usePlacement();
+      }, 100)
+    );
+    observer.observe(this.div, {
+      childList: true,
+      subtree: true,
+      attributes: true
+    });
+    this.observer = observer;
+  }
+  getPlacementPosition() {
+    const { max, min } = new Box32().setFromObject(this.element);
+    const centerX = (max.x + min.x) / 2;
+    const centerY = (max.y + min.y) / 2;
+    return {
+      left: new Vector34(min.x, centerY, max.z),
+      leftTop: new Vector34(min.x, max.y, max.z),
+      top: new Vector34(centerX, max.y, max.z),
+      rightTop: new Vector34(max.x, max.y, max.z),
+      right: new Vector34(max.x, centerY, max.z),
+      rightBottom: new Vector34(max.x, min.y, max.z),
+      bottom: new Vector34(centerX, min.y, max.z),
+      leftBottom: new Vector34(min.x, min.y, max.z),
+      center: new Vector34(centerX, centerY, max.z)
+    };
+  }
+  getPlacementScreenPosition() {
+    const { width, height } = this.context.clientSize;
+    const positions = this.getPlacementPosition();
+    return Object.keys(positions).reduce((obj, key) => {
+      const { x, y } = vector3ToDevice(
+        positions[key],
+        this.context.camera,
+        width,
+        height
+      );
+      obj[key] = { x, y };
+      return obj;
+    }, {});
+  }
+  // 检查是不是溢出了context.container
+  // @return true 表示没有溢出
+  checkOverflow(max, min) {
+    const { width, height } = this.context.clientSize;
+    return min.x > 0 && max.x < width && min.y < height && max.y > 0;
+  }
+  // 计算适用的placement
+  getPlacement() {
+    const { clientWidth, clientHeight } = this.div;
+    const positions = this.getPlacementScreenPosition();
+    const halfWidth = clientWidth / 2;
+    const halfHeight = clientHeight / 2;
+    const placements = [
+      {
+        type: "center",
+        getBox(x, y) {
+          return {
+            max: { x: halfWidth + x, y: y - clientHeight },
+            min: { x: x - halfWidth, y }
+          };
+        }
+      },
+      {
+        type: "left",
+        getBox(x, y) {
+          return {
+            max: { x, y: y - halfHeight },
+            min: { x: x - clientWidth, y: y + halfHeight }
+          };
+        }
+      },
+      {
+        type: "leftTop",
+        getBox(x, y) {
+          return {
+            max: { x, y: y - clientHeight },
+            min: { x: x - clientWidth, y }
+          };
+        }
+      },
+      {
+        type: "top",
+        getBox(x, y) {
+          return {
+            max: { x: x + halfWidth, y: y - clientHeight },
+            min: { x: x - halfWidth, y }
+          };
+        }
+      },
+      {
+        type: "rightTop",
+        getBox(x, y) {
+          return {
+            max: { x: x + clientWidth, y: y - clientHeight },
+            min: { x, y }
+          };
+        }
+      },
+      {
+        type: "right",
+        getBox(x, y) {
+          return {
+            max: { x: x + clientWidth, y: y - halfHeight },
+            min: { x, y: y + halfHeight }
+          };
+        }
+      },
+      {
+        type: "rightBottom",
+        getBox(x, y) {
+          return {
+            max: { x: x + clientWidth, y },
+            min: { x, y: y + clientHeight }
+          };
+        }
+      },
+      {
+        type: "bottom",
+        getBox(x, y) {
+          return {
+            max: { x: x + halfWidth, y },
+            min: { x: x - halfWidth, y: y + clientHeight }
+          };
+        }
+      },
+      {
+        type: "leftBottom",
+        getBox(x, y) {
+          return {
+            max: { x, y },
+            min: { x: x - clientWidth, y: y + halfHeight }
+          };
+        }
+      }
+    ];
+    for (let i = 0; i < placements.length; i++) {
+      const placement = placements[i];
+      const position = positions[placement.type];
+      const { max, min } = placement.getBox(position.x, position.y);
+      if (this.checkOverflow(max, min)) {
+        return {
+          type: placement.type,
+          position
+        };
+      }
+    }
+    return {
+      type: "center",
+      position: positions.center
+    };
+  }
   initDiv() {
     const div = document.createElement("div");
     div.style.position = "absolute";
     return div;
   }
+  usePlacement() {
+    const placement = this.getPlacement();
+    this.div.className = `overlay_${placement.type}`;
+    this._updatePosition(placement.position.x, placement.position.y);
+  }
   bindElement(element) {
     this.element = element;
+    if (this.options.autoChangePlacement) {
+      this.initObserver();
+    }
     this.onUpdate();
   }
   unBindElement() {
@@ -932,14 +1139,9 @@ var Overlay = class extends EventDispatcher {
     const { width, height } = this.context.clientSize;
     return x >= 0 && x <= width && y >= 0 && y <= height;
   }
-  updatePosition(force = false) {
-    const vector = this.getPosition();
-    const { width, height, x: clientX, y: clientY } = this.context.clientSize;
-    const { x, y } = vector3ToDevice(vector, this.context.camera, width, height);
-    if (this.clientPos.x === x && this.clientPos.y === y && !force) {
-      return;
-    }
+  _updatePosition(x, y) {
     this.clientPos = { x, y };
+    const { width, height, x: clientX, y: clientY } = this.context.clientSize;
     if (this.options.appendToBody) {
       this.div.style.left = `${clientX}px`;
       this.div.style.top = `${clientY + height}px`;
@@ -950,6 +1152,20 @@ var Overlay = class extends EventDispatcher {
       this.dispatchEvent({ type: "update-position", x, y, width, height });
     }
   }
+  updatePosition(force = false) {
+    const vector = this.getPosition();
+    const { width, height, x: clientX, y: clientY } = this.context.clientSize;
+    const { x, y } = vector3ToDevice(
+      vector,
+      this.context.camera,
+      width,
+      height
+    );
+    if (this.clientPos.x === x && this.clientPos.y === y && !force) {
+      return;
+    }
+    this._updatePosition(x, y);
+  }
   registryEvent() {
     this.context.addEventListener("update", this.onUpdate);
   }
@@ -957,10 +1173,11 @@ var Overlay = class extends EventDispatcher {
     this.context.removeEventListener("update", this.onUpdate);
   }
   dispose() {
-    var _a;
+    var _a, _b;
     this.unRegistryEvent();
     this.unBindElement();
-    (_a = this.div) == null ? void 0 : _a.remove();
+    (_a = this.observer) == null ? void 0 : _a.disconnect();
+    (_b = this.div) == null ? void 0 : _b.remove();
     this.div = null;
   }
 };
@@ -1316,7 +1533,7 @@ var GraphicLayer = class extends Layer {
 };
 
 // src/layer/poi-layer.ts
-import { debounce } from "lodash";
+import { debounce as debounce2 } from "lodash";
 var PoiLayer = class extends Layer {
   constructor(context) {
     super(context);
@@ -1329,7 +1546,7 @@ var PoiLayer = class extends Layer {
       });
     });
     this.registryEvent();
-    this.debounceCollisionDetection = debounce(this.collisionDetection, 10);
+    this.debounceCollisionDetection = debounce2(this.collisionDetection, 10);
   }
   clear(force = false) {
     this.pois.forEach((item) => {
@@ -2442,7 +2659,14 @@ var HoverHelper = class extends EventDispatcher5 {
 };
 
 // src/factory/material.ts
-import { Color as Color4, LineBasicMaterial as LineBasicMaterial2, MeshStandardMaterial as MeshStandardMaterial2, MeshBasicMaterial as MeshBasicMaterial3, ShaderMaterial as ShaderMaterial2, DoubleSide as DoubleSide4 } from "three";
+import {
+  Color as Color4,
+  LineBasicMaterial as LineBasicMaterial2,
+  MeshStandardMaterial as MeshStandardMaterial2,
+  MeshBasicMaterial as MeshBasicMaterial3,
+  ShaderMaterial as ShaderMaterial2,
+  DoubleSide as DoubleSide4
+} from "three";
 function vectorToString(vector) {
   return `${vector.x}-${vector.y}-${vector.z}`;
 }
@@ -2499,8 +2723,18 @@ var MaterialFactory = class {
     this.meshBasicMaterialMap.set(key, material);
     return material;
   }
-  createShaderMaterial({ gradualColor, center: center2, maxValue, opacity, direction, max, min }) {
-    const key = `${gradualColor.toString()}-${vectorToString(center2)}-${maxValue}-${opacity}-${vectorToString(direction)}`;
+  createShaderMaterial({
+    gradualColor,
+    center: center2,
+    maxValue,
+    opacity,
+    direction,
+    max,
+    min
+  }) {
+    const key = `${gradualColor.toString()}-${vectorToString(
+      center2
+    )}-${maxValue}-${opacity}-${vectorToString(direction)}`;
     if (this.shaderMaterialMap.has(key)) {
       return this.shaderMaterialMap.get(key);
     }
@@ -2515,11 +2749,23 @@ var MaterialFactory = class {
     varying vec3 vColor; 
 
     void main() {
+      vec3 lineVec = uMax - uMin; // \u7EBF\u6BB5AB\u7684\u65B9\u5411\u5411\u91CF
+      vec3 AP = position - uMin; // \u5411\u91CFAP
+      float t = dot(AP, lineVec) / dot(lineVec, lineVec); // \u53C2\u6570t
+      t = clamp(t, 0.0, 1.0); // \u9650\u5236t\u5728[0, 1]\u8303\u56F4\u5185\uFF0C\u786E\u4FDD\u6700\u77ED\u8DDD\u79BB\u5728\u7EBF\u6BB5AB\u4E0A
+  
+      vec3 closestPoint = uMin + t * lineVec; // \u6700\u77ED\u8DDD\u79BB\u70B9\u7684\u4F4D\u7F6E
+      vec3 vecAP = closestPoint - uMin; // \u5411\u91CFAP'
+      float distance = length(vecAP);
+      float maxLen = length(lineVec);
+
       vec3 direction = normalize(uDirection);
+      float gradient = dot(normalize(normal), normalize(uDirection));
       vec3 currentPosition = position - center;
-      float colorFactor = (dot(direction, currentPosition) / maxValue) * 0.5 + 0.5;
+      // float colorFactor = (dot(direction, currentPosition) / maxValue) * 0.5 + 0.5;
+      float colorFactor = distance / maxLen;
 
-      vColor = mix(uColor, uGradualColor, colorFactor);
+      vColor = mix(uColor, uGradualColor, 1.0 - t);
       gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
     }
     `;
@@ -3141,7 +3387,7 @@ function getConfig(config) {
 }
 
 // src/bmap.ts
-import { debounce as debounce2 } from "lodash";
+import { debounce as debounce3 } from "lodash";
 var MapTypePolar = /* @__PURE__ */ ((MapTypePolar2) => {
   MapTypePolar2[MapTypePolar2["D2"] = 0] = "D2";
   MapTypePolar2[MapTypePolar2["D3"] = 1.1] = "D3";
@@ -3513,7 +3759,7 @@ var BMap = class extends EventDispatcher7 {
     window.addEventListener("keydown", this.onKeydown);
     window.addEventListener("keyup", this.onKeyUp);
     if (this.config.resizeObserver) {
-      const observe = new ResizeObserver(debounce2(this.resize, 5));
+      const observe = new ResizeObserver(debounce3(this.resize, 5));
       observe.observe(this.container);
       this.observe = observe;
     }