这里用高度映射折线

Question

I need to display different polylines from A to B. So, these lines should be distinguishable from each other. I haved tried to set polylines using pushpoint function with altitude parameter. However it is still on the ground level. And the last polyline I inserted overwrites the previous one. Altitude value works on markers but I want to apply it on polyline. I changed the sample code here markers with altitude as below. You can see the orange line is just on top of the gray line when you change the code with the below one. I would like both lines to be displayed like the markers you see above them.

/**
 * 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

Unfortunately, for now only markers support altitudes.

Polylines should follow in near future.