地图上绘制地铁线路的技术实现

地图上绘制地铁线路的技术实现

引用

CSDN

1.

https://blog.csdn.net/kevin_xingka/article/details/139809584

在地图应用开发中，如何在地图上准确绘制地铁线路并标注站点位置是一个常见的需求。本文将详细介绍如何使用高德地图API实现这一功能，包括获取地铁线路数据、绘制线路和站点标记的具体步骤和代码示例。

需求背景

在项目开发中，经常会遇到需要在地图上显示地铁线路的需求，例如查看当前位置是否靠近地铁口。高德地图和百度地图虽然提供了简易版的地铁线路图，但这些地图通常没有与具体地理位置结合，缺乏实际位置的概念。因此，需要自定义绘制地铁线路。

需求分析

高德地图和百度地图都提供了地铁线路图和相应的JS API，但这些API通常只能提供单独的地铁图，无法与具体地图位置结合。为了满足实际需求，需要自己绘制地铁线路。

思路整理

1. 获取地铁线的经纬度：使用AMap.LineSearch初始化并搜索特定城市的地铁线路信息。
2. 获取站点经纬度：通过公司数据库或其他数据源获取地铁站点的具体经纬度信息。
3. 绘制地铁线和站点标记：使用AMap.Polyline绘制地铁线路，使用AMap.Marker绘制站点标记。

核心代码

绘制地铁线路

// 绘制路线
map.plugin('AMap.LineSearch', () => {
  var linesearch = new window.AMap.LineSearch({
    pageIndex: 1, // 第一页的线路
    city: '杭州',
    pageSize: 100, // 每一页的线路条数
    extensions: 'all' // 所有线路类型
  });
  console.log(`linesearch = `, linesearch);
  // 开始搜索
  var name = '地铁5号线';
  linesearch.search(name, (status, result) => {
    console.log(`status, result = `, status, result);
    if (status === 'complete' && result.info === 'OK') {
      // 查询成功调用
      lineSearch_Callback(result);
    } else {
      console.log('查询出错');
    }
  });
  /* 地铁路线查询服务返回数据解析概况 */
  function lineSearch_Callback (data) {
    var lineArr = data.lineInfo;
    var lineNum = data.lineInfo.length;
    if (lineNum === 0) {
      console.log(lineNum);
    } else {
      for (var i = 0; i < lineNum; i++) {
        var pathArr = lineArr[i].path;
        if (i === 0) { // 只绘制一条线路，就是需要高亮的地铁线路
          drawbusLine(pathArr);
        }
      }
    }
  }
  /* 绘制路线 */
  function drawbusLine(BusArr) {
    new window.AMap.Polyline({
      map: map,
      path: BusArr,
      strokeColor: '#000', // 线颜色
      strokeOpacity: 1, // 线透明度
      isOutline: true,
      outlineColor: 'white',
      strokeWeight: 10 // 线宽
    });
  }
});

绘制地铁站点

const subway5 = [
  { name: '博奥路', lng: '120.244164', lat: '30.182338' },
  { name: '姑娘桥', lng: '120.330526', lat: '30.175919' },
  { name: '三坝', lng: '120.097778', lat: '30.300714' },
  { name: '江晖路', lng: '120.212417', lat: '30.181579' },
  { name: '滨康路', lng: '120.231003', lat: '30.183864' },
  { name: '打铁关', lng: '120.176739', lat: '30.285425' },
  { name: '杭师大仓前', lng: '120.01721', lat: '30.288592' },
  { name: '南星桥', lng: '120.177384', lat: '30.217295' },
  { name: '萍水街', lng: '120.112745', lat: '30.302806' },
  { name: '和睦', lng: '120.119367', lat: '30.308544' },
  { name: '五常', lng: '120.045156', lat: '30.296292' },
  { name: '建国北路', lng: '120.181413', lat: '30.264496' },
  { name: '大运河', lng: '120.131684', lat: '30.319283' },
  { name: '良睦路', lng: '120.007201', lat: '30.285632' },
  { name: '拱宸桥东', lng: '120.147679', lat: '30.317058' },
  { name: '创景路', lng: '119.998033', lat: '30.278112' },
  { name: '通惠中路', lng: '120.285183', lat: '30.180485' },
  { name: '聚才路', lng: '120.198803', lat: '30.182426' },
  { name: '金星', lng: '119.966536', lat: '30.265041' },
  { name: '双桥', lng: '120.308770', lat: '30.173139' },
  { name: '长河', lng: '120.194533', lat: '30.197087' },
  { name: '绿汀路', lng: '119.992062', lat: '30.260140' },
  { name: '葛巷', lng: '119.998820', lat: '30.270354' },
  { name: '善贤', lng: '120.160651', lat: '30.317478' },
  { name: '人民广场', lng: '120.266831', lat: '30.179593' },
  { name: '金鸡路', lng: '120.253402', lat: '30.181697' },
  { name: '浙大紫金港', lng: '120.077192', lat: '30.294129' },
  { name: '杭氧', lng: '120.178944', lat: '30.294335' },
  { name: '宝善桥', lng: '120.179847', lat: '30.271957' },
  { name: '蒋村', lng: '120.068483', lat: '30.294809' },
  { name: '江城路', lng: '120.178205', lat: '30.238561' },
  { name: '永福', lng: '120.027057', lat: '30.291577' },
  { name: '育才北路', lng: '120.277897', lat: '30.180823' },
  { name: '东新园', lng: '120.175787', lat: '30.308268' },
  { name: '火车南站', lng: '120.297331', lat: '30.172670' },
  { name: '万安桥', lng: '120.180595', lat: '30.254052' },
  { name: '城站', lng: '120.180770', lat: '30.244567' },
  { name: '西文街', lng: '120.169932', lat: '30.316037' },
  { name: '候潮门', lng: '120.173019', lat: '30.226616' }
];
const markers: any = [];
subway5.map((item: any) => {
  markers.push(
    new window.AMap.Marker({
      position: new window.AMap.LngLat(item.lng, item.lat),
      icon: '//webapi.amap.com/theme/v1.3/markers/b/mark_bs.png',
      anchor: 'bottom-center',
    })
  );
});
map.add(markers);

效果展示

通过上述代码实现，可以在地图上清晰地看到地铁线路和各个站点的位置。这种实现方式可以灵活地绘制不同颜色的线路，使地铁线路图与地图完美结合。

功能扩展

除了基本的地铁线路和站点绘制功能，还可以进一步扩展功能，例如：

• 实现不同地铁线路的颜色区分
• 添加站点详情信息的弹窗显示
• 支持用户交互，如点击站点显示更多信息

通过这些扩展功能，可以开发出更加实用和友好的地图应用。