智行通应用实现路况渲染

本文为您介绍智行通应用如何使用交通云控平台提供的数据实现路况渲染。

背景介绍

智行通作为一款交通行业应用,实现了实时路况展示、历史(如近一月、一周)路况回放的功能,如下图所示:

  • 实时路况展示

    实时路况展示
  • 历史路况回放

    历史路况回放

本文以实时拥堵路况为例,介绍智行通如何实现全市级别各等级道路实时路况展示,并能在播放条上实现暂停、停止、以及拖拽来控制路况播放时刻。

环境准备

技术组件

  • DB:本文以RDS(MySQL)为示例,具体DB以下文中的数据表在您项目中的落地数据库为准。

    您可以在交通云控平台 > 数据 > 数据服务 > 行业模型中通过搜索表名,确认该表的存储数据库。

  • GIS Server:TMS,WFS

  • Map:GAS(Mapbox 1.x)

数据

实时路况渲染涉及到的表如下:

  • 路段基本信息表:dwd_tfc_bas_rdnet_ioiseg_info

  • 实时路况表:dws_tfc_state_ioi_nd_lastmultispeed_rt

如需做历史回放,还需要以下表:

  • 7、30天历史回放:adm_tfc_state_ioi_tpdoe_speedindex_d

  • 月历史回放:adm_tfc_state_ioi_tpdoe_speedindex_m

  • 当天历史回放:adm_tfc_state_ioi_tp_multispeed_rt

下文以“dwd_tfc_bas_rdnet_ioiseg_info”表为例,为您介绍表数据的获取操作:

  1. 交通云控平台 > 数据 > 数据服务 > 行业模型中搜索表名。

  2. 点击表详情即可查看表的详细字段信息。

服务

  • 基础地图

    基础地图引擎,在项目中一般会购买图盟、千寻等厂商的产品,您可联系项目经理获取服务。此处以开源地图引擎为例子,阐述如何使用地图引擎进行路况渲染。

    • 服务格式:WMTS

    • 服务来源:https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x} (请将“{z} {y} {x}”替换为您的实际参数,z表示层级,x、y 表示行列)

  • 路段基本信息表

    • 服务格式:TMS(矢量瓦片)

    • 服务来源:dwd_tfc_bas_rdnet_ioiseg_info

  • 实时路况

    • 服务格式:TMS(矢量瓦片)

    • 服务来源:dws_tfc_state_ioi_nd_lastmultispeed_rt JOIN dwd_tfc_bas_rdnet_ioiseg_info

渲染

前端渲染引擎使用的是GAS,底层基于Mapbox 1.x 开发。在路况场景下,可以直接理解为Mapbox。主要借助于Mapbox对图层的能力来实现,详情可参见Mapbox官方文档

实现过程

步骤一:准备数据源

针对路段基本信息表dwd_tfc_bas_rdnet_ioiseg_info,添加空间字段geometry。代码如下:

  1. 添加新字段:ALTER TABLE `dwd_310000`.`dwd_tfc_bas_rdnet_ioiseg_info` ADD COLUMN `geometry` LINESTRING NULL COMMENT '经纬度串geometry格式'

  2. 转换并插入空间字段:UPDATE `dwd_310000`.`dwd_tfc_bas_rdnet_ioiseg_info` SET `geometry` = GeomFromText(CONCAT('LINESTRING(', REPLACE(REPLACE(lnglat_seq, ',', ' '), ';', ','), ')'), 4326)

  3. 字段设为非空:ALTER TABLE `dwd_310000`.`dwd_tfc_bas_rdnet_ioiseg_info` modify COLUMN `geometry` LINESTRING NOT NULL

  4. 创建索引:CREATE SPATIAL INDEX i_geometry ON `dwd_310000`.`dwd_tfc_bas_rdnet_ioiseg_info`(geometry);

步骤二:在GeoServer中插入相关数据源

  • 查询底层路网结构

    SELECT t.road_level,t.geometry AS the_geom
    FROM  dwd_310000.dwd_tfc_bas_rdnet_ioiseg_info  t
  • 查询实时路况

    SELECT
        t.road_level,
        p.jam_state_drawing,
        t.geometry AS the_geom 
    FROM
        dws_310000.dws_tfc_state_ioi_nd_lastmultispeed_rt p
    RIGHT JOIN dwd_310000.dwd_tfc_bas_rdnet_ioiseg_info t 
    ON p.ioi_id = t.start_ioi_id 
    WHERE
        p.dt = curdate() 
    AND p.jam_state_drawing IN ( 2, 3, 4 ) 
    AND p.tp = '1mi'

发布服务

  1. 新建数据源

    打开 GeoServer 管理界面,根据界面提示,选择您要配置的数据源类型,并为其配置数据源名称和工作区等信息。

    新建数据源
  2. 新建服务

    以基础道路为例,设置名称为“shanghai_ioi_base”。
    新建服务
  3. 验证服务

    找到对应服务,选择 openlayers。

前端调用

以下为调用基础路网的示例代码。

mapboxgl.accessToken = '你的token';
var map = new mapboxgl.Map({
    container: 'map',
    center: [120.373917, 36.065276],
    zoom: 13
});
map.on('load', function() {
    map.addSource('my_source', { // source ID
        'type': 'vector',
        'scheme': 'tms',
        'tiles': ['https://[ 
YOUR_GIS_SERVER 
]/geoserver/gwc/service/tms/1.0.0/[ 
YOUR_SERVICE_NAME 
]@EPSG:3857@pbf/{z}/{x}/{y}.pbf']
    });
    map.addLayer({
        'id': ' 
traffic_condition 
', // layer id
        'source': 'my_source', //与上面那个source保持一致
        'source-layer': ' 
YOUR_LAYER_NAME 
', 
        type: 'line',
        layout: {
          'line-join': 'round',
          'line-cap': 'round'
         },
        'paint': {
          'line-color': {
            type: 'categorical', // 按照分类方式渲染
            property: ' 
YOUR_PROPERTY_NAME 
', // 渲染属性
            stops: [// 分等级渲染路况
              [1, '#11d127'],
              [2, '#fecb00'],
              [3, '#E02001'],
              [4, '#8D100A']
            ],
            default: '#11d127' // 默认道路颜色
          },
          'line-width': 3 //线宽
        }
    });
});

// 下面是 WFS layer style
{
      id: ' 
YOUR_LAYER_ID 
',
      type: 'line',
      source: ' 
YOUR_SOURCE_ID 
',
      paint: {
        'line-opacity': 1,
        'line-color': {
          type: 'categorical',
          property: ' 
YOUR_PROPERTY_NAME 
',
          stops: [
            [1, '#11d127'], // green
            [2, '#fecb00'], // yellow
            [3, '#E02001'], // deep-yellow
            [4, '#8D100A'] // red
          ],
          default: '#11d127' // green
        },
        'line-width': 3
      }
    }

说明

拥堵状态定义为四类:1(畅通),2(缓行),3(拥挤),4(严重拥堵)。

您可以设定基础路网默认全部是绿色,即对应上述1(畅通)状态。在拥堵数据里只查询2、3、4状态的数据,从而减少整个路况产出表的数据量,提升效率。