如何在HERE平台创建步行与驾车混合路线并区分显示不同模式路段

第一步：提前定义不同路段的渲染样式 #

你可以根据需求自定义颜色、线宽、虚线格式，示例如下：

// 机动车路段样式：蓝色实线，线宽12像素
final _carRouteStyle = HERE.MapPolylineStyle()
  ..widthInPixels = 12
  ..color = const HERE.Color.fromARGB(255, 0, 122, 255);

// 步行路段样式：绿色虚线，线宽10像素
final _pedestrianRouteStyle = HERE.MapPolylineStyle()
  ..widthInPixels = 10
  ..color = const HERE.Color.fromARGB(255, 40, 167, 69)
  ..dashPattern = [10, 5]; // 数组第一位为实线段长度，第二位为空白段长度，可自行调整虚线疏密

第二步：修改原有路线计算回调逻辑 #

不再直接调用原有渲染整条路线的方法，改为遍历每个路段按模式匹配样式后单独渲染，修改后代码如下：

// 提前定义数组存储已添加到地图的路线线段，用于后续清空路线
List<HERE.MapPolyline> _existingRoutePolylines = [];

_routeCalculator.calculatePedestrianRoute(waypoints, (HERE.RoutingError? routingError, List<HERE.Route>? routeList) async {
  if (routingError == null) {
    HERE.Route _calculatedRoute = routeList!.first;
    // 先清空地图上之前的旧路线
    for (var polyline in _existingRoutePolylines) {
      _hereMapController.mapScene.removeMapPolyline(polyline);
    }
    _existingRoutePolylines.clear();

    _calculatedRoute.sections.forEach((section) {
      print('TransportMode: ' + section.sectionTransportMode.toString());
      HERE.MapPolylineStyle sectionStyle;
      // 按交通模式匹配对应样式
      if (section.sectionTransportMode == HERE.SectionTransportMode.PEDESTRIAN) {
        sectionStyle = _pedestrianRouteStyle;
      } else if (section.sectionTransportMode == HERE.SectionTransportMode.CAR) {
        sectionStyle = _carRouteStyle;
      } else {
        // 其他交通模式可自行补充样式，这里默认使用机动车样式
        sectionStyle = _carRouteStyle;
      }
      // 生成当前路段的线段对象
      final sectionPolyline = HERE.MapPolyline(
        geometry: section.geometry,
        style: sectionStyle
      );
      // 添加到地图图层
      _hereMapController.mapScene.addMapPolyline(sectionPolyline);
      _existingRoutePolylines.add(sectionPolyline);
    });

    // 原有渲染整条路线的方法可以删除，避免重复渲染
    // _showRouteOnMap(_calculatedRoute);
    _startNavigationOnRoute(isSimulated, _calculatedRoute);
  } else {
    final error = routingError.toString();
    _showDialog('Error', 'Error while calculating a pedestrian route: $error');
  }
});

注意事项 #

• 代码中的_hereMapController替换为你项目中实际使用的HERE地图控制器变量名即可
• 如果需要支持更多交通模式（骑行、公交等），只需要新增对应样式，再加判断分支即可
• 虚线的dashPattern参数可以按需调整数值，适配你的设计需求

内容的提问来源于stack exchange，提问作者Muhammed Emin Aydın