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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值