全部产品

智行通应用实现路况渲染

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

背景介绍

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

  • 实时路况展示

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

    历史路况回放

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

环境准备

  • 技术组件

    • 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

    请在交通云控平台-数据资产-资产目录中通过搜索表名,查询表的详细字段信息。

    步骤1:搜索表名步骤1:搜索表名步骤2:查看表详情步骤2

  • 服务

    • 基础地图

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

  • 渲染

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

实现过程

  1. 准备数据源。

    针对路段基本信息表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);

  2. 往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'
  3. 发布服务。

    1. 打开GeoServer 管理界面,新建数据源。

      新建数据源1新建数据源2新建数据源3

    2. 新建服务。以基础道路为例,设置名称为shanghai_ioi_base。

      新建服务1新建服务2新建服务3

    3. 验证服务。找到对应服务,选择openlayers。

      验证服务
  4. 前端调用。

    以基本路网为例:

    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状态的数据, 从而减少整个路况产出表的数据量,提升效率。