这里是针对JavaScript API的地图：没有WebGL的交通流 [英] HERE maps for JavaScript API: traffic flow without WebGL
本文介绍了这里是针对JavaScript API的地图：没有WebGL的交通流的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我要在此处显示包含交通流量信息的地图。
我有一个使用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);
如果您确实需要将流量层添加到您的自定义基本层之上，则只需将tileType参数"流量"替换为"流量"。这将加载透明的通信流磁贴。
此外，您可能希望将该层放入地图设置用户界面中。为此，您可以使用this answer。这篇关于这里是针对JavaScript API的地图：没有WebGL的交通流的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
