jquery.wayfinding.js-API

N_WANT

于 2019-07-16 13:19:24 发布

阅读量418

点赞数

分类专栏： js 文章标签： wayfinding jQuery.wayfinding jQuery.wayfinding.js

js 专栏收录该内容

0 篇文章

订阅专栏

Wayfinding.js是一款基于jQuery的插件，用于在SVG地图上实现路径规划功能。支持初始化地图、设置起点和终点、寻找最短路径等功能，并提供了多种配置选项，如无障碍路径选择、路径动画等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery.wayfinding.js

一个操作SVG的jquery插件
详见：ucdavis/wayfinding
本翻译的英文原文： wayfinding-API

initialize(初始化）

wayfinding初始化：

    $('#myMaps').wayfinding();

初始化需要至少包含'maps', 'defaultMap'和 'startpoint' 三个属性的对象，从技术角度讲，除非你的map的名字是floorplan.svg 并且defaultMap名字是map.1，那么你需要先设置startpoint以提供一些配置信息。

maps属性

maps是一个由path 和 id组成的对象数组，path是表示楼层或者区域的svg文件的路径（包含svg文件名），id用于切换楼层，作为入口的标识符的一部分，它可以标示出入口绑定的其他map。

    'maps': [
      {'path': 'demo_map_1.svg', 'id': 'floor1'},
      {'path': 'demo_map_2.svg', 'id': 'floor2'}
    ],

path属性

如果不主动提供path属性，wayfinding将会使用下面的默认值：

    'path': {
      color: 'red',
      radius: 10,
      speed: 8,
      width: 3
    },

color 可以是任何CSS中的有效颜色值，例如#FF00FF.
radius 平滑绘制解决方案路径时要使用的SVG整数单位的转弯半径。
speed 将解决方案路径动画显示到屏幕的速率。
width 以像素为单位控制解决方案路径的宽度，但有可能被缩放。

startpoint属性

返回从其开始路由的起点的标识符的字符串或函数。
字符串：

'startpoint': 'lcd.1',

函数：

'startpoint': function () {
	return 'lcd.1';
},

endpoint属性

返回终点标识符的字符串或函数。格式类似于startpoint。

accessibleRoute属性

Boolean类型，是否允许返回的路线走楼梯，默认为false。

defaultMap属性

返回默认显示的map id的字符串或函数。

loadMessage属性

在等待maps加载时显示的字符串。

dataStoreCache属性

设置使用数据存储（dataStore）的行为。

默认是null，即不使用数据存储。
如果正在传入数据存储，则为对象。
表示将从中加载数据存储的基本路径的字符串。

showLocation属性

Boolean类型，是否显示起点和终点的地图标记（pins）。

locationIndicator属性

地图标记的样式（pins）。
例如：

{
	fill: 'red',
	height: 40
}

zoomToRoute属性

Boolean类型，是否将地图放大，只显示行进区域。

zoomPadding属性

整型，缩放填充。

routeTo

该函数将会找到最短路径并展示该路径。
用法：

    $('#myMaps').wayfinding('routeTo', 'destinationId');

animatePath

如果存在现有的解决方案，它将重新绘制该解决方案。

startpoint

    $('#myMaps').wayfinding('startpoint', 'startingId');

currentMap

    $('#myMaps').wayfinding('currentMap', 'targetMapId');

accessibleRoute

改为使用无障碍路线并且避免楼梯

    $('#myMaps').wayfinding('accessibleRoute', true);

path

getDataStore

将会返回一个所有已加载的maps集合的解析后的展示形式
will return a representation of the parsed collection of all loaded maps

    $('#myMaps').wayfinding('getDataStore');