ЗДЕСЬ карты для JavaScript API: трафик c поток без WebGL - PullRequest
Новая
       34

ЗДЕСЬ карты для JavaScript API: трафик c поток без WebGL

1 голос
/ 16 апреля 2020

Я хочу показать здесь карту с traffi c flow информацией. У меня есть решение для веб-браузера с WebGL (там я могу просто добавить векторный слой, используя map.addLayer(defaultLayers.vector.normal.traffic);).

Для браузера без WebGL я использую растровые слои. Я не могу добавить слой traffi c, я попытался использовать следующий код, который нашел по адресу: 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));

Что мне нужно сделать, добавить traffi c информацию о потоке для браузеров без 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>

1 Ответ

0 голосов
/ 20 апреля 2020

Как отмечено в документации для H.service.traffi c .flow.Provider , его можно использовать только с движком WEBGL. Для устаревшего механизма рендеринга P2D вы должны создать свой пользовательский трафик c MapTileService и использовать его для создания слоя плитки traffi c: 

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. Кроме того, надписи отображаются правильно поверх потоковых линий traffi c.

Если вам действительно необходимо добавить слой traffi c поверх настроенного базового слоя, просто замените параметр tileType ' подвижный 'с' текучим '. Это загрузит прозрачные потоки трафика c.

Кроме того, вы можете добавить этот слой в пользовательский интерфейс MapSettings. Для этого вы можете использовать этот ответ .

...