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