HERE maps for JavaScript API: traffic flow without WebGL

岁酱吖の 提交于 2021-01-28 09:16:47

问题


I want to show a here map with traffic flow information. I have a solution for web browser with WebGL (there I can just add the vector layer using map.addLayer(defaultLayers.vector.normal.traffic);).

For a browser without WebGL I use raster layers. I'm not able to add a traffic layer, I tried using the following code which I found at: 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));

What do I need to do, to add traffic flow information for browsers without WebGL?

Here is the complete code:

<!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>

回答1:


As noted in the documentation for H.service.traffic.flow.Provider, it can be used only with WEBGL engine. For legacy P2D rendering engine you should create your custom traffic MapTileService and use it to create traffic tile layer:

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);

This way you prevent loading a lot of map tile requests as the layer is set as baseLayer. Also labels are shown correctly on top of traffic flow lines.

If you really need to add the traffic layer on top of your customised base layer, then just replace tileType parameter 'traffictile' with 'flowtile'. This will load transparent traffic flow tiles.

Additionally you might want to put this layer into the MapSettings UI. For that you could use this answer.



来源:https://stackoverflow.com/questions/61247014/here-maps-for-javascript-api-traffic-flow-without-webgl

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!