Here api 如何在这里创建只有普通地图和卫星视图,没有额外图层的地图?

Here api 如何在这里创建只有普通地图和卫星视图,没有额外图层的地图?,here-api,Here Api,我们很难重构代码,不再使用平台中的“createDefaultLayers()”,而是将地图拆分为只使用基本的“普通”地图和“卫星”地图 我们目前有: var maptypes = platform.createDefaultLayers(); hereMap = new H.Map( document.getElementById('map-container'), maptypes.normal.map,

我们很难重构代码,不再使用平台中的“createDefaultLayers()”,而是将地图拆分为只使用基本的“普通”地图和“卫星”地图

我们目前有:

        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个不同的地图选项(交通、事故、公共交通),我们根本不想加载它们

我很难找到一个创建我们自己的基本地图和卫星图层并将其插入ui和地图的简单示例。特别是因为createDefaultLayers()返回一个完全独立的类型,而不是一组层


任何帮助都将不胜感激

此示例创建自定义法线和卫星H.map.layer.TileLayer,将其添加到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>
我觉得这很有帮助。例如,选择>查看代码>JavaScript映射API,其中显示示例代码

JavaScript的mapsapi具有类似的特性

最后,为了清理H.ui.ui地图设置选项交通条件和公共交通的不必要显示,我通过以下回答使用了一种解决方法: (看起来你也得到了来自这里的支持)

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