# perview_file

**Repository Path**: dogqiu/perview_file

## Basic Information

- **Project Name**: perview_file
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-03
- **Last Updated**: 2025-03-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 版本更新说明

#### v1.1.1
- 解决changebuliding方法传floorCode 找不到楼层的问题

#### v1.0.9

- 添加高亮出发方式的参数:highlightPicker

#### v1.0.8

- 修复接口报错不能通过 on 监听错误的问题
- 修复报错 loading 不终止的问题

#### v1.0.7

- changeBuliding 方法传 flooorCode 参数报错问题修复

# invest_map_sdk 使用说明 v1.0.0

[fengmap 开发文档](https://developer.fengmap.com/docs/js/v3.0.9/fengmap.FMAnimation.html)

> 此 sdk 在 fengmap 基础的封装，已经内嵌了 fengmap.map-nologo-v3.0.9.min.js 和 fengmap.analyser.min.js 2 个基础包，如有其他 fengmap 库请自行引用，注意版本为 3.0.9;

### 1.安装

- 设置 npm 源为红星私有源
  `npm set registry http://npm.corp.rs.com/`

- 安装
  `npm install invest_map_sdk --save`

### 2.简单示例

```
//初始化实例
 const map = new InvestMap({
    el: document.getElementById("map"),
    env: "uat1",
  });
  map.loadMap({ mallCode: "10378", buildingCode: "10378A" }).then((res) => {
    console.log(res);
  });

  map.on("error", (error) => {
    console.log(error);
  });

  map.on("click", (e) => {
    console.log(e);
  });
```

### 3.InvestMap 类说明

```
export interface InvestMapClass {
  env: Env;
  floorList: FloorList[]; //楼层列表
  https: Axios;
  FMap: any;
  on: any;
  fengMapOptions: FengMapOpitons; //fengMap地图配置参数
  analyser: any; //分析器
  boothColor:BoothColorConfig; //主题颜色
  mallCode: string;
  buildingCode: string;
  floorCode: string;
  loading: boolean; //地图是否处于loading,通过on方法监听
  boothList: BoothList[]; //展位列表

  /**
   * 重置地图
   * @returns
   */
  resetMap(): void;

  /**
   * 加载地图
   * @returns
   */
  loadMap(options: GetLoadMapOptions): Promise<LoadMapRes>;

  /**
   * 初始化地图
   * @param option
   */
  initMap(option?: FengMapOpitons): Promise<any>;

  /**
   * 填充颜色
   * @param FidList
   */
  fillShopColor(FidList: BoothList[]): Promise<boolen>;

  /**
   * 填充文字
   * @param FidList
   */
  fillShopText(FidList: BoothList[]):  Promise<boolen>;

  /**
   * 将视图居中
   */
  setFitView(levle: number): void;

  /**
   * 设置是否位3D模型
   * @param is3D
   */
  set3DModel(is3D: boolean): void;

  /**
   * 获取楼层列表
   * @param option
   */
  getFloorList(option: GetLoadMapOptions): Promise<FloorList[]>;

  /**
   * 渲染展位
   */
  renderBooth(): Promise<void>;

  /**
   * 获取展位信息接口
   * @param option
   */
  getBoothInfoList(option: GetBoothInfoListParams): Promise<BoothList[]>;

  /**
   * 获取展位主题颜色
   */
  getBoothColor(): Promise<any>;

  /**
   * 切换楼层
   * @param floorCode
   */
  changeFloor(floorCode: string): Promise<LoadMapRes>;

  /**
   * 切换场馆
   * @param floorCode
   */
  changeBuliding(options: GetLoadMapOptions): Promise<LoadMapRes>;
}

```

### 4.方法说明

#### constructor(options: NewInvestMapOption)

构造方法

```
蜂鸟地图初始化参数
interface FengMapOpitons {
  container: HTMLElement; //地图容器
  appName: "蜂鸟研发SDK_2_0";
  key: "57c7f309aca507497d028a9c00207cf8";
  mapID: string;
  backgroundColor: string;
  viewMode: string;
  level: number;
  mapZoom: number; //缩放级别,默认值: 18.2
  uatEnvironment: boolean;
  themeID: string;
  themeURL: string;
  preLoad: boolean;
  highlightColor: string;
  backgroundAlpha: number; //地图背景透明度,默认使用主题配置背景色
  rotation: number; //旋转角度，默认值: 0
  tiltAngle: number; //旋转角度，默认值:  30
  center: {
    x: number;
    y: number;
  }; //视图中心的地图坐标
  highlightPicker:string,//高亮的事件，fengmap文档说支持click和hover，但是测试发现支持click
}
interface NewInvestMapOption extends FengMapOpitons {
  el: string | HTMLElement; //地图容器
  env: Env; //接口请求的环境
  boothColor: BoothColorConfig; //展位颜色配置
  is3D: boolean;
}

 interface BoothColorConfig {
  adbooth?: string; //广告位
  nstdbooth?: string; //非标准展位
  stdbooth?: string; //标准展位
  publicbooth?:string//公共区域
}
```

| 参数       | 是否必填 | 默认 | 说明                           |
| ---------- | -------- | ---- | ------------------------------ |
| el         | 是       |      |                                |
| env        | 是       |      | "dev" / "prod" / "uat" / "stg" |
| boothColor | 否       |      | 默认通过接口获取配置           |
| is3D       | 否       |      |                                |

#### on(event,callback)

监听方法,仅实现了“click”、“info”、“levelChanged”、“loaded”四个事件，fengmap 其他事件可以通过实例的 Fmap 对象的 on 方法监听

实例

```
  const map = new InvestMap({
        el: document.getElementById("map"),
        env: "uat1",
        is3D: false,
      });
      map.loadMap({ mallCode: "10378", buildingCode: "10378A" }).then((res) => {
        console.log(res);
        const FMap = res.FMap;
        Fmap.on("changeView",function(e){})
      });
```

- ##### 'click'事件

  回调函数的参数：

  ```
  {
  event:any//蜂鸟返回的参数
  isBooth,//是否为展位
  boothInfo,//展位信息
  }
  ```

- ##### 'info'事件

  回调函数的参数：event 蜂鸟返回的参数

- ##### 'levelChanged'事件

  回调函数的参数：event 蜂鸟返回的参数

- ##### 'loaded'事件

  回调函数的参数：event 蜂鸟返回的参数

- ##### 'error'事件
  回调函数的参数：
  ```
   {
  code: ErrorCode,//错误码
  message: string,
  data: any,
  }
  enum ErrorCode {
  HTTP_ERROR = 10001, //接口请求错误
  PARAMS_ERROR = 10002, //缺少必填参数
  FlOOR_NOTFOUND = 10003, //未找到楼层
  FlOOR_EMPTY = 10004, //本楼层未绑定地图
  BUILD_EMPTY = 10005, //场馆所有楼层均未绑定地图
  }
  ```

#### loadMap: (options: GetLoadMapOptions) => Promise<LoadMapRes>

加载地图的方法

```
interface GetLoadMapOptions {
  mallCode: string; //商场code
  buildingCode: string; //场馆code
  floorCode?: string; //楼层code
}

interface LoadMapRes {
  mallCode: string; //商场code
  buildingCode: string; //场馆code
  floorCode: string; //楼层code
  floorList: FloorList[]; //楼层列表
  FMap: any; //地图实例
  boothList: BoothList[]; //展位列表
}
```

| 参数         | 是否必填 | 默认 | 说明                                                                                                                                                                      |
| ------------ | -------- | ---- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| mallCode     | 是       |      |                                                                                                                                                                           |
| buildingCode | 是       |      |                                                                                                                                                                           |
| floorCode    | 否       |      | 如果填写,当此楼层未绑定地图时，会通过 on 方法监听 error 事件返回错误信息；如果不填写会依次查找有地图楼层显示，如果全部未绑定地图则报错，可通过 on 监听 error 获取错误信息 |

#### changeFloor(floorCode: string): Promise<LoadMapRes>;

切换楼层，如果未找到地图可通过 on 监听 error 事件
| 参数 | 是否必填 | 默认 | 说明 |
| ------- | -------- | ---- | ---- |
| floorCode | 是 | | 楼层 code |

#### changeBuliding(options: GetLoadMapOptions): Promise<LoadMapRes>;

切换场馆

#### fillShopColor(FidList: BoothList[]): void;

填充展位颜色

```
interface BoothList {
  FID: string;
  boothType: string; //adbooth广告位  nstdbooth非标 stdbooth标准  publicbooth公共区域
  boothtableType: number; //展位类型，1标准展位  0非标准展位
  code: string; //展位编号
  contractBrand: string; //品牌名称
  geoId: string;
  subType: string;
  type: number; //0:展位，1:广告位，2:公共区域
  text?: string;
  color?: string;
  opacity?: number;
}
```

| 参数    | 是否必填 | 默认 | 说明 |
| ------- | -------- | ---- | ---- |
| FID     | 是       |      |      |
| color   | 是       |      |      |
| opacity | 否       | 1    |      |

#### fillShopText(FidList: BoothList[]): void;

填充展位文字
| 参数 | 是否必填 | 默认 | 说明 |
| ---------- | -------- | ---- | ------------------------------ |
| FID | 是 | | |
| text | 是 | | |

#### setFitView(): void;

设置视图居中显示

#### set3DModel(is3D: boolean): void;

设置显示模式
| 参数 | 是否必填 | 默认 | 说明 |
| ---------- | -------- | ---- | ------------------------------ |
| is3D | 是 | | true":3D false:2D |