Here Maps 带高度的多段线

Question

我需要显示从 A 到 B 的不同多段线。因此，这些线应该相互区分。我曾尝试使用带有高度参数的推点函数来设置多段线。然而，它仍然在地面上。我插入的最后一条多段线覆盖了前一条。高度值适用于标记，但我想将其应用于多段线。我在此处 markers with altitude 更改了示例代码，如下所示。当您使用下面的代码更改代码时，您可以看到橙色线就在灰色线的顶部。我希望这两行都像您在它们上方看到的标记一样显示。

/**
 * Calculate the bicycle route.
 * @param   {H.service.Platform} platform    A stub class to access HERE services
 */

function calculateRouteFromAtoB (platform) {
  var router = platform.getRoutingService(),
      routeRequestParams = {
        mode: 'fastest;bicycle',
        representation: 'display',
        routeattributes : 'shape',
        waypoint0: '-16.1647142,-67.7229166',
        waypoint1: '-16.3705847,-68.0452683',
        // explicitly request altitude values
        returnElevation: true
      };

  router.calculateRoute(
    routeRequestParams,
    onSuccess,
    onError
  );
}

/**
 * Process the routing response and visualise the descent with the help of the
 * H.map.Marker
 */
function onSuccess(result) {
  var lineString = new H.geo.LineString(),
  lineString2 = new H.geo.LineString(),
    routeShape =  result.response.route[0].shape,
    group = new H.map.Group(),
    dict = {},
    polyline,
    polyline2;


  routeShape.forEach(function(point) {
    var parts = point.split(',');
    var pp= new H.geo.Point(parts[0],parts[1],4000,"SL");
    console.log(parts[2]);
    lineString.pushLatLngAlt(parts[0], parts[1]);
lineString2.pushPoint(pp);
    // normalize the altitude values for the color range
    var p = (parts[2] - 1000) / (4700 - 1000);
    var r = Math.round(255 * p);
    var b = Math.round(255 - 255 * p);

    // create or re-use icon
    var icon;
    if (dict[r + '_' + b]) {
      icon = dict[r + '_' + b];
    } else {
      var canvas = document.createElement('canvas');
      canvas.width = 4;
      canvas.height = 4;

      var ctx = canvas.getContext('2d'); 
      ctx.fillStyle = 'rgb(' + r + ', 0, ' + b + ')';
      ctx.fillRect(0, 0, 4, 4);
      icon = new H.map.Icon(canvas);
      // cache the icon for the future reuse
      dict[r + '_' + b] = icon;
    }

    // the marker is placed at the provided altitude
    var marker = new H.map.Marker({
      lat: parts[0], lng: parts[1], alt: parts[2]
    }, {icon: icon});

    var marker2 = new H.map.Marker({
      lat: parts[0], lng: parts[1], alt: parts[2]-800
    }, {icon: icon});
    group.addObject(marker);
    group.addObject(marker2);
  });

  polyline = new H.map.Polyline(lineString, {
    style: {
      lineWidth: 6,
      strokeColor: '#555555'
    }
  });

  polyline2 = new H.map.Polyline(lineString2, {
    style: {
      lineWidth: 3,
      strokeColor: '#FF5733'
    }
  });

  // Add the polyline to the map
  map.addObject(polyline);
  map.addObject(polyline2);
  // Add markers to the map
  map.addObject(group);
  // Zoom to its bounding rectangle
  map.getViewModel().setLookAtData({
    bounds: polyline.getBoundingBox(),
    tilt: 60
  });
}

/**
 * This function will be called if a communication error occurs during the JSON-P request
 * @param  {Object} error  The error message received.
 */
function onError(error) {
  alert('Can\'t reach the remote server');
}

/**
 * Boilerplate map initialization code starts below:
 */

// set up containers for the map  + panel
var mapContainer = document.getElementById('map'),
  routeInstructionsContainer = document.getElementById('panel');

//Step 1: initialize communication with the platform
// In your own code, replace variable window.apikey with your own apikey
var platform = new H.service.Platform({
  apikey: window.apikey
});

var defaultLayers = platform.createDefaultLayers();

//Step 2: initialize a map - this map is centered over Berlin
var map = new H.Map(mapContainer,
  defaultLayers.vector.normal.map,{
  center: {lat:52.5160, lng:13.3779},
  zoom: 13,
  pixelRatio: window.devicePixelRatio || 1
});
// add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize());

//Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);




// Now use the map as required...
calculateRouteFromAtoB (platform);

Answer 1

遗憾的是，目前只有标记支持高度。

多段线应该会在不久的将来出现。

Here Maps 带高度的多段线

Here Maps polyline with altitude

javascript

maps

polyline

here-api

altitude