# le-find-path

**Repository Path**: le-ui/le-find-path

## Basic Information

- **Project Name**: le-find-path
- **Description**: uniapp插件： 地图图片寻路
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-11-19
- **Last Updated**: 2025-01-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: uni-app

## README

# le-find-path

### 安装依赖

**第一种方式**：直接在整个项目安装fabric

```sh
npm install fabric@4.6.0
```

**第二种方式**：在uni_modules找到le-find-path在这个目录终端安装

```sh
npm install
```

### 使用方式

```javascript
<le-find-path 
    ref="leFindPathRef" 
    :mapData="mapData" 
    :startPoi="startPoi" 
    :endPoi="endPoi"
	:threshold="2"
	@on-success="onSuccess"
	@on-error="onError"
></le-find-path>
```

### 组件的属性说明如下：

| 属性       | 类型              | 默认值 | 必填 | 说明                         |
| ---------- | ----------------- | ------ | ---- | ---------------------------- |
| mapData    | Array             | []     | 是   | 楼层地图配置信息（可跨楼层） |
| color      | String            | ''     | 否   | 16进制可通行道路的颜色       |
| startPoi   | Object<poiOption> | {}     | 是   | 起点的坐标信息               |
| endPoi     | Object<poiOption> | {}     | 是   | 终点的坐标信息               |
| threshold  | Number            | 2      | 否   | 路径阈值                     |
| pathOption | Object            | {}     | 否   | 道路的配置信息               |

#### mapData参数说明：

| 属性      | 类型           | 必填 | 说明                                   |
| --------- | -------------- | ---- | -------------------------------------- |
| url       | String         | 是   | 地图图片地址                           |
| pois      | Array          | 否   | 连接点信息                             |
| pois.id   | Number\|String | 是   | 连接点唯一标识                         |
| pois.x    | Number         | 是   | x坐标                                  |
| pois.y    | Number         | 是   | y坐标                                  |
| pois.exit | String         | 否   | 点出口方向（top\|right\|bottom\|left） |
| pois.icon | String         | 是   | 图标路径                               |

注：跨楼层的时候只允许mapData的数组长度为2，起点在索引0的地图上，终点在索引1的地图上，且连接点信息的id值与其他楼层的连接点要对应，否则会出现跨楼层寻路失败。

##### poiOption参数说明：

| 属性 | 类型   | 必填 | 说明                                   |
| ---- | ------ | ---- | -------------------------------------- |
| x    | Number | 是   | x坐标                                  |
| y    | Number | 是   | y坐标                                  |
| exit | String | 否   | 点出口方向（top\|right\|bottom\|left） |
| icon | String | 是   | 图标路径                               |

##### **pathOption参数说明：**

| 属性        | 类型   | 默认值  | 必填 | 说明                              |
| ----------- | ------ | ------- | ---- | --------------------------------- |
| stroke      | String | #0066ff | 否   | 道路的颜色                        |
| strokeWidth | Number | 8       | 否   | 道路的宽度                        |
| ......      | Object |         | 否   | 其余参数请参考fabric.js的Path属性 |

### 事件

| 事件名称  | 回调参数                    | 说明                                                     |
| --------- | --------------------------- | -------------------------------------------------------- |
| onSuccess | (poiList1,poiList2) => void | poiList1楼层0的路径坐标数组，poiList2楼层1的路径坐标数组 |
| onError   | (code) => void              | 异常事件                                                 |

**code码说明：**

| code | 说明                   |
| ---- | ---------------------- |
| 4000 | 寻路失败               |
| 4001 | 起点位置无道路可走     |
| 4002 | 终点位置无道路可走     |
| 4003 | 跨层位置无连接点可通行 |
| 5000 | 寻路异常               |

### 方法

| 方法名称  | 参数类型 | 说明                               |
| --------- | -------- | ---------------------------------- |
| onSetShow | Number   | 根据楼层的索引值显示指定的楼层信息 |

### 注意

在缩放或拖拽地图的时候可能会出现整个网页下移所造成的卡断，请在页面或index.html设置如下css：

```css
body {
    overscroll-behavior-y: contain;
}
```