时间戳

首页 > 解决方案 > 如何在 UI Controls HERE Maps v3.1 中获取地形图

javascript - 如何在 UI Controls HERE Maps v3.1 中获取地形图

问题描述

升级到带有矢量/WebGL 渲染的 v3.1 Javascript SDK 后，默认 UI 控件中现在没有地形图层。

我查看了 API 文档，但没有找到明确的示例来说明如何指定 UI 控件中显示的内容。

    var platform = new H.service.Platform({
            apikey: 'key'
    });

    var layers = platform.createDefaultLayers();

    var hereMap = new H.Map(
        document.getElementById(mapCanvasDiv),
        defaultLayers.vector.normal.map,
        {
            zoom: mapOptions.zoom,
            center: mapOptions.center
    });

    var ui = H.ui.UI.createDefault(hereMap, defaultLayers);

    // Guessing I can change "ui" in some way to include the terrain layer which is a raster layer.

    hereMap.UIControls = ui;

我想在 UI 控件中有 Normal、Terrain 和 Satellite 层，就像我们在 v3.0 上时一样，因为我们的一些客户使用这个层。

标签： javascripthere-api

解决方案

请看以下两个链接

“设置基本地图类型”。 https://developer.here.com/documentation/maps/topics/map-types.html

“光栅” https://developer.here.com/documentation/maps/topics/raster.html

“ H.ui.MapSettingsControl.Options ” https://developer.here.com/documentation/maps/topics_api/h-ui-mapsettingscontrol-options.html#h-ui-mapsettingscontrol-options

为了使用卫星和地形，请使用栅格地图类型。

defaultLayers.raster.terrain.map
defaultLayers.raster.satellite.map

例如自定义地图设置控件

var defaultLayers = platform.createDefaultLayers();
var map = new H.Map(document.getElementById('map'),
    defaultLayers.raster.terrain.map, {
    center: {lat: 52.51477270923461, lng: 13.39846691425174},
    zoom: 13,
    pixelRatio: window.devicePixelRatio || 1
});
var ui = H.ui.UI.createDefault(map, defaultLayers);
//remove default mapsettings control
ui.removeControl("mapsettings");
// create custom one
var ms = new H.ui.MapSettingsControl( {
    baseLayers : [ { 
      label:"normal",layer:defaultLayers.raster.normal.map
    },{
      label:"satellite",layer:defaultLayers.raster.satellite.map
    }, {
      label:"terrain",layer:defaultLayers.raster.terrain.map
    }
    ],
  layers : [{
        label: "layer.traffic", layer: defaultLayers.vector.normal.traffic
    },
    {
        label: "layer.incidents", layer: defaultLayers.vector.normal.trafficincidents
    }
]
  });
ui.addControl("customized",ms);

快乐编码！

推荐阅读