项目中解决难点的关键——数学知识（高德地图）

前景提要

这地铁线，两站之间是有多个坐标点，然后通过高德地图的矢量图形中的折线 Polyline 连接绘制而成。

数据结构大概这样：

[
  {
    lineName: '地铁5号线',
    lineDesc: '天通苑北--宋家庄',
    between: ['立水桥', '立水桥南'],
    geo: {
      type: 'LineString',
      coordinates: [
        [116.41235270182301, 40.053034125435],
        [116.41181287977497, 40.052307128907],
        [116.411436903212, 40.051736111112],
        [116.41123779296902, 40.051346299914],
        [116.41105767144097, 40.050823296441],
        [116.41097791883703, 40.050178222657],
        [116.41101155599, 40.049252115886],
        [116.41106743706598, 40.048259819879],
        [116.411084255643, 40.047800021702],
        [116.41112630208397, 40.047322862414],
        [116.41122531467101, 40.046961805556],
        [116.41138020833398, 40.04660780165],
        [116.411636013455, 40.046165907119],
        [116.41221381293497, 40.045462510851],
        [116.41300347222301, 40.044577365452],
        [116.413713921441, 40.043393283421],
        [116.41419460720499, 40.0425],
        [116.41449951171899, 40.041958007813],
      ],
    },
    sectionFlow: 315501,
    fullLoad: 7.303263888888889,
  },
  {
    lineName: '地铁5号线',
    lineDesc: '天通苑北--宋家庄',
    between: ['立水桥南', '北苑路北'],
    geo: {
      type: 'LineString',
      coordinates: [
        [116.41449951171899, 40.041958007813],
        [116.41480523003497, 40.041415744358],
        [116.41497395833403, 40.041099717882],
        [116.415112033421, 40.040753851997],
        [116.415401746962, 40.039691569011],
        [116.41576144748302, 40.038043619792],
        [116.41587429470502, 40.037611219619],
        [116.41599636501803, 40.037317165799],
        [116.41624701605997, 40.036893174914],
        [116.416941460504, 40.035935058594],
        [116.417190483941, 40.035536838108],
        [116.41732720269101, 40.03516764323],
        [116.417453070747, 40.034738769532],
        [116.41773491753497, 40.03354546441],
        [116.41800130208401, 40.032287326389],
        [116.41807942708397, 40.031751302084],
        [116.41809407552103, 40.03104031033],
        [116.41809407552103, 40.030439181858],
      ],
    },
    sectionFlow: 371616,
    fullLoad: 8.602222222222222,
  },
];

根据需求，最后完成后绘制的样子如下图，这是用多边形 Polygon 画的。

问题点

想要绘制完成如上图的关键问题点是：
如何通过已知的一条线，得知距离这条线 N 米的另一条线的坐标呢？

如果正好是纵向的线，那只要加减 x 坐标就可得另一条线的坐标。或横向的线，那只要加减 y 坐标就可得另一条线的坐标。
那如果是斜着的线，那我该怎么知道应该加减 x 和 y 分别是多少呢？

请留步，思考下思路是怎么样的，我当初是反应了好久才反应过来。

关键的解决点

let path = [];
for (let i = 1, length = geo.coordinates.length; i < length; i++) {
  let p = geo.coordinates;

  let tanX = Math.abs(p[i][0] - p[i - 1][0]),
    tantY = Math.abs(p[i][1] - p[i - 1][1]),
    angle = Math.atan(tantY / tanX),
    moveX = Math.abs(Math.sin(angle)),
    moveY = Math.abs(Math.cos(angle));
  // 右侧(坐标点顺序，从上往下，从左往右时)
  if (direction === "right") {
    if (p[i][0] - p[i - 1][0] > 0) {
      moveY = -moveY;
    }
    if (p[i][1] - p[i - 1][1] < 0) {
      moveX = -moveX;
    }
    if (i === 1) {
      moveXYs.push({ moveX, moveY });
      path.push(p[i - 1]);
      path.unshift([p[i - 1][0] + moveX, p[i - 1][1] + moveY]);
    }
    path.unshift([p[i][0] + moveX, p[i][1] + moveY]);
  } else {
    if (p[i][0] - p[i - 1][0] < 0) {
      moveY = -moveY;
    }
    if (p[i][1] - p[i - 1][1] > 0) {
      moveX = -moveX;
    }
    if (i === 1) {
      moveXYs.push({ moveX, moveY });
      path.push(p[i - 1]);
      path.unshift([p[i - 1][0] + moveX, p[i - 1][1] + moveY]);
    }
    path.unshift([p[i][0] + moveX, p[i][1] + moveY]);
  }
  path.push(p[i]);
}

其实想到勾股定理，一切就会迎刃而解。

为了清晰一点，我画了个图，然后就不多讲了，就是个简单数学题~

关键代码就是上面，为了保障生成的坐标点在一侧，里面就还需要判断下是向线是左下方斜还是右下方斜。
最后就生成了 Polygon 需要的坐标数组了。

最后

因为工作太久，渐渐的忘却曾经的数学知识，不知道有多少人会和我一样，没有第一时间反应过来，这其实就是个简单的数学题。
想到勾股定理，花费了蛮多时间，随之而来的三角函数知识自然而然的恢复记忆，一切就迎刃而解了。