如何创建只有法线地图和卫星视图，没有附加图层的 HERE 地图？

Question

我们在重构代码时遇到问题，不再使用 Platform 中的 "createDefaultLayers()"，而是剥离我们的地图，仅使用基本的 "normal" 地图和 "satellite" 地图。

我们目前有：

        var maptypes = platform.createDefaultLayers();
        hereMap = new H.Map(
            document.getElementById('map-container'),
            maptypes.normal.map,
            {
                zoom: ...,
                center: ...,
                pixelRatio: Math.min(devicePixelRatio, 2)
            }
        );
        var ui = H.ui.UI.createDefault(hereMap, maptypes);

这样做，我们最终得到了一个额外的地图类型，以及我们根本不想加载的 3 个不同的地图选项（交通、事故、public 交通）。

我无法找到创建我们自己的基本地图和卫星层并将其插入 ui 和地图的准系统示例。特别是因为 createDefaultLayers() returns 是一个完全独立的类型，DefaultLayers 而不是层的集合。

如有任何帮助，我们将不胜感激！

Answer 1

此示例创建自定义法线和卫星 H.map.layer.TileLayers，将它们添加到 H.Map，然后连接 H.ui.UI:

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, 
      width=device-width" />
    <script src="https://js.api.here.com/v3/3.0/mapsjs-core.js" 
      type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.0/mapsjs-service.js" 
      type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.0/mapsjs-ui.js" 
      type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" 
      href="https://js.api.here.com/v3/3.0/mapsjs-ui.css" />
  </head>
  <body>
  <div style="width: 640px; height: 480px" id="mapContainer"></div>
  <script>

    // Initialize the platform object:
    var platform = new H.service.Platform({
    'app_id': 'app_id',
    'app_code': 'app_code'
    });

    // Via:
    // https://developer.here.com/documentation/geovisualization/topics/js-initialize-map.html
    //
    // createTileLayer (tileType, scheme, tileSize, format, opt_additionalParameters, opt_opacity, opt_dark, opt_options) : {H.map.layer.TileLayer}
    var normalLayer = platform.getMapTileService({type: 'base'}).createTileLayer(
      'maptile',
      'reduced.night',
      256,
      'png'
    );    

    var satelliteLayer = platform.getMapTileService({type: 'aerial'}).createTileLayer(
      'maptile',
      'satellite.day',
      256,
      'png8'
    );    

    // Instantiate (and display) a map object:
    // H.Map(element := {Element}, baseLayer := {H.map.layer.Layer}, opt_options := {H.Map.Options=} [optional])
    // Via:
    // https://developer.here.com/documentation/maps/topics_api/h-map.html
    var map = new H.Map(
      document.getElementById('mapContainer'),
      normalLayer,
      {
        pixelRatio: 1,
        center:  new H.geo.Point(40.769832, -73.974726),
        zoom: 14
      }
    );

    // Create a barebones H.service.DefaultLayers object
    // Note: the UI map settings incorrectly initially enables traffic and 
    // public transport selections
    var maptypes = new Object();
    maptypes.normal = new Object();
    maptypes.normal.map = normalLayer;
    maptypes.satellite = new Object();
    maptypes.satellite.map = satelliteLayer;
    var ui = H.ui.UI.createDefault(map, maptypes);
    var menuEntries = ui.getControl('mapsettings').getChildren()[1].getChildren();
    menuEntries[0].getElement().style.borderBottom = 'none';
    for (let i=1; i<menuEntries.length; i++)
        menuEntries[i].setVisibility(false);
  </script>
  </body>
</html>

JSFiddle： https://jsfiddle.net/iokevins/7m5dcjgs/

如您所述，createDefaultLayers() returns 一个具有五个 pre-configured 结果的对象：

正常：{H.service.MapType}
卫星：{H.service.MapType}
地形：{H.service.MapType}
事件：{H.map.layer.MarkerTileLayer}
地点：{H.map.layer.TileLayer}

似乎仅 createDefaultLayers() 生成这些命名的 MapType 对象。也就是说，似乎没有其他 API 支持创建等效的 "normal" 或 "satellite" MapType 对象。如果您选择手动创建它们，您还必须在每个中创建 sub-objects（例如，normal.traffic）。因此，根据您的用例，您可能希望考虑将问题作为删除不需要的值的任务来解决，而不是从头开始构建：

var maptypes = platform.createDefaultLayers();
delete maptypes.terrain;
delete maptypes.normal.traffic;
...

我找到 Map Tile API Examples helpful. E.g., select Satellite Map > 查看代码 > 地图 API for JavaScript，它显示了示例代码。

JavaScript 的地图 API 具有相似的 Examples。

最后，为了清理 H.ui.UI 地图设置选项交通状况和 Public 交通的不需要的显示，我通过这个答案使用了一个解决方法： (it looks like you also got a 来自 HERE 支持）

如何创建只有法线地图和卫星视图，没有附加图层的 HERE 地图？

How to create HERE Map with only normal map and satellite view, no additional layers?

here-api