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');