现在时间是:

基于html5技术绘制上海地铁图 – 双车道路况信息

时间:2020-06-18 来源:原创 作者:admin 点击:加载中..
  

  路况状态在GIS系统中广泛应用,谷歌地图,百度地图都有实时路况的功能,太复杂并非好事,就像地铁图,按真实经纬度呈现反而不够直观,交通图、路网也是如此,去掉无关信息,将有限的数据(路,收费站,路况)展现出来,成为一种解决方案

  百度地图中的路况信息

  百度地图-路况信息

  来看具体实现,原来的地铁图是一条线表示,改用双线绘制,可表现来往的方向,canvas并没有双线线形,需要自己实现

  三种连接点类型

  双线的算法类似2d中的stroke算法,stroke拐点有三种方式:尖的、圆角、斜面,考虑到路网拐角不会太尖,所以简单实现,采用miter方式,沿线各个拐点左右偏移

  拐点的三种样式

  绘制双车道,计算拐点的法线和夹角

  绘制连线

  双车道呈现效果

  双车道

  路况状态也是呈线条状,与路网绘制相同,只不过为单向,还是上面的绘制函数,参数lineDirection表示车道方向,左侧车道偏移50%,右侧则偏移-50%,这样可以实现两侧不同的状态

  路况模拟数据

  与原来的例子相同,路况信息也可以通过JSON数据加载,整个为一个array,集合中每个元素为一条路的路况片段信息,”line”属性表示所在路线的编号,”fragments”表示路况片段集合,每个片段包含三个属性,与路线的json表示相同,只不过增加了”direction”属性,表示片段的方向

  路况运行效果

  上面11号线上的模拟数据,得到下面的效果

(责任编辑:admin)

------分隔线----------------------------
最新评论 查看所有评论
加载中......
发表评论 查看所有评论