以交通行业应用(智行通·交管)为例,为您说明如何基于交通云控平台提供的数据实现路况渲染。
背景介绍
智行通·交管是阿里云基于交通云控平台能力研发的一款交通应用,旨在快速发现解决城市交通问题。智行通应用可提供城市拥堵规律分析、实时/常发拥堵路口/路段分析、绿波带挖掘、车辆轨迹分析等功能。
如下图所示,应用中包括实时路况展示、历史(如近一月、一周)路况回放等功能。
实时路况展示
历史路况回放
下文以“实时拥堵路况”为例,介绍智行通如何实现全市各等级道路实时路况展示,如何实现路况的播放、暂停、停止,以及通过拖拽来控制路况播放时刻。
环境准备
技术组件
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”表为例,为您介绍表数据的获取操作:
在 数据服务 >数据表 中搜索表名。
点击表名即可跳转至该表的明细界面,查看该表的字段、血缘、规则等详细信息。
服务
基础地图
项目中一般会购买图盟、千寻等厂商的基础地图引擎产品,您可联系项目经理获取服务。此处以开源地图引擎为例子,阐述如何使用地图引擎进行路况渲染。
服务格式: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
。代码如下:
添加新字段:
ALTER TABLE `dwd_310000`.`dwd_tfc_bas_rdnet_ioiseg_info` ADD COLUMN `geometry` LINESTRING NULL COMMENT '经纬度串geometry格式'
转换并插入空间字段:
UPDATE `dwd_310000`.`dwd_tfc_bas_rdnet_ioiseg_info` SET `geometry` = GeomFromText(CONCAT('LINESTRING(', REPLACE(REPLACE(lnglat_seq, ',', ' '), ';', ','), ')'), 4326)
字段设为非空:
ALTER TABLE `dwd_310000`.`dwd_tfc_bas_rdnet_ioiseg_info` modify COLUMN `geometry` LINESTRING NOT NULL
创建索引:
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'
发布服务
新建数据源
打开 GeoServer 管理界面,根据界面提示,选择您要配置的数据源类型,并为其配置数据源名称和工作区等信息。
新建服务
以基础道路为例,设置名称为“shanghai_ioi_base”。
验证服务
找到对应服务,选择 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 //线宽
}
});
});
拥堵状态定义为四类:1(畅通),2(缓行),3(拥挤),4(严重拥堵)。
您可以设定基础路网默认全部是绿色,即对应上述1(畅通)状态。在拥堵数据里只查询2、3、4状态的数据,从而减少整个路况产出表的数据量,提升效率。