前端调用以下为调用基础路网的示例代码。
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状态的数据，从而减少整个路况产出表的数据量，提升效率。