BMap

起步

yarn add @aibee/bmap
或者
npm install @aibee/bmap

import * as THREE from "three";
// 全部加载

import {
  BrowserUtil,
  BMap,
  Navigation,
  DataEventEnum,
  Config,
  LayerType,
  DataModeType,
  Poi,
  GraphicElement,
  Polygon,
} from "@aibee/bmap";
// import {  } from '../../data/data-event-enum';

const test = () => {
  // 设置数据来源
  Config.from = 1; // 0为老数据， 1为编辑器数据
  // 设置热力图颜色等级
  Config.heatMap.gradient = {
    0: "#8F9FCD",
    0.5: "#6284FF",
    1: "#F95D5D",
  };
  const container = document.getElementById("container");
  let place_id = BrowserUtil.getQueryVariable("place_id");
  let floor_id = BrowserUtil.getQueryVariable("floor_id");
  if (!place_id) {
    place_id = "240";
    floor_id = "1581";
  }
  // 创建bmap
  const bmap = new BMap(container!, {
    place_id,
    floor_id,
  });

  // 设置选中颜色
  bmap.context.selected_color = 0xff0000;
  // 设置选中透明度
  bmap.context.selected_opacity = 0;
  // 设置是否选取
  bmap.context.setSelection(true);
  // 设置触摸  是否触摸， 是否影响子节点， 影响类型
  bmap.setTouchEnable(true, true, Polygon);

  // 设置可旋转
  bmap.rotate_enabled = true;
  // 地图根据place_id, floor_id加载
  bmap.load();
  // 设置纵向旋转范围
  bmap.rotate_phi_range = [0, Math.PI / 4];
  // 设置纵向初始角度
  bmap.rotate_phi = 0;
  (window as any).bmap = bmap;

  // 地图加载完成回调
  bmap.on(DataEventEnum.MapLoaded, () => {
    // 换层
    // bmap.switchFloor(bmap.floors[0]);
    // 当前楼层
    const curFloor = bmap.activated_floor!;

    // 设置热力数据
    curFloor.heat_map = { max: 100, data: [{ x: 0, y: 0, value: 11 }] };

    const layers = curFloor.layers;
    // 图形层
    const graphicLayer = layers.find(
      (layer) => layer.l_type === LayerType.Graphic
    );
    const shandardGraphicLayer = layers.find(
      (layer) =>
        layer.l_type === LayerType.Graphic &&
        layer.l_mode === DataModeType.Standard
    );
    const externalGraphicLayer = layers.find(
      (layer) =>
        layer.l_type === LayerType.Graphic &&
        layer.l_mode === DataModeType.External
    );
    const poiLayer = layers.find(
      (layer) =>
        layer.l_type === LayerType.POI && layer.l_mode === DataModeType.External
    );

    const poi = poiLayer?.elements[0] as Poi;
    const graphicElement = graphicLayer?.elements[0];
    // 图形元素
    if (graphicElement instanceof GraphicElement) {
      // 修改颜色
      graphicElement.color = "#ffffff";
      // 显示设置
      graphicElement.visible = false;
    }
  });

  // 创建导航
  const navigation = new Navigation(bmap);
  (window as any).navigation = navigation;
  // navigation.setView(true, { width: 100, height: 100 });
  navigation.setView(true, 0, 10);

  const getPointByDistance = (
    dis: number,
    positions: { x: number; y: number }[]
  ): { x: number; y: number } | null => {
    let count = 0;
    const ps = positions.map((p) => new THREE.Vector2(p.x, p.y));
    for (let i = 1; i < ps.length; i++) {
      const q = ps[i - 1];
      const p = ps[i];
      const d = p.distanceTo(q);
      if (dis < count + d) {
        const v = p.clone().sub(q).normalize();
        v.multiplyScalar(dis - count).add(q);
        return { x: v.x, y: v.y };
      }
      count += d;
    }
    return null;
  };

  const testInterv = (positions: { x: number; y: number }[]) => {
    let cur = 0;
    const int = setInterval(() => {
      cur++;
      const p = getPointByDistance(cur, positions)!;
      if (!p) {
        clearInterval(int);
        return;
      }
      // p.x = Math.random() * 10 - 5 + p.x;
      // p.y = Math.random() * 10 - 5 + p.y;
      navigation.updatePosition(p);
      navigation.updateRotate(Math.random() * 360);
      // guide.roadLine!.current = getPointByDistance(cur, positions)!;
      // console.log('aaaaa', cur);
    }, 100);
  };
  // 监听换层
  bmap.on(DataEventEnum.SwitchFloor, () => {
    const size = bmap.activated_floor?.getSize2();
    const positions = [] as { x: number; y: number }[];
    for (let i = 0; i < 3; i++) {
      positions.push({
        x: Math.random() * (size!.max.x - size!.min.x) + size!.min.x,
        y: Math.random() * (size!.max.y - size!.min.y) + size!.min.y,
      });
    }
    // const positions = [
    //   {
    //     x: 9.355804142488765,
    //     y: -48.98286790837069,
    //   },
    //   {
    //     x: 34.37439218063179,
    //     y: -34.226747414809765,
    //   },
    //   {
    //     x: 30.482035337276812,
    //     y: 94.39075917259001,
    //   },
    // ];
    navigation.initPath(positions, {
      arrowUrl: "imgs/guide-arrow.png",
      roadEndUrl: "imgs/road-end.png",
      roadEndRotate: Math.PI,
      roadEndSize: [50, 50],
      nodeUrl: "imgs/road-node.png",
    });
    navigation.updatePosition(positions[0]);
    (window as any).guide = navigation;
    testInterv(positions);
  });

  // 监听错误
  bmap.on(
    DataEventEnum.Error,
    (errorInfo: { status: number; error_msg: string }) => {
      console.error("error", errorInfo);
    }
  );
};