D3实现站点路线图demo分享

最新推荐文章于 2025-05-12 13:31:04 发布

诸葛亮的芭蕉扇

最新推荐文章于 2025-05-12 13:31:04 发布

阅读量438

点赞数 5

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.youkuaiyun.com/dfc_dfc/article/details/145559654

分享通过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