Question

我们在重构代码时遇到了麻烦，不再使用Platform中的“ createDefaultLayers（）”，而是剥离地图以仅使用基本的“普通”地图和“卫星”地图。

我们目前有：

=countlinks("A3:AN3")

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

我很难找到创建我们自己的基本地图和卫星图层并将其插入ui和地图的准系统示例。特别是因为createDefaultLayers（）返回完全独立的类型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（）返回具有五个预配置结果的对象：

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

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

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

我发现Map Tile API Examples有帮助。例如，选择Satellite Map>查看代码> Maps API for JavaScript，其中显示了示例代码。

用于JavaScript的Maps API具有类似的Examples。

最后，为了清理H.ui.UI映射设置选项“交通状况”和“公共交通”的多余显示，我通过以下答案使用了一种解决方法： https://stackoverflow.com/a/51729080/182742（您似乎也从这里获得了separate answer的支持）

如何仅使用法线地图和卫星视图创建HERE Map，而没有其他图层？

1 个答案: