更新记录
1.0.6(2025-01-16)
下载此版本
优化寻路算法
1.0.5(2025-01-10)
下载此版本
修复坐标为小数的情况
1.0.4(2025-01-10)
下载此版本
底图增加跨域标志crossOrigin
查看更多
平台兼容性
uni-app
| Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
| × |
√ |
√ |
√ |
- |
- |
- |
- |
- |
| 微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
快应用-华为 |
快应用-联盟 |
| - |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
其他
le-find-path
安装依赖
第一种方式:直接在整个项目安装fabric
npm install fabric@4.6.0
第二种方式:在uni_modules找到le-find-path在这个目录终端安装
npm install
使用方式
<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 |
{} |
是 |
起点的坐标信息 |
| endPoi |
Object |
{} |
是 |
终点的坐标信息 |
| 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:
body {
overscroll-behavior-y: contain;
}