JavaScript API 的 HERE 地图：没有 WebGL 的流量答案

【问题标题】：HERE maps for JavaScript API: traffic flow without WebGLJavaScript API 的 HERE 地图：没有 WebGL 的流量
【发布时间】：2020-04-16 09:32:22
【问题描述】：

我想显示一个带有交通流信息的地图。我有一个使用 WebGL 的网络浏览器解决方案（我可以使用 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>

【问题讨论】：

标签： here-api traffic

【解决方案1】：

正如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。

【讨论】：