路口渠化图Canvas绘制、配置与调用

城市交通管理系统中，路口的信控、摄像头、雷达等监测设备设施极多，项目中接入了大量监测数据，在系统中需要对路口以及路口监测设备进行管理，可视化配置非常重要。

一、渠化图绘制引擎简介

娲哥通过多个项目积累，开发了一套简易的路口渠化图Canvas绘制引擎，使用Javascript技术，在网页端实现了路口渠化图的绘制渲染与调用，最多支持4个路口的设置，基本能满足大部分路口的可视化配置管理，可集成到路口管理模块、路口可视化模块以及关联设备模块，通过SDK实现渠化图的基本绘制，包括渠化图路口数量、入口数量、出口数、分隔方式、分隔带宽、路口角度、路口方向、设备点位绑定等功能。

以下以某交通管理平台项目集成说明：

二、配置

在后台【可视化管理】【路口管理】页面进行渠化配置，路口配置将保存在map字段中，后续直接调用此配置初始化渠道图即可。

2.1 设置车道方向箭头

点击车道箭头打开箭头选择，点击箭头更换：

2.2 设置车道属性

点击车道对应的圆点，打开属性设置窗口

属性列表可在后台字典中对"road_property"进行管理

三、调用开发

3.1.SDK与依赖文件

将 vri.zip 解压到项目 public/vri 目录下，包括 依赖库文件，在index.html 中引入依赖文件

注意前后顺序，不可更改。

3.2 初始化

渠化图配置保存在路口 map 字段（LongText）中
获取路口详情接口为 /api/jcksb/equipment/queryById?id=
获取data.map 字段后，可直接按以下方式初始化

配置项如下：

3.3 修改方向箭头的颜色

每个箭头都有唯一Key值 ，由 ar-路口-车道顺序 组成
车道顺序从路边向道路中间由0 开始递增，如：
方向1的第1个车道表示为：ar-0-1
方向2的第3个车道表示为：ar-1-2
将方向2的第3个车道置为绿灯， 可以调用：
vri.setArrowsStatus({‘ar-1-2’: 3});

3.4 获取车道属性

vri.getSign(“sp-in-1-1”)

车道属性存放在配置中的meta字段的points对象中，是一个Map列表，此对象可获取所有已经设置了车道属性的对象。

3.5 设置车道属性