D3实现站点路线图demo分享

分享通过D3实现的站点路线分布图demo，后续会继续更新其他功能。

功能点

• 点位弹窗

  效果图如下：

  

• 轨迹高亮

  效果图如下：

  

• 添加路线箭头

  箭头展示逻辑：根据高速路线最后两个点位，计算得出箭头的点位

  效果图如下：
  

• 清空画布

  效果图如下：

  

• 画布自适应

  自适应逻辑：根据点位的经纬度和画布容器的宽高计算得出点位在容器内的坐标，监听窗口大小的变化，进而重新计算

  效果图如下：

  

• 直线和曲线

  效果图如何下：

  

源码如下：

// data.js

export const pointData = [
    {
   
   
        lat: 30.64234,
        lon: 120.266129,
        label: "湖州",
        code: 2117,
        source: 2117,
        target: 2115,
        type: "station",
        gsName: "申苏浙皖",
        position: 'start',
    },
    {
   
   
        lat: 30.43121,
        lon: 120.3899,
        label: "织里",
        code: 2115,
        source: 2115,
        target: 2113,
        type: "station",
        gsName: "申苏浙皖",
        position: 'transition',
    },
    {
   
   
        lat: 30.39120,
        lon: 120.493281,
        label: "南浔",
        code: 2113,
        source: 2113,
        target: null,
        type: "station",
        gsName: "申苏浙皖",
        position: 'end',
    },
    {
   
   
        lat: 30.3129,
        lon: 120.3892,
        label: "湖州东",
        code: 3233,
        source: 3233,
        target: 3231,
        type: "station",
        gsName: "申嘉湖",
        position: 'start',
    },
    {
   
   
        lat: 30.40219,
        lon: 120.384172,
        label: "双林",
        code: 3231,
        source: 3231,
        target: 3229,
        type: "station",
        gsName: "申嘉湖",
        position: 'transition',
    },
    {
   
   
        lat: 30.244234,
        lon: 120.2491291,
        label: "南浔南",
        code: 3229,
        source: 3229,
        target: null,
        type: "station",
        gsName: "申嘉湖",
        position: 'end',
    },
    {
   
   
        lat: 30.529328,
        lon: 120.36172,
        label: "钟管",
        code: 4049,
        source: 4049,
        target: 4051,
        type: "station",
        gsName: "杭绕西复线",
        position: 'start',
    },
    {
   
   
        lat: 30.237215,
        lon: 120.32129,
        label: "新市西",
        code: 4051,
        source: 4051,
        target: 3206,
        type: "station",
        gsName