@aibee/crc-bmap 0.0.46 → 0.0.48

package/lib/bmap.esm.js

@@ -112,7 +112,6 @@ import {
   Scene,
   WebGLRenderer,
   OrthographicCamera,
-  HemisphereLight,
   Shape,
   PCFSoftShadowMap,
   Group,
@@ -129,7 +128,14 @@ function initScene() {
   return scene;
 }
 function initRenderer() {
-  const renderer = new WebGLRenderer({ antialias: true });
+  const renderer = new WebGLRenderer({
+    antialias: true
+    // logarithmicDepthBuffer: true,
+    // alpha: false,
+    // premultipliedAlpha: false
+  });
+  renderer.autoClear = true;
+  renderer.setClearAlpha(1);
   renderer.setClearColor(16777215);
   renderer.setPixelRatio(window.devicePixelRatio);
   renderer.shadowMap.enabled = true;
@@ -146,12 +152,7 @@ function initCamera(width, height) {
 }
 function initLight() {
   const lights = new Group();
-  const hemisphereLight = new HemisphereLight(16777215, 16777215, 2);
-  hemisphereLight.intensity = 1;
-  hemisphereLight.position.set(0, 0, 10);
-  hemisphereLight.up.set(0, 0, 1);
-  lights.add(hemisphereLight);
-  const ambientLight = new AmbientLight(16777215, 1);
+  const ambientLight = new AmbientLight(16777215, 2.6);
   lights.add(ambientLight);
   return lights;
 }
@@ -176,7 +177,7 @@ function initDirectionalLight(color = 16777215, intensity = 1) {
   directionalLight.castShadow = true;
   directionalLight.shadow.radius = 8;
   directionalLight.shadow.bias = -1e-3;
-  directionalLight.shadow.mapSize.set(128, 128);
+  directionalLight.shadow.mapSize.set(256, 256);
   directionalLight.shadow.camera.left = -200;
   directionalLight.shadow.camera.right = 200;
   directionalLight.shadow.camera.top = 200;
@@ -376,6 +377,16 @@ function sleepOnePromise() {
 function strToNumber(str) {
   return parseInt(str.replace("#", "0x"), 16);
 }
+function addAlphaToHexColor(hexColor, alpha) {
+  let r = parseInt(hexColor.substring(1, 3), 16);
+  let g = parseInt(hexColor.substring(3, 5), 16);
+  let b = parseInt(hexColor.substring(5, 7), 16);
+  let newR = Math.round(r * alpha);
+  let newG = Math.round(g * alpha);
+  let newB = Math.round(b * alpha);
+  let newHexColor = `#${(1 << 24 | newR << 16 | newG << 8 | newB).toString(16).slice(1)}`;
+  return newHexColor;
+}
 
 // src/context.ts
 import {
@@ -397,17 +408,12 @@ import { EventDispatcher as EventDispatcher3 } from "three";
 import {
   Object3D,
   ExtrudeGeometry,
-  MeshStandardMaterial,
   Mesh,
-  Color as Color2,
   Box3,
-  EdgesGeometry,
-  Vector3
+  Vector3,
+  BufferGeometry,
+  LineSegments
 } from "three";
-import { merge } from "lodash";
-import { LineMaterial } from "three/examples/jsm/lines/LineMaterial.js";
-import { LineSegmentsGeometry } from "three/examples/jsm/lines/LineSegmentsGeometry.js";
-import { LineSegments2 } from "three/examples/jsm/lines/LineSegments2.js";
 var defaultOptions = {
   id: "",
   // 图形id
@@ -428,7 +434,7 @@ var defaultOptions = {
   strokeOpacity: 1,
   // 描边透明度
   strokeWidth: 1,
-  // 描边宽度
+  // 描边宽度 
   doors: [],
   // 门配置
   locked: false,
@@ -440,7 +446,9 @@ var defaultOptions = {
     curveIndex: []
   },
   layerType: "",
-  zIndex: 0
+  zIndex: 0,
+  stroke: true,
+  userData: {}
 };
 var Graphic = class extends Object3D {
   constructor(context, options) {
@@ -450,8 +458,10 @@ var Graphic = class extends Object3D {
     __publicField(this, "material");
     __publicField(this, "mesh");
     __publicField(this, "line");
+    __publicField(this, "lineMaterial");
+    __publicField(this, "lineGeometry");
     __publicField(this, "options");
-    this.options = proxyOptions(merge({}, defaultOptions, options), this);
+    this.options = proxyOptions(__spreadValues(__spreadValues({}, defaultOptions), options), this);
     if (this.options.geometry.type === "point") {
       const [x, y] = this.options.geometry.cds;
       this.position.set(x, y, this.options.height + this.options.airHeight);
@@ -460,23 +470,24 @@ var Graphic = class extends Object3D {
     this.init();
     this.visible = this.options.visible;
     this.addEventListener("change-fillColor", ({ value }) => {
-      this.material.color = new Color2(value);
+      this.initMaterial();
+      this.initMesh();
     });
     this.addEventListener("change-fillOpacity", ({ value }) => {
-      this.material.opacity = value;
+      this.initMaterial();
+      this.initMesh();
     });
     this.addEventListener("change-height", ({ value }) => {
       this.dispose();
       this.init();
     });
     this.addEventListener("change-strokeColor", ({ value }) => {
-      this.line.material.color = new Color2(value);
+      this.initLineMaterial();
+      this.createBorder();
     });
     this.addEventListener("change-strokeOpacity", ({ value }) => {
-      this.line.material.opacity = value;
-    });
-    this.addEventListener("change-strokeWidth", ({ value }) => {
-      this.line.material.linewidth = value;
+      this.initLineMaterial();
+      this.createBorder();
     });
     this.addEventListener("change-airHeight", ({ value }) => {
       this.position.z = value;
@@ -484,6 +495,20 @@ var Graphic = class extends Object3D {
     this.addEventListener("change-visible", ({ value }) => {
       this.visible = value;
     });
+    this.addEventListener("change-stroke", ({ value }) => {
+      var _a;
+      if (value) {
+        if (this.line) {
+          return;
+        }
+        this.initLineGeometry();
+        this.initLineMaterial();
+        this.createBorder();
+      } else if (this.line) {
+        this.remove(this.line);
+        (_a = this.lineGeometry) == null ? void 0 : _a.dispose();
+      }
+    });
   }
   getCenter() {
     if (this.options.geometry.type === "point") {
@@ -512,13 +537,14 @@ var Graphic = class extends Object3D {
   }
   init() {
     this.geometry = this.initGeometry();
-    this.material = this.initMaterial();
-    this.mesh = this.initMesh();
+    this.initMaterial();
+    this.initMesh();
     this.mesh.position.z = this.options.airHeight;
-    this.mesh.castShadow = true;
-    this.add(this.mesh);
-    this.line = this.createBorder();
-    this.add(this.line);
+    if (this.options.stroke) {
+      this.initLineMaterial();
+      this.initLineGeometry();
+      this.createBorder();
+    }
   }
   initGeometry() {
     const shape = initShape(
@@ -534,39 +560,59 @@ var Graphic = class extends Object3D {
     return geometry;
   }
   initMaterial() {
-    const material = new MeshStandardMaterial({
+    const material = this.context.materialFactory.createMeshStandardMaterial({
       color: this.options.fillColor,
-      roughness: 1,
-      transparent: true,
-      opacity: this.options.fillOpacity,
-      depthWrite: true
+      opacity: this.options.fillOpacity
     });
+    this.material = material;
     return material;
   }
   initLineMaterial() {
-    const lineMaterial = new LineMaterial({
-      color: new Color2(this.options.strokeColor).getHex(),
-      opacity: this.options.strokeOpacity,
-      transparent: true,
-      depthWrite: true,
-      linewidth: this.options.strokeWidth,
-      wireframe: false,
-      dashed: false
+    const lineMaterial = this.context.materialFactory.createLineMaterial({
+      color: this.options.strokeColor,
+      opacity: this.options.strokeOpacity
     });
-    const { clientSize: { width, height } } = this.context;
-    lineMaterial.resolution.set(width, height);
+    this.lineMaterial = lineMaterial;
     return lineMaterial;
   }
   initMesh() {
-    return new Mesh(this.geometry, this.material);
+    if (this.mesh) {
+      this.remove(this.mesh);
+    }
+    this.mesh = new Mesh(this.geometry, this.material);
+    this.add(this.mesh);
+  }
+  getBorderPoints() {
+    const points = [];
+    const height = this.options.height;
+    const { cds, curveIndex } = this.options.geometry;
+    for (let j = 0; j < cds.length; j++) {
+      const curCds = cds[j];
+      for (let i = 0; i < curCds.length; i++) {
+        const cur = curCds[i];
+        const next = i + 1 === curCds.length ? curCds[0] : curCds[i + 1];
+        points.push(new Vector3(cur[0], cur[1], height));
+        points.push(new Vector3(next[0], next[1], height));
+      }
+    }
+    return points;
+  }
+  initLineGeometry() {
+    if (this.lineGeometry) {
+      this.lineGeometry.dispose();
+    }
+    const points = this.getBorderPoints();
+    const lineGeometry = new BufferGeometry().setFromPoints(points);
+    this.lineGeometry = lineGeometry;
   }
   createBorder() {
-    const material = this.initLineMaterial();
-    const geometry = new EdgesGeometry(this.geometry);
-    const lineGeometry = new LineSegmentsGeometry();
-    lineGeometry.fromEdgesGeometry(geometry);
-    const line = new LineSegments2(lineGeometry, material);
-    line.position.z = this.options.airHeight;
+    if (this.line) {
+      this.remove(this.line);
+    }
+    const line = new LineSegments(this.lineGeometry, this.lineMaterial);
+    line.position.z = this.options.airHeight + 0.01;
+    this.line = line;
+    this.add(line);
     return line;
   }
   raycast(raycaster) {
@@ -584,7 +630,9 @@ var Graphic = class extends Object3D {
     return false;
   }
   dispose() {
-    dispose(this);
+    var _a;
+    this.geometry.dispose();
+    (_a = this.line) == null ? void 0 : _a.geometry.dispose();
     this.clear();
   }
 };
@@ -595,7 +643,7 @@ import {
   PlaneGeometry,
   Mesh as Mesh2,
   ShadowMaterial,
-  Color as Color3,
+  Color as Color2,
   DoubleSide
 } from "three";
 var Shadow = class extends Object3D2 {
@@ -603,13 +651,13 @@ var Shadow = class extends Object3D2 {
     super();
     __publicField(this, "directionalLight");
     __publicField(this, "plane");
-    __publicField(this, "basicOpacity", 0.15);
+    __publicField(this, "basicOpacity", 0.07);
     this.directionalLight = this.initLight();
     this.initPlane();
   }
   // 创建光源
   initLight() {
-    const directionalLight = initDirectionalLight(16777215, 1);
+    const directionalLight = initDirectionalLight(16777215, 0.5);
     directionalLight.position.set(0, 0, 100);
     this.add(directionalLight);
     return directionalLight;
@@ -625,7 +673,7 @@ var Shadow = class extends Object3D2 {
     this.directionalLight.shadow.camera.far = Math.max(x, y);
   }
   changeLightColor(color) {
-    this.directionalLight.color = new Color3(color);
+    this.directionalLight.color = new Color2(color);
   }
   setPosition(position) {
     this.position.copy(position);
@@ -662,7 +710,6 @@ var Shadow = class extends Object3D2 {
 
 // src/elements/poi.ts
 import { Object3D as Object3D4 } from "three";
-import { merge as merge2 } from "lodash";
 
 // src/elements/overlay.ts
 import { Box3 as Box32, EventDispatcher, Vector3 as Vector33 } from "three";
@@ -745,7 +792,7 @@ var Overlay = class extends EventDispatcher {
 
 // src/elements/poi.ts
 var defaultOptions2 = {
-  text: "",
+  texts: [{ text: "" }],
   level: 1,
   collision_enable: true,
   opacity: 1,
@@ -765,7 +812,7 @@ var Poi = class extends Object3D4 {
     __publicField(this, "_changePosition", () => {
       this.overlay.div.style.transform = `translate3d(-50%, ${this.options.icon ? "-100%" : "-50%"}, 0)`;
     });
-    this.options = proxyOptions(merge2({}, defaultOptions2, options), this);
+    this.options = proxyOptions(__spreadValues(__spreadValues({}, defaultOptions2), options), this);
     this.position.set(((_a = options.position) == null ? void 0 : _a.x) || 0, ((_b = options.position) == null ? void 0 : _b.y) || 0, ((_c = options.position) == null ? void 0 : _c.z) || 0);
     this.overlay = new Overlay(this.context);
     this.overlay.bindElement(this);
@@ -784,7 +831,7 @@ var Poi = class extends Object3D4 {
         this.resetSize();
       }
     });
-    this.addEventListener("change-text", ({ value }) => {
+    this.addEventListener("change-texts", ({ value }) => {
       this.overlay.div.removeChild(this.textDiv);
       this.overlay.div.appendChild(this.initText());
       this.resetSize();
@@ -828,6 +875,7 @@ var Poi = class extends Object3D4 {
       div.appendChild(this.initIcon());
     }
     div.style.fontSize = `12px`;
+    div.style.textShadow = `#fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0`;
     div.style.display = `flex`;
     div.style.flexDirection = `column`;
     div.style.justifyContent = `center`;
@@ -844,18 +892,27 @@ var Poi = class extends Object3D4 {
   initText() {
     const textDiv = document.createElement("div");
     textDiv.appendChild(this.createTextFragment());
-    textDiv.style.background = "rgba(255, 255, 255, .7)";
-    textDiv.style.padding = "2px";
-    textDiv.style.borderRadius = "4px";
+    if (this.options.texts.length > 1) {
+      textDiv.style.background = "rgba(255, 255, 255, .7)";
+      textDiv.style.padding = "2px 4px";
+      textDiv.style.borderRadius = "4px";
+      textDiv.style.fontSize = "12px";
+      textDiv.style.lineHeight = "16px";
+    }
     this.textDiv = textDiv;
     return textDiv;
   }
   createTextFragment() {
     const f = document.createDocumentFragment();
-    this.options.text.split("\r\n").forEach((item) => {
+    this.options.texts.forEach((item) => {
       const div = document.createElement("div");
       div.style.whiteSpace = "nowrap";
-      div.textContent = item;
+      if (item.styles) {
+        for (let [key, value] of Object.entries(item.styles)) {
+          div.style[key] = value;
+        }
+      }
+      div.textContent = item.text;
       f.appendChild(div);
     });
     return f;
@@ -1234,7 +1291,8 @@ var Floor = class extends Object3D7 {
   addGrounds(grounds) {
     grounds.forEach((ground) => {
       if (!this.grounds.has(ground)) {
-        ground.options.height += ground.options.zIndex / 1e5;
+        ground.options.height += ground.options.zIndex / 1e4;
+        ground.mesh.castShadow = true;
         this.grounds.add(ground);
         this.groundUpper.add(ground);
       }
@@ -1261,7 +1319,7 @@ var Floor = class extends Object3D7 {
     this.add(this.shadow);
   }
   addGraphic(graphicOptions) {
-    graphicOptions.height += (graphicOptions.height || 0) / 1e5;
+    graphicOptions.height += this.graphicLayer.graphicMap.size * 1e-5;
     return this.graphicLayer.createGraphic(graphicOptions);
   }
   addPoi(poiOptions) {
@@ -1990,6 +2048,53 @@ var HoverHelper = class extends EventDispatcher4 {
   }
 };
 
+// src/factory/material.ts
+import { LineBasicMaterial as LineBasicMaterial2, MeshStandardMaterial as MeshStandardMaterial3 } from "three";
+var MaterialFactory = class {
+  constructor(context) {
+    this.context = context;
+    __publicField(this, "lineMaterialMap", /* @__PURE__ */ new Map());
+    __publicField(this, "meshStandardMaterialMap", /* @__PURE__ */ new Map());
+  }
+  generateLineMaterialKey({ color, opacity }) {
+    return `${color}-${opacity}`;
+  }
+  createLineMaterial({ color, opacity }) {
+    const key = this.generateLineMaterialKey({ color, opacity });
+    if (this.lineMaterialMap.has(key)) {
+      return this.lineMaterialMap.get(key);
+    }
+    const lineMaterial = new LineBasicMaterial2({
+      color,
+      transparent: true,
+      opacity
+    });
+    this.lineMaterialMap.set(key, lineMaterial);
+    return lineMaterial;
+  }
+  createMeshStandardMaterial({ color, opacity }) {
+    const key = `${color}-${opacity}`;
+    if (this.meshStandardMaterialMap.has(key)) {
+      return this.meshStandardMaterialMap.get(key);
+    }
+    const material = new MeshStandardMaterial3({
+      color,
+      roughness: 1,
+      transparent: true,
+      opacity,
+      depthWrite: true
+    });
+    this.meshStandardMaterialMap.set(key, material);
+    return material;
+  }
+  dispose() {
+    this.lineMaterialMap.forEach((val, _) => {
+      val.dispose();
+    });
+    this.lineMaterialMap.clear();
+  }
+};
+
 // src/context.ts
 var Context = class extends EventDispatcher5 {
   constructor(container, config) {
@@ -2009,6 +2114,7 @@ var Context = class extends EventDispatcher5 {
     __publicField(this, "hoverHelper");
     __publicField(this, "basicRatio");
     // zoom=1的时候，100M对应的像素个数
+    __publicField(this, "materialFactory");
     __publicField(this, "clientSize", {
       width: 0,
       height: 0
@@ -2062,6 +2168,7 @@ var Context = class extends EventDispatcher5 {
     this.init();
     this.selection = new Selection(this);
     this.hoverHelper = new HoverHelper(this);
+    this.materialFactory = new MaterialFactory(this);
     this.resizeClientSize();
     this.registryEvent();
   }
@@ -2207,6 +2314,7 @@ var Context = class extends EventDispatcher5 {
       this.control.update();
       this.control.maxAzimuthAngle = Infinity;
       this.control.minAzimuthAngle = Infinity;
+      return;
     }
     return timeoutPromise(
       new Promise((resolve) => {
@@ -2245,9 +2353,11 @@ var Context = class extends EventDispatcher5 {
       target: this.control.target.clone()
     };
     if (!duration) {
-      this.camera.position.copy(start.target.clone().sub(lookAtVector));
-      this.control.target.copy(start.target);
-      this.camera.zoom = start.zoom;
+      this.camera.position.copy(center2.clone().sub(lookAtVector));
+      this.control.target.copy(center2);
+      this.camera.zoom = zoom;
+      this.control.update();
+      return;
     }
     return timeoutPromise(
       new Promise((resolve) => {
@@ -2353,12 +2463,13 @@ var Context = class extends EventDispatcher5 {
     this.lights.children.forEach(
       (light) => light.dispose()
     );
+    this.materialFactory.dispose();
     dispose(this.scene);
   }
 };
 
 // src/config.ts
-import { merge as merge3 } from "lodash";
+import { merge } from "lodash";
 var defaultConfig = {
   apiDomain: "",
   apiInfo: {},
@@ -2376,7 +2487,8 @@ var defaultConfig = {
   },
   useFloorCache: true,
   control: {
-    maxPolar: 0.9
+    maxPolar: 1.2,
+    defaultPolar: 0.9
   },
   svg: {
     circle: {
@@ -2393,10 +2505,26 @@ var defaultConfig = {
   },
   hover: {
     time: 500
+  },
+  ground: {
+    color: "#ffffff",
+    opacity: 1,
+    height: 5,
+    stroke: true,
+    strokeColor: "#E6E6E6",
+    strokeOpacity: 1
+  },
+  markGraphic: {
+    color: "#ecf0f7",
+    opacity: 1,
+    height: 1e-3,
+    stroke: false,
+    strokeColor: "#000",
+    strokeOpacity: 1
   }
 };
 function getConfig(config) {
-  return merge3({}, defaultConfig, config);
+  return merge({}, defaultConfig, config);
 }
 
 // src/bmap.ts
@@ -2526,6 +2654,26 @@ var BMap = class extends EventDispatcher6 {
           item.info.transformToBuildingGround = true;
         });
       }
+      const { ground, markGraphic } = this.config;
+      for (const item of data) {
+        if (item.info.group === "ground") {
+          item.info.fillColor = ground.color;
+          item.info.fillOpacity = ground.opacity;
+          item.info.height = ground.height;
+          item.info.stroke = ground.stroke;
+          item.info.strokeColor = ground.strokeColor;
+          item.info.strokeOpacity = ground.strokeOpacity;
+        } else {
+          if (item.info.userData.mark) {
+            item.info.height = markGraphic.height;
+            item.info.fillColor = markGraphic.color;
+            item.info.fillOpacity = markGraphic.opacity;
+            item.info.stroke = markGraphic.stroke;
+            item.info.strokeColor = markGraphic.strokeColor;
+            item.info.strokeOpacity = markGraphic.strokeOpacity;
+          }
+        }
+      }
       if (!this.config.useFloorCache) {
         this.floorDataMap.clear();
       }
@@ -2538,26 +2686,18 @@ var BMap = class extends EventDispatcher6 {
     if (!data.length) {
       return { curFloor, graphics: [] };
     }
-    const grounds = data.filter((item) => item.info.group === "ground");
-    grounds.forEach((item) => {
-      item.info.fillColor = "#F5F7F9";
-      item.info.fillOpacity = 1;
-      item.info.strokeOpacity = 0;
-      item.info.height = 5;
-    });
-    const groundGraphics = grounds.map((ground) => new Graphic(this.context, ground.info));
-    curFloor.addGrounds(groundGraphics);
-    const graphicData = data.filter((item) => item.info.group !== "ground");
-    graphicData.forEach((item, index) => {
-      item.info.height = 5;
-    });
     const legacyToGraphicMap = /* @__PURE__ */ new Map();
-    const graphics = graphicData.map((item) => {
-      const graphic = curFloor.addGraphic(item.info);
-      graphic.userData.data = item;
-      legacyToGraphicMap.set(item.legacy_id, graphic);
-      return graphic;
-    });
+    const graphics = [];
+    for (const item of data) {
+      if (item.info.group === "ground") {
+        curFloor.addGrounds([new Graphic(this.context, item.info)]);
+      } else {
+        const graphic = curFloor.addGraphic(item.info);
+        graphic.userData.data = item;
+        legacyToGraphicMap.set(item.legacy_id, graphic);
+        graphics.push(graphic);
+      }
+    }
     curFloor.addShadow();
     curFloor.userData.legacyToGraphicMap = legacyToGraphicMap;
     return { curFloor, graphics };
@@ -2574,6 +2714,7 @@ var BMap = class extends EventDispatcher6 {
         this.context.switchFloor(createdFloor.curFloor);
         this.context.control.minZoom = 0;
         this.context.control.maxZoom = Infinity;
+        this.context.camera.zoom = 1;
         this.context.setAzimuthalAngle(0, 0);
         this.context.fitCameraToGround(void 0, 0);
         this.basicZoom = this.context.camera.zoom;
@@ -2833,6 +2974,8 @@ var BMap = class extends EventDispatcher6 {
   }
   dispose() {
     this.context.dispose();
+    this.floorDataMap.clear();
+    this.buildingGroundMap.clear();
     clearTextTexture();
     clearCanvas();
     this.unRegistryEvent();
@@ -2858,6 +3001,7 @@ export {
   SvgLine,
   SvgPolygon,
   Timer,
+  addAlphaToHexColor,
   clearCanvas,
   clearTextTexture,
   createCanvas,