我想在此处显示带有交通流量信息的地图。我有一个使用WebGL的Web浏览器解决方案（我可以只使用map.addLayer(defaultLayers.vector.normal.traffic);添加矢量层）。
对于没有WebGL的浏览器，我使用栅格图层。我无法添加流量层，我尝试使用在以下位置找到的以下代码：https://developer.here.com/documentation/maps/3.1.14.0/dev_guide/topics/migration.html
var trafficService = platform.getTrafficService();
var provider = new H.service.traffic.flow.Provider(trafficService);
map.addLayer(new H.map.layer.TileLayer(provider));
我该怎么做，为没有WebGL的浏览器添加流量信息？
这里是完整的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Here Map Traffic</title>
<meta name="description" content="" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service-legacy.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
</head>
<body>
<div id="container">
<div id="mapContainer"></div>
</div>
<script>
const KEY = "XXX";
var platform = new H.service.Platform({
apikey: KEY
});
var defaultLayers = platform.createDefaultLayers();
// Instantiate (and display) a RASTER map object:
var map = new H.Map(
document.getElementById('mapContainer'),
defaultLayers.raster.normal.map, {
zoom: 10,
center: {
lat: 50.00,
lng: 10.00
},
engineType: H.map.render.RenderEngine.EngineType.P2D,
pixelRatio: window.devicePixelRatio || 1 //Optional
}
);
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers);
//Add traffic layer
var trafficService = platform.getTrafficService();
var provider = new H.service.traffic.flow.Provider(trafficService);
map.addLayer(new H.map.layer.TileLayer(provider));
</script>
</body>
</html>
如H.service.traffic.flow.Provider的文档中所述，它只能与WEBGL引擎一起使用。对于旧版P2D渲染引擎，您应该创建自定义流量MapTileService，并使用它创建流量图块层：
var pixelRatio = window.devicePixelRatio || 1,
tileSize = 512,
ppi = (pixelRatio >= 2) ? 250 : 72,
trafficService = platform.getMapTileService({type: 'traffic'}),
trafficLayer;
// list of available schemes:
console.log(trafficService.getInfo().schemes);
// list of available tiletypes:
console.log(trafficService.getInfo().tiletypes);
trafficLayer = trafficService.createTileLayer(
'traffictile',
'normal.traffic.day', // 'hybrid.traffic.day' for satellite + traffic
tileSize, 'png',
{'ppi' : ppi}
);
map.setBaseLayer(trafficLayer);
这样，当图层设置为baseLayer时，可以避免加载很多地图图块请求。标签也正确显示在交通流线的顶部。
如果确实需要在自定义基础层的顶部添加流量层，则只需将tileType参数'traffictile'替换为'flowtile'。这将加载透明的交通流磁贴。
此外，您可能希望将此图层放入MapSettings UI中。为此，您可以使用this answer。