joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

调整区段配置

Browse Source
This commit is contained in:
zyy 2020-09-15 17:40:57 +08:00
parent 072a6282b0
commit 4b2939ff0a
27 changed files with 1232 additions and 1542 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/jmapNew/config/skinCode/bejing_01.js
View File

@ -6,11 +6,12 @@ class SkinCode extends defaultStyle {
super();
this.fontFamily = '宋体';
this[deviceType.Section] = {
elemnetType:['name', 'standTrackText', 'reentryTrackText', 'transferTrackText', 'destinationText', 'line', 'separator', 'speedLimit'],
active: {
routeColor: false // 进路触发颜色
},
text: { // 物理区段名称
show: true, // 物理区段名称显示
name: { // 物理区段名称
z: 2,
position: -1, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 11, // 文字离区段距离
fontSize: 11, // 字体大小
@ -21,7 +22,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
logicText: { // 逻辑区段名称
show: false, // 逻辑区段名称显示
z: 2,
position: -1, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 11, // 文字离区段距离
fontSize: 11, // 字体大小
@ -31,8 +32,8 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
standText: { // 站台轨名称
show: true, // 站台轨名称显示
standTrackText: { // 站台轨名称
z: 2,
position: 1, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 11, // 文字离区段距离
fontSize: 11, // 字体大小
@ -42,8 +43,8 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
reentryText: { // 折返轨名称
show: true, // 折返轨名称显示
reentryTrackText: { // 折返轨名称
z: 2,
position: 1, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 11, // 文字离区段距离
fontSize: 11, // 字体大小
@ -53,8 +54,8 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
transferText: { // 转换轨名称
show: true, // 转换轨名称显示
transferTrackText: { // 转换轨名称
z: 2,
position: 1, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 11, // 文字离区段距离
fontSize: 11, // 字体大小
@ -65,7 +66,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
destinationText: { // 目的码名称
show: true, // 目的码名称显示
z: 2,
position: 1, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 11, // 文字离区段距离
fontSize: 11, // 字体大小
@ -84,6 +85,7 @@ class SkinCode extends defaultStyle {
lineWidthMore: 2.5
},
line: {
z: 0,
width: 5, // 区段宽度
beyondWidth: 0, // 区段宽超出宽度
invadeColor: '#EF0C08', // 区段侵入颜色
@ -104,8 +106,8 @@ class SkinCode extends defaultStyle {
logicalColor: '#FFFF00', // 逻辑区段颜色 (未用)
logicalTextColor: '#C0C0C0' // 逻辑区段名称颜色 (未用)
},
axle: {}, // 计轴
speedLimit: { // 限速元素
z: 2,
width: 1, // 限速线的宽度
distance: 5, // 限速线距离区段距离
lineColor: '#FFFF00', // 限速线颜色
@ -119,9 +121,6 @@ class SkinCode extends defaultStyle {
color: '#7F7F7F', // 区段边界符颜色
halfHeight: 5 // 区段分隔符高度的一半
},
block: {
special: false // 区段特殊显示
},
trainPosition:{
display: false // 列车实时位置显示
}

40
src/jmapNew/config/skinCode/chengdu_01.js
View File

@ -6,11 +6,12 @@ class SkinCode extends defaultStyle {
super();
this.fontFamily = '宋体';
this[deviceType.Section] = {
elemnetType:['name', 'standTrackText', 'reentryTrackText', 'transferTrackText', 'destinationText', 'line', 'separator', 'speedLimit', 'speedLimitName'],
active: {
routeColor: false // 进路触发颜色
},
text: {
show: true, // 物理区段名称显示
name: {
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 10, // 文字离区段距离
fontSize: 12, // 字体大小
@ -21,7 +22,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
logicText: { // 逻辑区段名称
show: false, // 逻辑区段名称显示
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 12, // 文字离区段距离
fontSize: 11, // 字体大小
@ -31,8 +32,8 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
standText: { // 站台
show: true, // 站台轨名称显示
standTrackText: { // 站台
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 24, // 文字离区段距离
fontSize: 11, // 字体大小
@ -42,8 +43,8 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
reentryText: { // 折返
show: true, // 折返轨名称显示
reentryTrackText: { // 折返
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 36, // 文字离区段距离
fontSize: 11, // 字体大小
@ -53,8 +54,8 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
transferText: { // 转换轨
show: true, // 转换轨名称显示
transferTrackText: { // 转换轨
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 36, // 文字离区段距离
fontSize: 11, // 字体大小
@ -65,7 +66,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
destinationText: { // 目的地
show: true, // 目的码名称显示
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 12, // 文字离区段距离
fontSize: 11, // 字体大小
@ -76,6 +77,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
line: {
z: 0,
width: 5, // 区段宽度
beyondWidth: 0, // 区段宽超出宽度
invadeColor: '#FFFFFF', // 区段侵入颜色
@ -96,17 +98,20 @@ class SkinCode extends defaultStyle {
logicalTextColor: '#C0C0C0', // 逻辑区段名称颜色 (未用)
invalidColor: '#A0522D' // 计轴故障
},
axle: {}, // 计轴
speedLimit: { // 限速元素
z: 2,
width: 1, // 限速线的宽度
distance: 5, // 限速线距离区段距离
lineColor: '#C0C000', // 限速线颜色 （黄色透明光）
nameBackground: '#C0C000', // 限速名称背景颜色
nameShow: true, // 名称显示
nameNumberColor: '#C00808', // 限速值颜色
nameNumberFontSize: 11, // 限速值大小
kilometerColor: '#fff', // 公里标颜色
nameShow: true // 名称显示
},
speedLimitName: {
z: 10,
kilometerFontSize: 8, // 公里标大小
kilometerColor: '#fff', // 公里标颜色
nameNumberFontSize: 11, // 限速值大小
nameNumberColor: '#C00808', // 限速值颜色
nameBackground: '#C0C000', // 限速名称背景颜色
drogueWidth: 19, // 浮标宽度
drogueHeight: 12 // 浮标高度
},
@ -118,9 +123,6 @@ class SkinCode extends defaultStyle {
color: 'white', // 区段边界符颜色
halfHeight: 5 // 区段分隔符高度的一半
},
block: {
special: false // 区段特殊显示
},
trainPosition:{
display: true // 列车实时位置显示
}

47
src/jmapNew/config/skinCode/chengdu_03.js
View File

@ -6,11 +6,12 @@ class SkinCode extends defaultStyle {
super();
this.fontFamily = '宋体';
this[deviceType.Section] = {
elemnetType:['name', 'standTrackText', 'reentryTrackText', 'transferTrackText', 'line', 'separator', 'speedLimit', 'speedLimitName'],
active: {
routeColor: true // 进路触发颜色
},
text: {
show: true, // 物理区段名称显示
name: {
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 10, // 文字离区段距离
fontSize: 12, // 字体大小
@ -21,7 +22,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
logicText: {
show: false, // 逻辑区段名称显示
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 12, // 文字离区段距离
fontSize: 11, // 字体大小
@ -31,8 +32,8 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
standText: {
show: true, // 站台轨名称显示
standTrackText: {
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 24, // 文字离区段距离
fontSize: 11, // 字体大小
@ -42,8 +43,8 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
reentryText: {
show: true, // 折返轨名称显示
reentryTrackText: {
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 36, // 文字离区段距离
fontSize: 11, // 字体大小
@ -53,8 +54,8 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
transferText: {
show: true, // 转换轨名称显示
transferTrackText: {
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 36, // 文字离区段距离
fontSize: 11, // 字体大小
@ -65,7 +66,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
destinationText: {
show: false, // 目的码名称显示
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 12, // 文字离区段距离
fontSize: 11, // 字体大小
@ -76,6 +77,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
line: {
z: 0,
width: 5, // 区段宽度
beyondWidth: 0, // 区段宽超出宽度
invadeColor: '#FFFFFF', // 区段侵入颜色
@ -96,17 +98,20 @@ class SkinCode extends defaultStyle {
logicalTextColor: '#C0C0C0', // 逻辑区段名称颜色 (未用)
invalidColor: '#B18E38' // 区段ARB故障颜色
},
axle: {}, // 计轴
speedLimit: { // 限速元素
z: 2,
width: 1, // 限速线的宽度
distance: 5, // 限速线距离区段距离
lineColor: '#C0C000', // 限速线颜色 （黄色透明光）
nameBackground: '#C0C000', // 限速名称背景颜色
nameShow: true, // 名称显示
nameNumberColor: '#C00808', // 限速值颜色
nameNumberFontSize: 11, // 限速值大小
kilometerColor: '#fff', // 公里标颜色
nameShow: true // 名称显示
},
speedLimitName: {
z: 10,
kilometerFontSize: 8, // 公里标大小
kilometerColor: '#fff', // 公里标颜色
nameNumberFontSize: 11, // 限速值大小
nameNumberColor: '#C00808', // 限速值颜色
nameBackground: '#C0C000', // 限速名称背景颜色
drogueWidth: 19, // 浮标宽度
drogueHeight: 12 // 浮标高度
},
@ -118,11 +123,11 @@ class SkinCode extends defaultStyle {
color: '#FFFFFF', // 区段边界符颜色
halfHeight: 5 // 区段分隔符高度的一半
},
// shuttleBack: { // 折返进路 (存在此对象 显示折返箭头)
// distance: 5 // 限速线距离区段距离
// },
block: {
special: false // 区段特殊显示
shuttleBack: { // 折返进路 (存在此对象 显示折返箭头)
z: 10,
width: 1.5,
color: '#FFFFFF',
distance: 5 // 限速线距离区段距离
},
trainPosition:{
display: false // 列车实时位置显示

27
src/jmapNew/config/skinCode/foshan_01.js
View File

@ -6,11 +6,12 @@ class SkinCode extends defaultStyle {
super();
this.fontFamily = '宋体';
this[deviceType.Section] = {
elemnetType:['name', 'logicText', 'standTrackText', 'reentryTrackText', 'transferTrackText', 'destinationText', 'line', 'separator', 'speedLimit'],
active: {
routeColor: false // 进路触发颜色
},
text: {
show: true, // 物理区段名称显示
name: {
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 18, // 文字离区段距离
fontSize: 11, // 字体大小
@ -21,7 +22,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
logicText: {
show: true, // 逻辑区段名称显示
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 6, // 文字离区段距离
fontSize: 8, // 字体大小
@ -31,8 +32,8 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
standText: {
show: true, // 站台轨名称显示
standTrackText: {
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 30, // 文字离区段距离
fontSize: 11, // 字体大小
@ -42,8 +43,8 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
reentryText: {
show: true, // 折返轨名称显示
reentryTrackText: {
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 30, // 文字离区段距离
fontSize: 11, // 字体大小
@ -53,8 +54,8 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
transferText: {
show: true, // 转换轨名称显示
transferTrackText: {
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 28, // 文字离区段距离
fontSize: 11, // 字体大小
@ -65,7 +66,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
destinationText: {
show: true, // 目的码名称显示
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 10, // 文字离区段距离
fontSize: 10, // 字体大小
@ -76,6 +77,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
line: {
z: 0,
width: 5, // 区段宽度
beyondWidth: 0, // 区段宽超出宽度
invadeColor: '#EF0C08', // 区段侵入颜色
@ -96,8 +98,8 @@ class SkinCode extends defaultStyle {
logicalTextColor: '#FFFFFF', // 逻辑区段名称颜色 (未用)
invalidColor: '#A25100' // 区段ARB故障颜色
},
axle: {}, // 计轴
speedLimit: { // 限速元素
z: 2,
width: 1, // 限速线的宽短
distance: 5, // 限速线距离区段距离
lineColor: '#FFFF00', // 限速线颜色
@ -111,9 +113,6 @@ class SkinCode extends defaultStyle {
color: '#3149C3', // 区段边界符颜色
halfHeight: 5 // 区段分隔符高度的一半
},
block: {
special: false // 区段特殊显示
},
trainPosition:{
display: false // 列车实时位置显示
}

27
src/jmapNew/config/skinCode/fuzhou_01.js
View File

@ -6,11 +6,12 @@ class SkinCode extends defaultStyle {
super();
this.fontFamily = '宋体';
this[deviceType.Section] = {
elemnetType:['name', 'logicText', 'standTrackText', 'reentryTrackText', 'transferTrackText', 'destinationText', 'line', 'separator', 'speedLimit'],
active: {
routeColor: false // 进路触发颜色
},
text: {
show: true, // 物理区段名称显示
name: {
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 18, // 文字离区段距离
fontSize: 12, // 字体大小
@ -21,7 +22,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
logicText: {
show: true, // 逻辑区段名称显示
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 6, // 文字离区段距离
fontSize: 12, // 字体大小
@ -31,8 +32,8 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
standText: {
show: true, // 站台轨名称显示
standTrackText: {
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 30, // 文字离区段距离
fontSize: 11, // 字体大小
@ -42,8 +43,8 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
reentryText: {
show: true, // 折返轨名称显示
reentryTrackText: {
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 30, // 文字离区段距离
fontSize: 11, // 字体大小
@ -53,8 +54,8 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
transferText: {
show: true, // 转换轨名称显示
transferTrackText: {
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 28, // 文字离区段距离
fontSize: 11, // 字体大小
@ -65,7 +66,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
destinationText: {
show: true, // 目的码名称显示
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 10, // 文字离区段距离
fontSize: 10, // 字体大小
@ -76,6 +77,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
line: {
z: 0,
width: 5, // 区段宽度
beyondWidth: 0, // 区段宽超出宽度
invadeColor: '#EF0C08', // 区段侵入颜色
@ -96,8 +98,8 @@ class SkinCode extends defaultStyle {
logicalTextColor: '#FFFFFF', // 逻辑区段名称颜色 (未用)
invalidColor: '#A25100' // 区段ARB故障颜色
},
axle: {}, // 计轴
speedLimit: { // 限速元素
z: 2,
width: 1, // 限速线的宽短
distance: 5, // 限速线距离区段距离
lineColor: '#FFFF00', // 限速线颜色
@ -111,9 +113,6 @@ class SkinCode extends defaultStyle {
color: '#3149C3', // 区段边界符颜色
halfHeight: 5 // 区段分隔符高度的一半
},
block: {
special: false // 区段特殊显示
},
trainPosition:{
display: false // 列车实时位置显示
}

35
src/jmapNew/config/skinCode/haerbin_01.js
View File

@ -6,11 +6,12 @@ class SkinCode extends defaultStyle {
super();
this.fontFamily = '宋体';
this[deviceType.Section] = {
elemnetType:['name', 'logicText', 'standTrackText', 'reentryTrackText', 'transferTrackText', 'line', 'lineBorder', 'sectionBlock', 'speedLimit'],
active: {
routeColor: false // 进路触发颜色
},
text: {
show: true, // 物理区段名称显示
name: {
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 18, // 文字离区段距离
fontSize: 11, // 字体大小
@ -21,7 +22,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
logicText: {
show: true, // 逻辑区段名称显示
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 6, // 文字离区段距离
fontSize: 8, // 字体大小
@ -31,8 +32,8 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
standText: {
show: true, // 站台轨名称显示
standTrackText: {
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 30, // 文字离区段距离
fontSize: 11, // 字体大小
@ -42,8 +43,8 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
reentryText: {
show: true, // 折返轨名称显示
reentryTrackText: {
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 30, // 文字离区段距离
fontSize: 11, // 字体大小
@ -53,8 +54,8 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
transferText: {
show: true, // 转换轨名称显示
transferTrackText: {
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 28, // 文字离区段距离
fontSize: 11, // 字体大小
@ -65,7 +66,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
destinationText: {
show: false, // 目的码名称显示
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 10, // 文字离区段距离
fontSize: 10, // 字体大小
@ -76,7 +77,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
line: {
isActiveShow: true, // 哈尔滨点击元素显示
z: 0,
width: 5, // 区段宽度
beyondWidth: 0, // 区段宽超出宽度
invadeColor: '#EF0C08', // 区段侵入颜色
@ -97,8 +98,15 @@ class SkinCode extends defaultStyle {
logicalColor: '#FFFF00', // 逻辑区段颜色 (未用)
logicalTextColor: '#FFFFFF' // 逻辑区段名称颜色 (未用)
},
axle: {}, // 计轴
lineBorder: { // 哈尔滨点击背景 元素
z: -1,
activeStroke: '#2EBFBF'
},
sectionBlock: {
z: 2
}, // 计轴
speedLimit: { // 限速元素
z: 2,
width: 1, // 限速线的宽短
distance: 5, // 限速线距离区段距离
lineColor: '#FFFF00', // 限速线颜色
@ -112,9 +120,6 @@ class SkinCode extends defaultStyle {
color: '#3149C3', // 区段边界符颜色
halfHeight: 5 // 区段分隔符高度的一半
},
block: {
special: true // 区段特殊显示
},
trainPosition:{
display: false // 列车实时位置显示
}

34
src/jmapNew/config/skinCode/ningbo_01.js
View File

@ -6,11 +6,12 @@ class SkinCode extends defaultStyle {
super();
this.fontFamily = '宋体';
this[deviceType.Section] = {
elemnetType:['name', 'standTrackText', 'reentryTrackText', 'transferTrackText', 'destinationText', 'line', 'separator', 'speedLimit'],
active: {
routeColor: false // 进路触发颜色
},
text: {
show: true, // 物理区段名称显示
name: {
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 10, // 文字离区段距离
fontSize: 12, // 字体大小
@ -21,7 +22,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
logicText: { // 逻辑区段名称
show: false, // 逻辑区段名称显示
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 12, // 文字离区段距离
fontSize: 11, // 字体大小
@ -31,8 +32,8 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
standText: { // 站台
show: true, // 站台轨名称显示
standTrackText: { // 站台
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 24, // 文字离区段距离
fontSize: 11, // 字体大小
@ -42,8 +43,8 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
reentryText: { // 折返
show: true, // 折返轨名称显示
reentryTrackText: { // 折返
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 36, // 文字离区段距离
fontSize: 11, // 字体大小
@ -53,8 +54,8 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
transferText: { // 转换轨
show: true, // 转换轨名称显示
transferTrackText: { // 转换轨
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 36, // 文字离区段距离
fontSize: 11, // 字体大小
@ -65,7 +66,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
destinationText: { // 目的地
show: true, // 目的码名称显示
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 12, // 文字离区段距离
fontSize: 11, // 字体大小
@ -76,6 +77,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
line: {
z: 0,
width: 5, // 区段宽度
beyondWidth: 0, // 区段宽超出宽度
invadeColor: '#FFFFFF', // 区段侵入颜色
@ -96,19 +98,12 @@ class SkinCode extends defaultStyle {
logicalColor: '#FFFF00', // 逻辑区段颜色 (未用)
logicalTextColor: 'white' // 逻辑区段名称颜色 (未用)
},
axle: {}, // 计轴
speedLimit: { // 限速元素
z: 2,
width: 1, // 限速线的宽度
distance: 5, // 限速线距离区段距离
lineColor: '#C0C000', // 限速线颜色 （黄色透明光）
nameBackground: '#C0C000', // 限速名称背景颜色
nameShow: false, // 名称显示
nameNumberColor: '#C00808', // 限速值颜色
nameNumberFontSize: 11, // 限速值大小
kilometerColor: '#fff', // 公里标颜色
kilometerFontSize: 8, // 公里标大小
drogueWidth: 19, // 浮标宽度
drogueHeight: 12 // 浮标高度
nameShow: false // 名称显示
},
separator: {
z: 3, // 分割符层级
@ -119,7 +114,6 @@ class SkinCode extends defaultStyle {
halfHeight: 5 // 区段分隔符高度的一半
},
block: {
special: false, // 区段特殊显示
blockGlint: true // 区段封锁闪烁显示
},
trainPosition:{

34
src/jmapNew/config/skinCode/ningbo_03.js
View File

@ -7,11 +7,12 @@ class SkinCode extends defaultStyle {
this.fontFamily = '宋体';
this.backgroundColor = '#808080';
this[deviceType.Section] = {
elemnetType:['name', 'standTrackText', 'reentryTrackText', 'transferTrackText', 'destinationText', 'line', 'stopRouteImg', 'separator', 'speedLimit'],
active: {
routeColor: false // 进路触发颜色
},
text: {
show: true, // 物理区段名称显示
name: {
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 10, // 文字离区段距离
fontSize: 12, // 字体大小
@ -22,7 +23,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
logicText: { // 逻辑区段名称
show: false, // 逻辑区段名称显示
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 12, // 文字离区段距离
fontSize: 11, // 字体大小
@ -32,8 +33,8 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
standText: { // 站台
show: true, // 站台轨名称显示
standTrackText: { // 站台
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 24, // 文字离区段距离
fontSize: 11, // 字体大小
@ -43,8 +44,8 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
reentryText: { // 折返
show: true, // 折返轨名称显示
reentryTrackText: { // 折返
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 36, // 文字离区段距离
fontSize: 11, // 字体大小
@ -54,8 +55,8 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
transferText: { // 转换轨
show: true, // 转换轨名称显示
transferTrackText: { // 转换轨
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 36, // 文字离区段距离
fontSize: 11, // 字体大小
@ -66,7 +67,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
destinationText: { // 目的地
show: true, // 目的码名称显示
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 12, // 文字离区段距离
fontSize: 11, // 字体大小
@ -77,6 +78,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
line: {
z: 0,
width: 8, // 区段宽度
beyondWidth: 0, // 区段宽超出宽度
invadeColor: '#FFFFFF', // 区段侵入颜色
@ -127,19 +129,12 @@ class SkinCode extends defaultStyle {
cancelMauLineStroke: '#000'
},
stopRouteImg: {},
axle: {}, // 计轴
speedLimit: { // 限速元素
z: 2,
width: 1, // 限速线的宽度
distance: 5, // 限速线距离区段距离
lineColor: '#C0C000', // 限速线颜色 （黄色透明光）
nameBackground: '#C0C000', // 限速名称背景颜色
nameShow: false, // 名称显示
nameNumberColor: '#C00808', // 限速值颜色
nameNumberFontSize: 11, // 限速值大小
kilometerColor: '#fff', // 公里标颜色
kilometerFontSize: 8, // 公里标大小
drogueWidth: 19, // 浮标宽度
drogueHeight: 12 // 浮标高度
nameShow: false // 名称显示
},
separator: {
z: -1, // 分割符层级
@ -150,7 +145,6 @@ class SkinCode extends defaultStyle {
halfHeight: 8 // 区段分隔符高度的一半
},
block: {
special: false, // 区段特殊显示
blockGlint: true // 区段封锁闪烁显示
},
trainPosition:{

27
src/jmapNew/config/skinCode/xian_01.js
View File

@ -6,11 +6,12 @@ class SkinCode extends defaultStyle {
super();
this.fontFamily = '宋体';
this[deviceType.Section] = {
elemnetType:['name', 'logicText', 'standTrackText', 'reentryTrackText', 'transferTrackText', 'destinationText', 'line', 'separator', 'speedLimit'],
active: {
routeColor: false // 进路触发颜色
},
text: {
show: true, // 物理区段名称显示
name: {
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 18, // 文字离区段距离
fontSize: 11, // 字体大小
@ -21,7 +22,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
logicText: {
show: true, // 逻辑区段名称显示
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 6, // 文字离区段距离
fontSize: 8, // 字体大小
@ -31,8 +32,8 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
standText: {
show: true, // 站台轨名称显示
standTrackText: {
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 30, // 文字离区段距离
fontSize: 11, // 字体大小
@ -42,8 +43,8 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
reentryText: {
show: true, // 折返轨名称显示
reentryTrackText: {
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 30, // 文字离区段距离
fontSize: 11, // 字体大小
@ -53,8 +54,8 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
transferText: {
show: true, // 转换轨名称显示
transferTrackText: {
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 28, // 文字离区段距离
fontSize: 11, // 字体大小
@ -65,7 +66,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
destinationText: {
show: true, // 目的码名称显示
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 10, // 文字离区段距离
fontSize: 10, // 字体大小
@ -84,6 +85,7 @@ class SkinCode extends defaultStyle {
lineWidthMore: 5
},
line: {
z: 0,
width: 5, // 区段宽度
beyondWidth: 0, // 区段宽超出宽度
invadeColor: '#EF0C08', // 区段侵入颜色
@ -104,8 +106,8 @@ class SkinCode extends defaultStyle {
logicalTextColor: '#FFFFFF', // 逻辑区段名称颜色 (未用)
invalidColor: '#9C5208' // 区段ARB故障颜色
},
axle: {}, // 计轴
speedLimit: { // 限速元素
z: 2,
width: 1, // 限速线的宽短
distance: 5, // 限速线距离区段距离
lineColor: '#FFFF00', // 限速线颜色
@ -119,9 +121,6 @@ class SkinCode extends defaultStyle {
color: '#3149C3', // 区段边界符颜色
halfHeight: 5 // 区段分隔符高度的一半
},
block: {
special: false // 区段特殊显示
},
trainPosition:{
display: false // 列车实时位置显示
}

45
src/jmapNew/config/skinCode/xian_02.js
View File

@ -6,11 +6,12 @@ class SkinCode extends defaultStyle {
super();
this.fontFamily = '宋体';
this[deviceType.Section] = {
elemnetType:['name', 'standTrackText', 'reentryTrackText', 'transferTrackText', 'destinationText', 'line', 'axle', 'speedLimit'],
active: {
routeColor: false // 进路触发颜色
},
text: {
show: true, // 物理区段名称显示
name: {
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 18, // 文字离区段距离
fontSize: 11, // 字体大小
@ -21,7 +22,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
logicText: { // 逻辑区段名称
show: false, // 逻辑区段名称显示
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 6, // 文字离区段距离
fontSize: 8, // 字体大小
@ -31,8 +32,8 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
standText: { // 站台
show: true, // 站台轨名称显示
standTrackText: { // 站台名称
z: 2,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 30, // 文字离区段距离
fontSize: 11, // 字体大小
@ -42,9 +43,9 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
reentryText: { // 折返
show: true, // 折返轨名称显示
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
reentryTrackText: { // 折返名称
z: 2,
position: 0, // 名称位置 1 上面 -1 下面 0 对称
distance: 30, // 文字离区段距离
fontSize: 11, // 字体大小
fontWeight: 'normal', // 字体粗细
@ -53,9 +54,9 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
transferText: { // 转换轨
show: true, // 转换轨名称显示
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
transferTrackText: { // 转换轨名称
z: 2,
position: 0, // 名称位置 1 上面 -1 下面 0 对称
distance: 30, // 文字离区段距离
fontSize: 11, // 字体大小
fontWeight: 'normal', // 字体粗细
@ -64,9 +65,9 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
destinationText: { // 目的地
show: true, // 目的码名称显示
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
destinationText: { // 目的地名称
z: 2,
position: 0, // 名称位置 1 上面 -1 下面 0 对称
distance: 28, // 文字离区段距离
fontSize: 11, // 字体大小
fontWeight: 'bold', // 字体粗细
@ -84,6 +85,7 @@ class SkinCode extends defaultStyle {
lineWidthMore: 6
},
line: {
z: 0,
width: 4, // 区段宽度
beyondWidth: 0, // 区段宽超出宽度
invadeColor: '#FFFFFF', // 区段侵入颜色
@ -104,7 +106,7 @@ class SkinCode extends defaultStyle {
logicalTextColor: '#C0C0C0' // 逻辑区段名称颜色 (未用)
},
axle: {
show: true, // 计轴是否显示
z: 3,
radius: 3, // 计轴 半径
distance: 4, // 计轴和区段之间的距离 （未用）
color: '#9F9C9C', // 区段计轴颜色
@ -114,17 +116,11 @@ class SkinCode extends defaultStyle {
lineWidth: 2
},
speedLimit: { // 限速元素
z: 2,
width: 1, // 限速线的宽度
distance: 5, // 限速线距离区段距离
lineColor: '#C0C000', // 限速线颜色 （黄色透明光）
nameBackground: '#C0C000', // 限速名称背景颜色
nameShow: true, // 名称显示
nameNumberColor: '#C00808', // 限速值颜色
nameNumberFontSize: 11, // 限速值大小
kilometerColor: '#fff', // 公里标颜色
kilometerFontSize: 8, // 公里标大小
drogueWidth: 19, // 浮标宽度
drogueHeight: 12 // 浮标高度
nameShow: false // 名称显示
},
separator: {
z: 3, // 分割符层级
@ -134,9 +130,6 @@ class SkinCode extends defaultStyle {
color: '#AAA9A9', // 区段边界符颜色
halfHeight: 4 // 区段分隔符高度的一半
},
block: {
special: false // 区段特殊显示
},
trainPosition:{
display: true // 列车实时位置显示
}

1
src/jmapNew/map.js
View File

@ -453,7 +453,6 @@ class Jlmap {
} else if (elem.deviceType == 'OVERLAP') {
const overlapRoute = this.mapDevice[elem.code];
const model = this.mapDevice[overlapRoute.pathList[0].sectionList[0]];
// console.log(overlapRoute.pathList[0].right, model.name, elem.remainTime);
if (overlapRoute.pathList[0].right) {
overlapRoute['points'] = { x: model.points[0].x, y: model.points[0].y };
} else {

1
src/jmapNew/mouseController.js
View File

@ -164,6 +164,7 @@ class MouseController extends Eventful {
click(e) {
var em = this.checkEvent(e);
// console.log(em, e);
this.trigger(this.events.Selected, em);
}

4
src/jmapNew/shape/OverAp/index.js
View File

@ -28,9 +28,9 @@ export default class OverAp extends Group {
silent: false,
x: model.points.x + 30,
y: model.points.y - style.Section.line.width * 2,
fontWeight: style.Section.text.fontWeight,
fontWeight: style.Section.name.fontWeight,
text: model.remainTime || 30,
textPosition: style.Section.text.textPosition,
textPosition: style.Section.name.textPosition,
fontSize: 12,
fontFamily: style.fontFamily,
textFill: '#FFF',

305
src/jmapNew/shape/Section/EAxle.js
View File

@ -2,68 +2,98 @@ import Group from 'zrender/src/container/Group';
import Line from 'zrender/src/graphic/shape/Line';
import Circle from 'zrender/src/graphic/shape/Circle';
import Isogon from 'zrender/src/graphic/shape/Isogon';
// import Path from 'zrender/src/graphic/Path';
import JTriangle from '../../utils/JTriangle';
// 计轴
// export default Path.extend({
// type: 'EAxle',
// _subType: '',
// buildPath: function (path, shape) {
// if (shape && shape.style && shape.traingle) {
// const axleLength = 2 * shape.style.Section.axle.radius;
// // const positionx = shape.point.x + shape.drictx * (shape.traingle.getCos(axleLength) * 1.2);
// // const positiony = shape.point.y + shape.dricty * (shape.traingle.getCos(axleLength) * 1.2);
// const positionx = shape.point.x + shape.drictx * (shape.traingle.getCos(axleLength) * 1.05);
// const positiony = shape.point.y + shape.dricty * (shape.traingle.getCos(axleLength) * 1.05);
// // 圆弧
// const arcX = positionx - shape.dricty * shape.traingle.getSin(axleLength);
// const arcY = positiony + shape.drictx * shape.traingle.getSin(axleLength);
// const arcR = shape.style.Section.axle.radius;
// path.arc(arcX, arcY, arcR, 0, 2 * Math.PI, false);
// path.closePath();
//
// const x1 = positionx - shape.traingle.getCos(axleLength * shape.multiple1) - shape.dricty * shape.traingle.getSin(axleLength);
// const y1 = positiony + shape.drictx * shape.traingle.getSin(axleLength * shape.multiple1) - shape.traingle.getSin(axleLength);
// const x2 = positionx + shape.traingle.getCos(axleLength * shape.multiple2) - shape.dricty * shape.traingle.getSin(axleLength);
// const y2 = positiony + shape.drictx * shape.traingle.getSin(axleLength * shape.multiple2) + shape.traingle.getSin(axleLength);
// path.moveTo(x1, y1);
// path.lineTo(x2, y2);
// path.closePath();
// }
// }
// });
export default class EAxle111 extends Group {
export default class EAxle extends Group {
constructor(model) {
super();
this.model = model;
this.zlevel = model.zlevel;
this._subType = model._subType;
this.style = model.style;
this.z = model.z;
this.create(model);
this.create();
}
create(model) {
const axleLength = 2 * model.shape.style.Section.axle.radius;
let positionx = model.shape.point.x - model.shape.dricty * (model.shape.traingle.getSin(axleLength) * 1.2);
let positiony = model.shape.point.y + model.shape.dricty * (model.shape.traingle.getCos(axleLength) * 1.2);
if (model.shape.difference === 0) {
positionx += model.shape.drictx * 1;
} else if (model.shape.difference > 0) {
positionx -= model.shape.drictx * model.shape.traingle.getSin(1);
positiony -= model.shape.drictx * model.shape.traingle.getCos(1);
create() {
const model = this.model.modelData;
if (model.leftAxlePosition) {
this.createAxleLeft();
} else if (model.rightAxlePosition) {
this.createAxleRight();
}
}
createAxleLeft() {
const model = this.model.modelData;
const traingle = new JTriangle(model.points[0], model.points[1]);
const drictx = 1;
const dricty = model.leftAxlePosition === 1 || model.leftAxlePosition === 2 ? 1 : -1;
const isSpecial = model.leftAxlePosition === -2 || model.leftAxlePosition === 2;
const difference = model.points[0].y - model.points[1].y;
let point = {};
point = {x:model.points[0].x, y: model.points[0].y};
if (model.leftAxleOffset) {
point.x = point.x + model.leftAxleOffset.x || 0;
point.y = point.y + model.leftAxleOffset.y || 0;
}
this.createAxle({
traingle: traingle,
drictx: drictx,
dricty: dricty,
isSpecial: isSpecial,
point: point,
difference: difference
});
}
createAxleRight() {
const model = this.model.modelData;
const length = model.points.length;
const traingle = new JTriangle(model.points[length - 2], model.points[length - 1]);
const drictx = -1;
const dricty = model.rightAxlePosition === 1 || model.rightAxlePosition === 2 ? 1 : -1;
const isSpecial = model.rightAxlePosition === -2 || model.rightAxlePosition === 2;
const difference = model.points[length - 2].y - model.points[length - 1].y;
let point = {};
point = {x:model.points[length - 1].x, y: model.points[length - 1].y};
if (model.rightAxleOffset) {
point.x = point.x + model.rightAxleOffset.x || 0;
point.y = point.y + model.rightAxleOffset.y || 0;
}
this.createAxle({
traingle: traingle,
drictx: drictx,
dricty: dricty,
isSpecial: isSpecial,
point: point,
difference: difference
});
}
createAxle(modelData) {
const style = this.model.style;
const axleLength = 2 * style.Section.axle.radius;
let positionx = modelData.point.x - modelData.dricty * (modelData.traingle.getSin(axleLength) * 1.2);
let positiony = modelData.point.y + modelData.dricty * (modelData.traingle.getCos(axleLength) * 1.2);
if (modelData.difference === 0) {
positionx += modelData.drictx * 1;
} else if (modelData.difference > 0) {
positionx -= modelData.drictx * modelData.traingle.getSin(1);
positiony -= modelData.drictx * modelData.traingle.getCos(1);
} else {
positionx += model.shape.drictx * model.shape.traingle.getSin(1);
positiony += model.shape.drictx * model.shape.traingle.getCos(1);
positionx += modelData.drictx * modelData.traingle.getSin(1);
positiony += modelData.drictx * modelData.traingle.getCos(1);
}
const x1 = positionx;
const y1 = positiony;
const x2 = positionx + model.shape.drictx * 9 / 2 * model.shape.style.Section.axle.radius;
const x2 = positionx + modelData.drictx * 9 / 2 * style.Section.axle.radius;
const y2 = positiony;
const arcX = positionx + model.shape.drictx * 2 * model.shape.style.Section.axle.radius;
const arcX = positionx + modelData.drictx * 2 * style.Section.axle.radius;
const arcY = positiony;
const angle = -model.shape.traingle.getRotation();
const angle = -modelData.traingle.getRotation();
this.line = new Line({
this.add(new Line({
zlevel: this.zlevel,
z: this.z,
origin: [positionx, positiony],
@ -75,58 +105,54 @@ export default class EAxle111 extends Group {
y2:y2
},
style: {
lineWidth: this.style.lineWidth,
fill: this.style.fill,
stroke: this.style.stroke
lineWidth: style.Section.axle.lineWidth,
fill: style.Section.axle.fill,
stroke: style.Section.axle.stroke
}
});
this.add(this.line);
if (model.shape.isSpecial) {
const brokenLineX1 = positionx + model.shape.drictx * model.shape.style.Section.axle.radius;
const brokenLineY1 = positiony - model.shape.style.Section.axle.radius * 2 / 3;
const brokenLineY2 = positiony + model.shape.style.Section.axle.radius * 2 / 3;
const brokenLineX2 = positionx + model.shape.drictx * model.shape.style.Section.axle.radius * 4;
const brokenLineY3 = positiony - model.shape.style.Section.axle.radius * 2 / 3;
const brokenLineY4 = positiony + model.shape.style.Section.axle.radius * 2 / 3;
const brokenLineX3 = positionx + model.shape.drictx * model.shape.style.Section.axle.radius * 4 / 3;
const brokenLineX4 = positionx + model.shape.drictx * model.shape.style.Section.axle.radius * 11 / 3;
const brokenLineY5 = positiony - model.shape.style.Section.axle.radius;
const brokenLineY6 = positiony + model.shape.style.Section.axle.radius;
this.isogonOutside = new Isogon({
zlevel: this.model.zlevel,
z: this.model.z,
}));
// this.add(this.line);
if (modelData.isSpecial) {
const brokenLineX1 = positionx + modelData.drictx * style.Section.axle.radius;
const brokenLineY1 = positiony - style.Section.axle.radius * 2 / 3;
const brokenLineY2 = positiony + style.Section.axle.radius * 2 / 3;
const brokenLineX2 = positionx + modelData.drictx * style.Section.axle.radius * 4;
const brokenLineY3 = positiony - style.Section.axle.radius * 2 / 3;
const brokenLineY4 = positiony + style.Section.axle.radius * 2 / 3;
const brokenLineX3 = positionx + modelData.drictx * style.Section.axle.radius * 4 / 3;
const brokenLineX4 = positionx + modelData.drictx * style.Section.axle.radius * 11 / 3;
const brokenLineY5 = positiony - style.Section.axle.radius;
const brokenLineY6 = positiony + style.Section.axle.radius;
this.add(new Isogon({
zlevel: this.zlevel,
z: this.z,
origin: [positionx, positiony],
rotation:angle,
// origin: [arcX, arcY],
// rotation:Math.PI / 8,
shape: {
x: arcX,
y: arcY,
r: model.shape.style.Section.axle.radius,
r: style.Section.axle.radius,
n: 8
},
style: {
fill: this.style.fill
fill: style.Section.axle.fill
}
});
this.isogonInside = new Isogon({
zlevel: this.model.zlevel,
z: this.model.z + 1,
}));
this.add(new Isogon({
zlevel: this.zlevel,
z: this.z + 1,
origin: [positionx, positiony],
rotation:angle,
// origin: [arcX, arcY],
// rotation:Math.PI / 4,
shape: {
x: arcX,
y: arcY,
r: model.shape.style.Section.axle.radius / 2,
r: style.Section.axle.radius / 2,
n: 4
},
style: {
fill: '#000'
}
});
this.line1 = new Line({
}));
this.add(new Line({
zlevel: this.zlevel,
z: this.z,
origin: [positionx, positiony],
@ -139,11 +165,11 @@ export default class EAxle111 extends Group {
},
style: {
lineWidth: 1,
fill: this.style.fill,
stroke: this.style.stroke
fill: style.Section.axle.fill,
stroke: style.Section.axle.stroke
}
});
this.line2 = new Line({
}));
this.add(new Line({
zlevel: this.zlevel,
z: this.z,
origin: [positionx, positiony],
@ -156,11 +182,11 @@ export default class EAxle111 extends Group {
},
style: {
lineWidth: 1,
fill: this.style.fill,
stroke: this.style.stroke
fill: style.Section.axle.fill,
stroke: style.Section.axle.stroke
}
});
this.line3 = new Line({
}));
this.add(new Line({
zlevel: this.zlevel,
z: this.z,
origin: [positionx, positiony],
@ -173,11 +199,11 @@ export default class EAxle111 extends Group {
},
style: {
lineWidth: 1,
fill: this.style.fill,
stroke: this.style.stroke
fill: style.Section.axle.fill,
stroke: style.Section.axle.stroke
}
});
this.line4 = new Line({
}));
this.add(new Line({
zlevel: this.zlevel,
z: this.z,
origin: [positionx, positiony],
@ -190,11 +216,11 @@ export default class EAxle111 extends Group {
},
style: {
lineWidth: 1,
fill: this.style.fill,
stroke: this.style.stroke
fill: style.Section.axle.fill,
stroke: style.Section.axle.stroke
}
});
this.line5 = new Line({
}));
this.add(new Line({
zlevel: this.zlevel,
z: this.z,
origin: [positionx, positiony],
@ -207,11 +233,11 @@ export default class EAxle111 extends Group {
},
style: {
lineWidth: 1,
fill: this.style.fill,
stroke: this.style.stroke
fill: style.Section.axle.fill,
stroke: style.Section.axle.stroke
}
});
this.line6 = new Line({
}));
this.add(new Line({
zlevel: this.zlevel,
z: this.z,
origin: [positionx, positiony],
@ -224,49 +250,68 @@ export default class EAxle111 extends Group {
},
style: {
lineWidth: 1,
fill: this.style.fill,
stroke: this.style.stroke
fill: style.Section.axle.fill,
stroke: style.Section.axle.stroke
}
});
this.add(this.isogonInside);
this.add(this.isogonOutside);
this.add(this.line1);
this.add(this.line2);
this.add(this.line3);
this.add(this.line4);
this.add(this.line5);
this.add(this.line6);
}));
// this.add(this.isogonInside);
// this.add(this.isogonOutside);
// this.add(this.line1);
// this.add(this.line2);
// this.add(this.line3);
// this.add(this.line4);
// this.add(this.line5);
// this.add(this.line6);
} else {
this.circle = new Circle({
zlevel: this.model.zlevel,
z: this.model.z,
this.add(new Circle({
zlevel: this.zlevel,
z: this.z,
origin: [positionx, positiony],
rotation:angle,
shape: {
cx: arcX,
cy: arcY,
r: model.shape.style.Section.axle.radius
r: style.Section.axle.radius
},
style: {
fill: this.style.fill
fill: style.Section.axle.fill
}
});
this.add(this.circle);
}));
// this.add(this.circle);
}
}
setStyle(styles) {
if (this.model.shape.isSpecial) {
this.isogonOutside.setStyle(styles);
this.line1.setStyle(styles);
this.line2.setStyle(styles);
this.line3.setStyle(styles);
this.line4.setStyle(styles);
this.line5.setStyle(styles);
this.line6.setStyle(styles);
} else {
this.circle.setStyle(styles);
}
this.line.setStyle(styles);
// if (this.isSpecial) {
// this.eachChild((child) => {
// if (child.setStyle) {
// child.setStyle(styles);
// }
// });
// this.isogonOutside && this.isogonOutside.setStyle(styles);
// this.isogonInside && this.isogonInside.setStyle(styles);
// this.line1 && this.line1.setStyle(styles);
// this.line2 && this.line2.setStyle(styles);
// this.line3 && this.line3.setStyle(styles);
// this.line4 && this.line4.setStyle(styles);
// this.line5 && this.line5.setStyle(styles);
// this.line6 && this.line6.setStyle(styles);
// } else {
// this.circle && this.circle.setStyle(styles);
// }
// this.line && this.line.setStyle(styles);
this.eachChild((child) => {
if (child && child.setStyle) {
child.setStyle(styles);
}
});
}
recover() {
}
setState() {
}
}

88
src/jmapNew/shape/Section/EBackArrow.js
View File

@ -1,7 +1,91 @@
import Group from 'zrender/src/container/Group';
import Path from 'zrender/src/graphic/Path';
export default class EBackArrowGroup extends Group {
constructor(model) {
super();
this.model = model;
this.zlevel = model.zlevel;
this.z = model.z;
this.create();
}
create() {
const model = this.model.modelData;
const style = this.model.style;
if (model.reentryTrack && style.Section.shuttleBack) {
const radius = 3;
model.drict = 1; // 箭头朝向 (是折返轨加一个方向选择) 目前在区段右边
const width = style.Section.line.width * 2;
const height = style.Section.line.width * 1;
const turnBackDistance = style.Section.shuttleBack.distance + radius * 4;
const points = model.points;
let x = -model.drict * width * 1.2;
let y = -turnBackDistance;
if (model.drict < 0) {
x += points[0].x;
y += points[0].y;
} else {
x += points[points.length - 1].x;
y += points[points.length - 1].y;
}
this.turnBack = new EBackArrow({
zlevel: this.zlevel,
z: this.z,
shape: {
drict: model.drict,
width: width,
height: height,
points: {
x: x,
y: y
}
},
style: {
lineWidth: style.Section.shuttleBack.width,
stroke: style.Section.shuttleBack.color,
fill: 'rgba(0, 0, 0, 0)'
}
});
this.turnBackriangle = new EBackArrowTriangle({
zlevel: this.zlevel,
z: this.z,
shape: {
drict: model.drict,
width: width,
height: height,
points: {
x: x,
y: y
}
},
style: {
lineWidth: style.Section.shuttleBack.width,
stroke: style.Section.shuttleBack.color,
fill: style.Section.shuttleBack.color
}
});
this.add(this.turnBack);
this.add(this.turnBackriangle);
this.turnBack.hide();
this.turnBackriangle.hide();
}
}
hide() {
this.turnBack.hide();
this.turnBackriangle.hide();
}
show() {
this.turnBack.show();
this.turnBackriangle.show();
}
}
// 成都三号线 折返进路
export const EBackArrow = Path.extend({
const EBackArrow = Path.extend({
type: 'EBackArrow',
shape: {
points: null
@ -24,7 +108,7 @@ export const EBackArrow = Path.extend({
});
// 箭头
export const EBackArrowTriangle = Path.extend({
const EBackArrowTriangle = Path.extend({
type: 'EBackArrowTriangle',
shape: {
points: null

323
src/jmapNew/shape/Section/ELimitLines.js
View File

@ -3,78 +3,6 @@ import BezierCurve from 'zrender/src/graphic/shape/BezierCurve';
import Line from 'zrender/src/graphic/shape/Line';
import JTriangle from '../../utils/JTriangle';
import Vue from 'vue';
// import Path from 'zrender/src/graphic/Path';
// 创建区段限速限集合
// export default const ELimitLines = Path.extend({
// type: 'ELimitLines',
// shape: {
// points: null
// },
// buildPath: function (ctx, model) {
// /** 创建区段*/
// if (model && model.points.length > 1) {
// if (model.isCurve) {
// ctx.beginPath();
// const shape = {};
// for (let i = 1; i < (model.points.length - 1); i++) {
// shape[`cpx${i}`] = model.points[i].x;
// shape[`cpy${i}`] = model.points[i].y;
// }
// shape[`x1`] = model.points[0].x;
// shape[`y1`] = model.points[0].y;
// shape[`x2`] = model.points[model.points.length - 1].x;
// shape[`y2`] = model.points[model.points.length - 1].y;
// ctx.moveTo(shape[`x1`], shape[`y1`]);
// if (model.points.length <= 3) {
// ctx.quadraticCurveTo(shape[`cpx1`], shape[`cpy1`], shape[`x2`], shape[`y2`]);
// } else {
// ctx.bezierCurveTo(shape[`cpx1`], shape[`cpy1`], shape[`cpx2`], shape[`cpy2`], shape[`x2`], shape[`y2`]);
// }
// } else {
// const swPadding = model.style.Switch.core.length; // 定位和反位时区段距离岔芯的距离
// var switchWidth = model.style.Section.line.width + model.style.Section.line.beyondWidth; // 道岔宽度
// const beg = Object.assign({}, model.points[0]);
// const end = Object.assign({}, model.points[model.points.length - 1]);
// if (model.isSwitchSection && beg.y !== end.y) {
// const swch = model.switch;
// if (swch) {
// const traingle = new JTriangle(swch.intersection, swch.skew);
// if ((swch.intersection.x === beg.x) && (swch.intersection.y === beg.y)) {
// beg.x = beg.x + traingle.drictx * (swPadding + switchWidth) * traingle.getCotRate();
// beg.y = beg.y + traingle.dricty * (swPadding + switchWidth);
// }
// if ((swch.intersection.x === end.x) && (swch.intersection.y === end.y)) {
// end.x = end.x + traingle.drictx * (swPadding + switchWidth) * traingle.getCotRate();
// end.y = end.y + traingle.dricty * (swPadding + switchWidth);
// }
// }
// }
// if (model.points.length == 2) {
// ctx.moveTo(beg.x, beg.y);
// ctx.lineTo(end.x, end.y);
// ctx.closePath();
// } else {
// ctx.moveTo(beg.x, beg.y);
// ctx.lineTo(model.points[1].x, model.points[1].y);
// ctx.closePath();
// for (let i = 1; i < (model.points.length - 2); i++) {
// ctx.moveTo(model.points[i].x, model.points[i].y);
// ctx.lineTo(model.points[i + 1].x, model.points[i + 1].y);
// ctx.closePath();
// }
// ctx.moveTo(model.points[model.points.length - 2].x, model.points[model.points.length - 2].y);
// ctx.lineTo(end.x, end.y);
// ctx.closePath();
// }
// }
// }
// }
// });
export default class ELimitLines extends Group {
constructor(model) {
@ -82,136 +10,185 @@ export default class ELimitLines extends Group {
this.model = model;
this.zlevel = model.zlevel;
this.z = model.z;
this.create(model);
this.create();
}
create(model) {
create() {
const model = this.model.modelData;
const style = this.model.style;
/** 创建区段*/
if (model && model.points.length > 1) {
if (model.isCurve) {
const shape = {};
for (let i = 1; i < (model.points.length - 1); i++) {
shape[`cpx${i}`] = model.points[i].x;
shape[`cpy${i}`] = model.points[i].y;
const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]);
let x = traingle.drictx * (style.Section.speedLimit.distance) * traingle.getSinRate();
let y = traingle.dricty * (style.Section.speedLimit.distance) * traingle.getCosRate();
if (x == Infinity) { x = 0; }
if (y == Infinity) { y = 0; }
// 上侧临时限速线
const speedLimitLeft = this.createLimit({
position: [x, -y],
switch: model.switch,
code: model.code,
isSwitchSection: model.switchSection,
relSwitchCode: model.relSwitchCode,
isCurve: model.curve, // 是否曲线
points: model.points
});
// 下侧临时限速线
const speedLimitRight = this.createLimit({
position: [-x, y],
switch: model.switch,
code: model.code,
isSwitchSection: model.switchSection,
relSwitchCode: model.relSwitchCode,
isCurve: model.curve, // 是否曲线
points: model.points
});
speedLimitLeft.forEach(item => {
this.add(item);
});
speedLimitRight.forEach(item => {
this.add(item);
});
}
}
createLimit(model) {
const style = this.model.style;
const dataList = [];
if (model.isCurve) {
const shape = {};
for (let i = 1; i < (model.points.length - 1); i++) {
shape[`cpx${i}`] = model.points[i].x;
shape[`cpy${i}`] = model.points[i].y;
}
shape[`x1`] = model.points[0].x;
shape[`y1`] = model.points[0].y;
shape[`x2`] = model.points[model.points.length - 1].x;
shape[`y2`] = model.points[model.points.length - 1].y;
dataList.push(new BezierCurve({
isLine: true,
zlevel: this.zlevel,
progressive: model.progressive,
z: this.z,
culling: true,
shape: shape,
position: model.position,
style: {
lineWidth: style.Section.speedLimit.width,
stroke: style.Section.speedLimit.lineColor,
fillOpacity: 0
}
}));
} else {
const swPadding = style.Switch.core.length; // 定位和反位时区段距离岔芯的距离
var switchWidth = style.Section.line.width + style.Section.line.beyondWidth; // 道岔宽度
const beg = Object.assign({}, model.points[0]);
const end = Object.assign({}, model.points[model.points.length - 1]);
if (model.isSwitchSection && beg.y !== end.y) {
const swch = Vue.prototype.$jlmap.mapDevice[model.switch.code]; // 获取道岔model 及状态数据
shape[`x1`] = model.points[0].x;
shape[`y1`] = model.points[0].y;
shape[`x2`] = model.points[model.points.length - 1].x;
shape[`y2`] = model.points[model.points.length - 1].y;
if (swch && swch.instance) {
const traingle = new JTriangle(swch.intersection, swch.skew);
if ((swch.intersection.x === beg.x) && (swch.intersection.y === beg.y) && !swch.normalPosition && swch.sectionCCode == model.code) {
beg.x = beg.x + traingle.drictx * (swPadding + switchWidth) * traingle.getCotRate();
beg.y = beg.y + traingle.dricty * (swPadding + switchWidth);
}
this.add(new BezierCurve({
if ((swch.intersection.x === end.x) && (swch.intersection.y === end.y) && swch.normalPosition && swch.sectionCCode == model.code) {
end.x = end.x + traingle.drictx * (swPadding + switchWidth) * traingle.getCotRate();
end.y = end.y + traingle.dricty * (swPadding + switchWidth);
}
}
}
if (model.points.length == 2) {
dataList.push(new Line({
isLine: true,
zlevel: this.zlevel,
progressive: model.progressive,
z: this.z,
culling: true,
shape: shape,
position: model.position,
shape: {
x1: beg.x,
y1: beg.y,
x2: end.x,
y2: end.y
},
style: {
lineWidth: model.style.Section.speedLimit.width,
stroke: model.style.Section.speedLimit.lineColor,
fillOpacity: 0
lineWidth: style.Section.speedLimit.width,
stroke: style.Section.speedLimit.lineColor
}
}));
} else {
const swPadding = model.style.Switch.core.length; // 定位和反位时区段距离岔芯的距离
var switchWidth = model.style.Section.line.width + model.style.Section.line.beyondWidth; // 道岔宽度
const beg = Object.assign({}, model.points[0]);
const end = Object.assign({}, model.points[model.points.length - 1]);
if (model.isSwitchSection && beg.y !== end.y) {
const swch = Vue.prototype.$jlmap.mapDevice[model.switch.code]; // 获取道岔model 及状态数据
if (swch && swch.instance) {
const traingle = new JTriangle(swch.intersection, swch.skew);
if ((swch.intersection.x === beg.x) && (swch.intersection.y === beg.y) && !swch.normalPosition && swch.sectionCCode == model.code) {
beg.x = beg.x + traingle.drictx * (swPadding + switchWidth) * traingle.getCotRate();
beg.y = beg.y + traingle.dricty * (swPadding + switchWidth);
}
if ((swch.intersection.x === end.x) && (swch.intersection.y === end.y) && swch.normalPosition && swch.sectionCCode == model.code) {
end.x = end.x + traingle.drictx * (swPadding + switchWidth) * traingle.getCotRate();
end.y = end.y + traingle.dricty * (swPadding + switchWidth);
}
dataList.push(new Line({
isLine: true,
zlevel: this.zlevel,
progressive: model.progressive,
z: this.z,
position: model.position,
shape: {
x1: beg.x,
y1: beg.y,
x2: model.points[1].x,
y2: model.points[1].y
},
style: {
lineWidth: style.Section.speedLimit.width,
stroke: style.Section.speedLimit.lineColor
}
}
}));
if (model.points.length == 2) {
this.add(new Line({
isLine: true,
zlevel: this.zlevel,
progressive: model.progressive,
z: this.z,
position: model.position,
shape: {
x1: beg.x,
y1: beg.y,
x2: end.x,
y2: end.y
},
style: {
lineWidth: model.style.Section.speedLimit.width,
stroke: model.style.Section.speedLimit.lineColor
}
}));
} else {
this.add(new Line({
isLine: true,
zlevel: this.zlevel,
progressive: model.progressive,
z: this.z,
position: model.position,
shape: {
x1: beg.x,
y1: beg.y,
x2: model.points[1].x,
y2: model.points[1].y
},
style: {
lineWidth: model.style.Section.speedLimit.width,
stroke: model.style.Section.speedLimit.lineColor
}
}));
for (let i = 1; i < (model.points.length - 2); i++) {
this.add(new Line({
isLine: true,
zlevel: this.zlevel,
z: this.z,
progressive: model.progressive,
position: model.position,
shape: {
x1: model.points[i].x,
y1: model.points[i].y,
x2: model.points[i + 1].x,
y2: model.points[i + 1].y
},
style: {
lineWidth: model.style.Section.speedLimit.width,
stroke: model.style.Section.speedLimit.lineColor
}
}));
}
this.add(new Line({
for (let i = 1; i < (model.points.length - 2); i++) {
dataList.push(new Line({
isLine: true,
zlevel: this.zlevel,
z: this.z,
position: model.position,
progressive: model.progressive,
position: model.position,
shape: {
x1: model.points[model.points.length - 2].x,
y1: model.points[model.points.length - 2].y,
x2: end.x,
y2: end.y
x1: model.points[i].x,
y1: model.points[i].y,
x2: model.points[i + 1].x,
y2: model.points[i + 1].y
},
style: {
lineWidth: model.style.Section.speedLimit.width,
stroke: model.style.Section.speedLimit.lineColor
lineWidth: style.Section.speedLimit.width,
stroke: style.Section.speedLimit.lineColor
}
}));
}
dataList.push(new Line({
isLine: true,
zlevel: this.zlevel,
z: this.z,
position: model.position,
progressive: model.progressive,
shape: {
x1: model.points[model.points.length - 2].x,
y1: model.points[model.points.length - 2].y,
x2: end.x,
y2: end.y
},
style: {
lineWidth: style.Section.speedLimit.width,
stroke: style.Section.speedLimit.lineColor
}
}));
}
}
return dataList;
}
hide() {
this.eachChild((child) => {
child.hide();
});
}
show() {
this.eachChild((child) => {
child.show();
});
}
}

183
src/jmapNew/shape/Section/ELimitName.js
View File

@ -1,91 +1,110 @@
// import Path from 'zrender/src/graphic/Path';
// 成都三号线 临时限速名称显示
// export const ELimitName = Path.extend({
// type: 'ELimitName',
// shape: {
// points: null
// },
// buildPath: function (ctx, shape) {
// const points = shape.points;
// const y = points.y - 15;
// ctx.moveTo(points.x, y);
// ctx.lineTo(points.x - shape.drict * shape.style.Section.speedLimit.drogueWidth, y);
// ctx.lineTo(points.x - shape.drict * (shape.style.Section.speedLimit.drogueWidth + 5), y - 5);
// ctx.lineTo(points.x - shape.drict * shape.style.Section.speedLimit.drogueWidth, y - 10);
// ctx.lineTo(points.x, y - 10);
// ctx.lineTo(points.x, y);
// }
// });
import Group from 'zrender/src/container/Group';
import Text from 'zrender/src/graphic/Text';
import Polygon from 'zrender/src/graphic/shape/Polygon';
export default class ELimitName extends Group {
constructor(model) {
super();
this.model = model;
this.zlevel = model.zlevel;
this.z = model.z;
this.create(model);
}
constructor(model) {
super();
this.model = model;
this.zlevel = model.zlevel;
this.z = model.z;
this.create();
}
create(model) {
const rectW = model.style.Section.speedLimit.drogueWidth;
const rectH = model.style.Section.speedLimit.drogueHeight;
this.add(new Polygon({
zlevel: this.zlevel,
z: this.z + 9,
shape: {
points: [
[model.x, model.y],
[model.x - model.drict * rectW, model.y],
[model.x - model.drict * (rectW + rectH / 2), model.y - rectH / 2],
[model.x - model.drict * rectW, model.y - rectH],
[model.x, model.y - rectH]
]
},
style: {
lineWidth: 0,
fill: model.style.Section.speedLimit.nameBackground
}
}));
create() {
/** 创建区段*/
const model = this.model.modelData;
// 开头 起点位置
const speedLimitNameLeft = this.createName({
drict: -1,
x: model.points[0].x,
y: model.points[0].y - 15
});
// 终点位置
const speedLimitNameRight = this.createName({
drict: 1,
x: model.points[model.points.length - 1].x,
y: model.points[model.points.length - 1].y - 15
});
speedLimitNameLeft.forEach(item => {
this.add(item);
});
speedLimitNameRight.forEach(item => {
this.add(item);
});
}
// 公里标内容
this.add(new Text({
zlevel: this.zlevel,
z: this.z + 10,
style: {
x: model.x - model.drict * 2,
y: model.y,
fontWeight: 'normal',
fontSize: model.style.Section.speedLimit.nameNumberFontSize,
fontFamily: model.style.fontFamily,
text: '15',
textFill: model.style.Section.speedLimit.nameNumberColor,
textAlign: model.drict == -1 ? 'left' : 'right',
textPosition: model.style.Section.text.textPosition || 'inside',
textVerticalAlign: 'bottom'
}
}));
createName(model) {
const dataList = [];
const style = this.model.style;
// 公里值
this.add(new Text({
zlevel: this.zlevel,
z: this.z + 10,
style: {
x: model.x,
y: model.y + 12,
fontWeight: 'normal',
fontSize: model.style.Section.speedLimit.kilometerFontSize,
fontFamily: model.style.fontFamily,
text: '17.981km',
textFill: model.style.Section.speedLimit.kilometerColor,
textAlign: model.drict == -1 ? 'left' : 'right',
textPosition: model.style.Section.text.textPosition || 'inside',
textVerticalAlign: 'bottom'
}
}));
}
const rectW = style.Section.speedLimitName.drogueWidth;
const rectH = style.Section.speedLimitName.drogueHeight;
dataList.push(new Polygon({
zlevel: this.zlevel,
z: this.z + 9,
shape: {
points: [
[model.x, model.y],
[model.x - model.drict * rectW, model.y],
[model.x - model.drict * (rectW + rectH / 2), model.y - rectH / 2],
[model.x - model.drict * rectW, model.y - rectH],
[model.x, model.y - rectH]
]
},
style: {
lineWidth: 0,
fill: style.Section.speedLimitName.nameBackground
}
}));
// 公里标内容
dataList.push(new Text({
zlevel: this.zlevel,
z: this.z + 10,
style: {
x: model.x - model.drict * 2,
y: model.y,
fontWeight: 'normal',
fontSize: style.Section.speedLimitName.nameNumberFontSize,
fontFamily: style.fontFamily,
text: '15',
textFill: style.Section.speedLimitName.nameNumberColor,
textAlign: model.drict == -1 ? 'left' : 'right',
textPosition: style.Section.name.textPosition || 'inside',
textVerticalAlign: 'bottom'
}
}));
// 公里值
dataList.push(new Text({
zlevel: this.zlevel,
z: this.z + 10,
style: {
x: model.x,
y: model.y + 12,
fontWeight: 'normal',
fontSize: style.Section.speedLimitName.kilometerFontSize,
fontFamily: style.fontFamily,
text: '17.981km',
textFill: style.Section.speedLimitName.kilometerColor,
textAlign: model.drict == -1 ? 'left' : 'right',
textPosition: style.Section.name.textPosition || 'inside',
textVerticalAlign: 'bottom'
}
}));
return dataList;
}
hide() {
this.eachChild((child) => {
child.hide();
});
}
show() {
this.eachChild((child) => {
child.show();
});
}
}

168
src/jmapNew/shape/Section/ELines.js
View File

@ -12,29 +12,44 @@ export default class ELines extends Group {
this.zlevel = model.zlevel;
this.z = model.z;
this.sections = [];
this.create(model);
this.create();
}
create(model) {
create() {
const model = this.model.modelData;
// 创建区段 model.logicSectionCodeList 为空 或 0 表明没有逻辑区段 创建 否则过滤
if ((model.type == '01' && (!model.logicSectionCodeList || !model.logicSectionCodeList.length)) || model.type == '02' || model.type == '03') {
this.createLine();
}
}
createLine() {
const model = this.model.modelData;
const style = this.model.style;
const Z = model.type == '02' ? this.z + 1 : this.z;
const modelPoints = model.type == '04' ? [model.namePosition, model.namePosition] : model.points;
const isCurve = model.curve;
/** 创建区段*/
if (model && model.points.length > 1) {
if (model && modelPoints.length > 1) {
let stroke;
stroke = model.style.Section.line.spareColor;
if (model.style.Section.line.isActiveShow) {
stroke = '#2EBFBF';
stroke = style.Section.line.spareColor;
if (this.model.type == 'lineBorder') {
stroke = style.Section.lineBorder.activeStroke;
}
if (model.isCurve) {
if (isCurve) {
const shape = {};
for (let i = 1; i < (model.points.length - 1); i++) {
shape[`cpx${i}`] = model.points[i].x;
shape[`cpy${i}`] = model.points[i].y;
for (let i = 1; i < (modelPoints.length - 1); i++) {
shape[`cpx${i}`] = modelPoints[i].x;
shape[`cpy${i}`] = modelPoints[i].y;
}
shape[`x1`] = model.points[0].x;
shape[`y1`] = model.points[0].y;
shape[`x2`] = model.points[model.points.length - 1].x;
shape[`y2`] = model.points[model.points.length - 1].y;
shape[`x1`] = modelPoints[0].x;
shape[`y1`] = modelPoints[0].y;
shape[`x2`] = modelPoints[modelPoints.length - 1].x;
shape[`y2`] = modelPoints[modelPoints.length - 1].y;
this.section = new BezierCurve({
isLine: true,
zlevel: this.zlevel,
@ -44,157 +59,157 @@ export default class ELines extends Group {
culling: false,
shape: shape,
style: {
lineWidth: model.style.Section.line.width,
lineWidth: style.Section.line.width,
stroke: stroke
}
});
this.add(this.section);
} else {
const points = [];
for (let i = 0; i < model.points.length; i++) {
points.push([model.points[i].x, model.points[i].y]);
for (let i = 0; i < modelPoints.length; i++) {
points.push([modelPoints[i].x, modelPoints[i].y]);
}
this.section = new Polyline({
isLine: true,
zlevel: this.zlevel,
progressive: model.progressive,
z: this.z,
z: Z,
shape: {
points: points
},
style: {
lineWidth: model.style.Section.line.width,
lineWidth: style.Section.line.width,
stroke: stroke
}
});
this.add(this.section);
}
if (model.style.Section.topWithLine && !model.isCurve) {
if (style.Section.topWithLine && !isCurve) {
const topPoints = [];
for (let i = 0; i < model.points.length; i++) {
topPoints.push([model.points[i].x, model.points[i].y - model.style.Section.line.width / 2 - model.style.Section.topWithLine.width / 2]);
for (let i = 0; i < modelPoints.length; i++) {
topPoints.push([modelPoints[i].x, modelPoints[i].y - style.Section.line.width / 2 - style.Section.topWithLine.width / 2]);
}
this.topWithSection = new Polyline({
isLine: true,
zlevel: this.zlevel,
progressive: model.progressive,
z: this.z,
z: Z,
shape: {
points: topPoints
},
style: {
lineWidth: model.style.Section.topWithLine.width,
stroke: model.style.Section.topWithLine.defaultColor
lineWidth: style.Section.topWithLine.width,
stroke: style.Section.topWithLine.defaultColor
}
});
this.add(this.topWithSection);
this.topWithSection.hide();
}
if (model.style.Section.bottomWithLine && !model.isCurve) {
if (style.Section.bottomWithLine && !isCurve) {
const bottomPoints = [];
for (let i = 0; i < model.points.length; i++) {
bottomPoints.push([model.points[i].x, model.points[i].y + model.style.Section.line.width / 2 + model.style.Section.bottomWithLine.width / 2]);
for (let i = 0; i < modelPoints.length; i++) {
bottomPoints.push([modelPoints[i].x, modelPoints[i].y + style.Section.line.width / 2 + style.Section.bottomWithLine.width / 2]);
}
this.bottomWithSection = new Polyline({
isLine: true,
zlevel: this.zlevel,
progressive: model.progressive,
z: this.z,
z: Z,
shape: {
points: bottomPoints
},
style: {
lineWidth: model.style.Section.bottomWithLine.width,
stroke: model.style.Section.bottomWithLine.defaultColor
lineWidth: style.Section.bottomWithLine.width,
stroke: style.Section.bottomWithLine.defaultColor
}
});
this.add(this.bottomWithSection);
this.bottomWithSection.hide();
}
if (model.style.Section.routeArrow && !model.isCurve) {
if (style.Section.routeArrow && !isCurve) {
const cPointLeft = {x: 0, y:0};
const cPointRight = {x: 0, y:0};
const pointsLeft = [];
const pointsRight = [];
const length = this.model.points.length;
const triangleLeft = new JTriangle(this.model.points[0], this.model.points[1]);
cPointLeft.x = this.model.points[0].x + triangleLeft.getCos(model.style.Section.routeArrow.radius);
cPointLeft.y = this.model.points[0].y + triangleLeft.getSin(model.style.Section.routeArrow.radius);
const length = modelPoints.length;
const triangleLeft = new JTriangle(modelPoints[0], modelPoints[1]);
cPointLeft.x = modelPoints[0].x + triangleLeft.getCos(style.Section.routeArrow.radius);
cPointLeft.y = modelPoints[0].y + triangleLeft.getSin(style.Section.routeArrow.radius);
for (let i = 0; i < length; i++) {
if (i === 0) {
pointsLeft.push([cPointLeft.x, cPointLeft.y]);
} else {
pointsLeft.push([model.points[i].x, model.points[i].y]);
pointsLeft.push([modelPoints[i].x, modelPoints[i].y]);
}
}
const triangleRight = new JTriangle(this.model.points[length - 2], this.model.points[length - 1 ]);
cPointRight.x = this.model.points[length - 1].x - triangleRight.getCos(model.style.Section.routeArrow.radius);
cPointRight.y = this.model.points[length - 1].y - triangleRight.getSin(model.style.Section.routeArrow.radius);
const triangleRight = new JTriangle(modelPoints[length - 2], modelPoints[length - 1 ]);
cPointRight.x = modelPoints[length - 1].x - triangleRight.getCos(style.Section.routeArrow.radius);
cPointRight.y = modelPoints[length - 1].y - triangleRight.getSin(style.Section.routeArrow.radius);
for (let i = 0; i < length; i++) {
if (i === length - 1) {
pointsRight.push([cPointRight.x, cPointRight.y]);
} else {
pointsRight.push([model.points[i].x, model.points[i].y]);
pointsRight.push([modelPoints[i].x, modelPoints[i].y]);
}
}
this.routeArrowLeft = new Isogon({
zlevel: this.zlevel,
origin: [cPointLeft.x, cPointLeft.y],
rotation: Math.PI / 2 - triangleLeft.getRotation(),
z: this.z + 9,
z: Z + 9,
shape: {
x: cPointLeft.x,
y: cPointLeft.y,
r: model.style.Section.routeArrow.radius,
r: style.Section.routeArrow.radius,
n: 3
},
style: {
lineWidth: model.style.Section.routeArrow.arrowLineWidth,
stroke: model.style.Section.routeArrow.defaultArrowStroke,
fill: model.style.Section.routeArrow.defaultArrowFill
lineWidth: style.Section.routeArrow.arrowLineWidth,
stroke: style.Section.routeArrow.defaultArrowStroke,
fill: style.Section.routeArrow.defaultArrowFill
}
});
this.routeArrowRight = new Isogon({
zlevel: this.zlevel,
origin: [cPointLeft.x, cPointLeft.y],
rotation: -Math.PI / 2 - triangleRight.getRotation(),
z: this.z + 9,
z: Z + 9,
shape: {
x: cPointRight.x,
y: cPointRight.y,
r: model.style.Section.routeArrow.radius,
r: style.Section.routeArrow.radius,
n: 3
},
style: {
lineWidth: model.style.Section.routeArrow.arrowLineWidth,
stroke: model.style.Section.routeArrow.defaultArrowStroke,
fill: model.style.Section.routeArrow.defaultArrowFill
lineWidth: style.Section.routeArrow.arrowLineWidth,
stroke: style.Section.routeArrow.defaultArrowStroke,
fill: style.Section.routeArrow.defaultArrowFill
}
});
this.routeLineLeft = new Polyline({
zlevel: this.zlevel,
progressive: model.progressive,
z: this.z,
z: Z,
shape: {
points: pointsLeft
},
style: {
lineWidth: model.style.Section.routeArrow.lineWidth,
stroke: model.style.Section.routeArrow.defaultLineStroke
lineWidth: style.Section.routeArrow.lineWidth,
stroke: style.Section.routeArrow.defaultLineStroke
}
});
this.routeLineRight = new Polyline({
zlevel: this.zlevel,
progressive: model.progressive,
z: this.z,
z: Z,
shape: {
points: pointsRight
},
style: {
lineWidth: model.style.Section.routeArrow.lineWidth,
stroke: model.style.Section.routeArrow.defaultLineStroke
lineWidth: style.Section.routeArrow.lineWidth,
stroke: style.Section.routeArrow.defaultLineStroke
}
});
this.add(this.routeArrowLeft);
@ -210,21 +225,11 @@ export default class ELines extends Group {
}
setStyle(styles) {
// this.eachChild((child) => {
// if (child.setStyle && child.isLine) {
// child.setStyle(styles);
// }
// });
this.section.setStyle(styles);
this.section && this.section.setStyle(styles);
}
setZleve(lev) {
// this.eachChild((child) => {
// if (child.setStyle && child.isLine) {
// child.attr('z', lev);
// }
// });
this.section.attr('z', lev);
this.section && this.section.attr('z', lev);
}
hide() {
@ -233,24 +238,11 @@ export default class ELines extends Group {
});
}
show() {
// this.eachChild((child) => {
// // console.log(child);
// child.show();
// });
this.section && this.section.show();
}
animateStyle(loop, animates) {
if (animates && animates.length) {
// this.eachChild((child) => {
// if (child.animateStyle && child.isLine) {
// let an = child.animateStyle(loop);
// animates.forEach(elem => {
// an = an.when(elem.time, elem.styles);
// });
// an.start();
// }
// });
if (this.section.animateStyle && this.section.isLine) {
let an = this.section.animateStyle(loop);
animates.forEach(elem => {
@ -356,6 +348,16 @@ export default class ELines extends Group {
this.routeArrowRight && this.routeArrowRight.setStyle({ fill: this.model.style.Section.routeArrow.defaultLineStroke });
}
getBoundingRect() {
return this.section.getBoundingRect().clone();
if (this.section) {
return this.section.getBoundingRect().clone();
}
}
recover() {
}
setState() {
}
}

104
src/jmapNew/shape/Section/EMouse.js
View File

@ -15,62 +15,66 @@ class EMouse extends Group {
// 名称的包围框
if (this.device.name && this.device.style.Section.mouseOverStyle.nameShow) {
const rect = this.device.name.getBoundingRect();
this.sectionTextBorder = new Rect({
zlevel: this.device.zlevel,
z: this.device.z + 4,
shape: rect,
style: {
lineDash: [3, 3],
stroke: '#fff', // 白色
fill: this.device.model.sectionType == '02' ? this.device.style.Section.line.logicalColor : '#00FFFF' // 蓝色
}
});
this.add(this.sectionTextBorder);
this.sectionTextBorder.hide();
if (rect) {
this.sectionTextBorder = new Rect({
zlevel: this.device.zlevel,
z: this.device.z + 4,
shape: rect,
style: {
lineDash: [3, 3],
stroke: '#fff', // 白色
fill: this.device.model.sectionType == '02' ? this.device.style.Section.line.logicalColor : '#00FFFF' // 蓝色
}
});
this.add(this.sectionTextBorder);
this.sectionTextBorder.hide();
const fontSize = this.device.model.type == '02' ? this.device.style.Section.text.fontSize + 2 : this.device.style.Section.text.fontSize;
this.TextName = new Text({
zlevel: this.device.zlevel,
z: this.device.z + 4,
style: {
x: rect.x + (rect.width / 2),
y: rect.y + (rect.height / 2),
fontWeight: 'normal',
fontSize: fontSize,
fontFamily: this.device.style.fontFamily,
text: this.device.model.name,
textFill: '#000',
textAlign: this.device.style.Section.text.textAlign,
textPosition: this.device.style.Section.text.textPosition || 'inside',
textVerticalAlign: this.device.style.Section.text.textVerticalAlign || null
}
});
this.add(this.TextName);
this.TextName.hide();
const fontSize = this.device.model.type == '02' ? this.device.style.Section.name.fontSize + 2 : this.device.style.Section.name.fontSize;
this.TextName = new Text({
zlevel: this.device.zlevel,
z: this.device.z + 4,
style: {
x: rect.x + (rect.width / 2),
y: rect.y + (rect.height / 2),
fontWeight: 'normal',
fontSize: fontSize,
fontFamily: this.device.style.fontFamily,
text: this.device.model.name,
textFill: '#000',
textAlign: this.device.style.Section.name.textAlign,
textPosition: this.device.style.Section.name.textPosition || 'inside',
textVerticalAlign: this.device.style.Section.name.textVerticalAlign || null
}
});
this.add(this.TextName);
this.TextName.hide();
}
}
// 区段包围框
if (this.device.section) {
if (this.device.model.curve) {
const rect = this.device.section.getBoundingRect();
rect.height = rect.height + this.device.style.Section.mouseOverStyle.lineWidthMore;
const shape = {
x: rect.x,
y: rect.y - this.device.style.Section.mouseOverStyle.lineWidthMore / 2,
width: rect.width,
height: rect.height
};
this.lineBorder = new Rect({
zlevel: this.device.zlevel,
z: this.device.z - 1,
shape: shape,
style: {
lineDash: this.device.style.Section.mouseOverStyle.lineDash,
stroke: this.device.style.Section.mouseOverStyle.borderColor,
fill: this.device.style.transparentColor
}
});
this.add(this.lineBorder);
this.lineBorder.hide();
if (rect) {
rect.height = rect.height + this.device.style.Section.mouseOverStyle.lineWidthMore;
const shape = {
x: rect.x,
y: rect.y - this.device.style.Section.mouseOverStyle.lineWidthMore / 2,
width: rect.width,
height: rect.height
};
this.lineBorder = new Rect({
zlevel: this.device.zlevel,
z: this.device.z - 1,
shape: shape,
style: {
lineDash: this.device.style.Section.mouseOverStyle.lineDash,
stroke: this.device.style.Section.mouseOverStyle.borderColor,
fill: this.device.style.transparentColor
}
});
this.add(this.lineBorder);
this.lineBorder.hide();
}
} else {
const model = this.device.model;
let points = [];

72
src/jmapNew/shape/Section/ERelease.js
View File

@ -1,72 +0,0 @@
import Group from 'zrender/src/container/Group';
import Line from 'zrender/src/graphic/shape/Line';
/** 延时释放*/
export default class ERelease extends Group {
constructor(model) {
super();
this.model = model;
this.isNew = false;
}
create() {
if (!this.isNew) {
const model = this.model;
this.isNew = true;
this.lines = new Line({
zlevel: model.zlevel,
z: model.z,
shape: model.shape,
progressive: model.progressive,
style: {
lineWidth: model.lineWidth,
stroke: model.stroke
}
});
this.add(this.lines);
}
}
setStyle(model) {
this.create();
this.lines.setStyle(model);
}
hide() {
this.create();
this.lines.hide();
}
show() {
this.create();
this.lines.show();
}
// 开始动画
animateStyle(loop, animates) {
this.create();
if (animates && animates.length) {
this.eachChild((child) => {
if (child.animateStyle) {
let an = child.animateStyle(loop);
animates.forEach(elem => {
an = an.when(elem.time, elem.styles);
});
an.start();
}
});
}
}
// 结束动画
stopAnimation(flag) {
this.create();
this.eachChild((child) => {
if (child.stopAnimation) {
child.stopAnimation(flag);
}
});
}
}

123
src/jmapNew/shape/Section/ESeparator.js
View File

@ -1,6 +1,7 @@
import Group from 'zrender/src/container/Group';
import Polyline from 'zrender/src/graphic/shape/Polyline';
import Circle from 'zrender/src/graphic/shape/Circle';
import JTriangle from '../../utils/JTriangle';
/** 分隔符*/
export default class ESeparator extends Group {
@ -10,15 +11,48 @@ export default class ESeparator extends Group {
this.zlevel = model.zlevel;
this.z = model.z || 6;
this.style = model.style;
this.setType();
this.create();
}
createModel(points, lineWidth, stroke) {
const model = this.model;
this.partition = new Polyline({
create() {
/** 创建区段*/
const model = this.model.modelData;
const style = this.model.style;
if (model && style && model.points && model.points.length > 1) {
/** 创建左侧分隔符*/
const traingleLeft = new JTriangle(model.points[0], model.points[1]);
this.lPartition = this.setType({
traingle: traingleLeft,
point: {
x: model.points[0].x,
y: model.points[0].y
},
sepType: model.sepTypeLeft,
drict: -1 // 方向
});
/** 创建右侧分隔符*/
const traingleRight = new JTriangle(model.points[model.points.length - 2], model.points[model.points.length - 1]);
this.rPartition = this.setType({
traingle: traingleRight,
point: {
x: model.points[model.points.length - 1].x,
y: model.points[model.points.length - 1].y
},
sepType: model.sepTypeRight,
drict: 1 // 方向
});
this.add(this.lPartition);
this.add(this.rPartition);
}
}
createModel(modelData, points, lineWidth, stroke) {
const partition = new Polyline({
zlevel: this.zlevel,
progressive: model.progressive,
z: this.z,
origin: [modelData.point.x, modelData.point.y],
rotation: Math.PI * 2 - Math.atan2(modelData.traingle.absy, modelData.traingle.absx) * modelData.traingle.drictx * modelData.traingle.dricty,
shape: {
points: points
},
@ -27,19 +61,19 @@ export default class ESeparator extends Group {
stroke: stroke || this.style.Section.separator.color
}
});
this.add(this.partition);
return partition;
}
// 创建 侵限分隔符
createCircle() {
const model = this.model;
this.circle = new Circle({
createCircle(modelData) {
const partition = new Circle({
zlevel: this.zlevel,
z: this.z,
progressive: model.progressive,
origin: [modelData.point.x, modelData.point.y],
rotation: Math.PI * 2 - Math.atan2(modelData.traingle.absy, modelData.traingle.absx) * modelData.traingle.drictx * modelData.traingle.dricty,
shape: {
cx: model.point.x,
cy: model.point.y,
cx: modelData.point.x,
cy: modelData.point.y,
r: this.style.Section.line.width
},
style: {
@ -48,18 +82,18 @@ export default class ESeparator extends Group {
fill: this.style.transparentColor
}
});
this.add(this.circle);
return partition;
}
createCircleArc() {
const model = this.model;
this.circleArc = new Circle({
createCircleArc(modelData) {
const partition = new Circle({
zlevel: this.zlevel,
z: this.z,
progressive: model.progressive,
origin: [modelData.point.x, modelData.point.y],
rotation: Math.PI * 2 - Math.atan2(modelData.traingle.absy, modelData.traingle.absx) * modelData.traingle.drictx * modelData.traingle.dricty,
shape: {
cx: model.point.x,
cy: model.point.y,
cx: modelData.point.x,
cy: modelData.point.y,
r: this.style.Section.line.width + 2
},
style: {
@ -68,47 +102,44 @@ export default class ESeparator extends Group {
fill: this.style.transparentColor
}
});
this.add(this.circleArc);
return partition;
}
setType() {
const type = this.model.sepType;
const model = this.model;
if (model && this.style && model.traingle) {
setType(modelData) {
const style = this.model.style;
const type = modelData.sepType;
if (modelData && style && modelData.traingle) {
let partition = null;
if (type === '01') { // 普通分割
const points = [
[model.point.x, model.point.y - (this.style.Section.separator.halfHeight)],
[model.point.x, model.point.y + (this.style.Section.separator.halfHeight)]
[modelData.point.x, modelData.point.y - (style.Section.separator.halfHeight)],
[modelData.point.x, modelData.point.y + (style.Section.separator.halfHeight)]
];
this.createModel(points);
partition = this.createModel(modelData, points);
} else if (type === '02') { // 单侧分割符
const points = [
[model.point.x + model.drict * (this.style.Section.separator.halfHeight), model.point.y - (this.style.Section.separator.halfHeight * 1.5)],
[model.point.x, model.point.y - (this.style.Section.separator.halfHeight * 1.5)],
[model.point.x, model.point.y + (this.style.Section.separator.halfHeight * 1.5)]
[modelData.point.x + modelData.drict * (style.Section.separator.halfHeight), modelData.point.y - (style.Section.separator.halfHeight * 1.5)],
[modelData.point.x, modelData.point.y - (style.Section.separator.halfHeight * 1.5)],
[modelData.point.x, modelData.point.y + (style.Section.separator.halfHeight * 1.5)]
];
this.createModel(points);
partition = this.createModel(modelData, points);
} else if (type === '03') { // 尽头分隔符
const points = [
[model.point.x + model.drict * (this.style.Section.separator.halfHeight) * 1.2, model.point.y - (this.style.Section.separator.halfHeight * 1.2)],
[model.point.x, model.point.y - (this.style.Section.separator.halfHeight * 1.2)],
[model.point.x, model.point.y + (this.style.Section.separator.halfHeight * 1.2)],
[model.point.x + model.drict * (this.style.Section.separator.halfHeight) * 1.2, model.point.y + (this.style.Section.separator.halfHeight * 1.2)]
[modelData.point.x + modelData.drict * (style.Section.separator.halfHeight) * 1.2, modelData.point.y - (style.Section.separator.halfHeight * 1.2)],
[modelData.point.x, modelData.point.y - (style.Section.separator.halfHeight * 1.2)],
[modelData.point.x, modelData.point.y + (style.Section.separator.halfHeight * 1.2)],
[modelData.point.x + modelData.drict * (style.Section.separator.halfHeight) * 1.2, modelData.point.y + (style.Section.separator.halfHeight * 1.2)]
];
const lineWidth = this.style.Section.separator.endWidth;
const stroke = this.style.Section.separator.endColor;
this.createModel(points, lineWidth, stroke);
const lineWidth = style.Section.separator.endWidth;
const stroke = style.Section.separator.endColor;
partition = this.createModel(modelData, points, lineWidth, stroke);
} else if (type === '04') { // 侵限分隔符
this.createCircle();
partition = this.createCircle(modelData);
} else if (type === '05') { // 特色分隔符
this.createCircleArc();
partition = this.createCircleArc(modelData);
}
}
if (model.traingle) {
this.origin = [model.point.x, model.point.y];
this.rotation = Math.PI * 2 - Math.atan2(model.traingle.absy, model.traingle.absx) * model.traingle.drictx * model.traingle.dricty;
this.dirty(); // 可以无需调用
return partition;
}
}
}

68
src/jmapNew/shape/Section/EStopRouteImg.js
View File

@ -14,39 +14,51 @@ export default class EStopRouteImg extends Group {
this.create();
}
create() {
const image = new Image(5, 8);
image.src = Stop_Route;
image.decode()
.then(() => {
const pattern = new Pattern(image, 'repeat');
for (let i = 1; i < this.model.points.length; i++) {
const triangle = new JTriangle(this.model.points[i - 1], this.model.points[i]);
this.stopRouteImgList.push(new Rect({
zlevel: this.zlevel,
z: this.z + 1,
origin: [this.model.points[i - 1].x, this.model.points[i - 1].y],
rotation: -triangle.getRotation(),
shape: {
x: this.model.points[i - 1].x,
y: this.model.points[i - 1].y - this.model.style.Section.line.width / 2,
width: triangle.getLength(),
height: this.model.style.Section.line.width
},
style: {
fill: pattern
}
}));
}
this.stopRouteImgList.forEach(item => {
this.add(item);
item.hide();
const model = this.model.modelData;
const style = this.model.style;
const modelPoints = model.points;
if (model.type !== '04') {
const image = new Image(5, 8);
image.src = Stop_Route;
image.decode()
.then(() => {
const pattern = new Pattern(image, 'repeat');
for (let i = 1; i < modelPoints.length; i++) {
const triangle = new JTriangle(modelPoints[i - 1], modelPoints[i]);
this.stopRouteImgList.push(new Rect({
zlevel: this.zlevel,
z: this.z + 1,
origin: [modelPoints[i - 1].x, modelPoints[i - 1].y],
rotation: -triangle.getRotation(),
shape: {
x: modelPoints[i - 1].x,
y: modelPoints[i - 1].y - style.Section.line.width / 2,
width: triangle.getLength(),
height: style.Section.line.width
},
style: {
fill: pattern
}
}));
}
this.stopRouteImgList.forEach(item => {
this.add(item);
item.hide();
});
});
});
}
}
setModel(dx, dy) {
}
setCursor(mouseStyle) {
this.imageBg.attr('cursor', mouseStyle);
}
recover() {
}
setState() {
}
}

163
src/jmapNew/shape/Section/ETextName.js Normal file
View File

@ -0,0 +1,163 @@
import Group from 'zrender/src/container/Group';
import Text from 'zrender/src/graphic/Text';
import JTriangle from '../../utils/JTriangle';
class ETextName extends Group {
constructor(model) {
super();
this.model = model;
this.create();
}
create() {
const model = this.model.modelData;
const styleModel = this.model.style.Section[this.model.type];
let styleX = '';
let styleY = '';
let styleName = '';
let isCreate = false;
let isShow = false;
// 计算区段坐标位置
const x = Math.min(model.points[0].x, model.points[model.points.length - 1].x) + Math.abs(model.points[model.points.length - 1].x - model.points[0].x) / 2;
const y = Math.min(model.points[0].y, model.points[model.points.length - 1].y) + Math.abs(model.points[model.points.length - 1].y - model.points[0].y) / 2;
const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]);
const drict = model.trainPosType != '01' ? 1 : -1;
if (this.model.type == 'name') {
if (model.type == '01') { // 物理区段名称
const tempx = x + traingle.getSin(styleModel.distance);
const tempy = y + traingle.getCos(styleModel.distance) * (styleModel.position || drict);
styleX = tempx + model.namePosition.x;
styleY = tempy + model.namePosition.y;
isCreate = true;
} else if (model.type == '04') { // 道岔计轴区段
styleX = x + model.namePosition.x;
styleY = y + model.namePosition.y + styleModel.distance * drict;
isCreate = true;
}
styleName = model.name;
if (model.nameShow) {
isShow = true;
}
}
// 逻辑区段
if (this.model.type == 'logicText' && model.type == '02') {
const tempx = x + traingle.getSin(styleModel.distance);
const tempy = y + traingle.getCos(styleModel.distance) * (styleModel.position || drict);
styleX = tempx + model.namePosition.x;
styleY = tempy + model.namePosition.y;
styleName = model.name;
isCreate = true;
if (model.nameShow) {
isShow = true;
}
}
// 站台轨名称
if (this.model.type == 'standTrackText') {
if (model.standTrack && model.standTrackName) {
isCreate = true;
const tempx = x + traingle.getSin(styleModel.distance);
const tempy = y + traingle.getCos(styleModel.distance) * (styleModel.position || drict);
styleX = tempx + model.standTrackNamePosition.x;
styleY = tempy + model.standTrackNamePosition.y;
styleName = model.standTrackName;
}
if (model.standTrackNameShow) {
isShow = true;
}
}
// 折返轨名称
if (this.model.type == 'reentryTrackText') {
if (model.reentryTrack && model.reentryTrackName) {
isCreate = true;
const tempx = x + traingle.getSin(styleModel.distance);
const tempy = y + traingle.getCos(styleModel.distance) * (styleModel.position || drict);
styleX = tempx + model.reentryTrackNamePosition.x;
styleY = tempy + model.reentryTrackNamePosition.y;
styleName = model.reentryTrackName;
}
if (model.reentryTrackNameShow) {
isShow = true;
}
}
// 转换轨名称
if (this.model.type == 'transferTrackText') {
if (model.transferTrack && model.transferTrackName) {
isCreate = true;
const tempx = x + traingle.getSin(styleModel.distance);
const tempy = y + traingle.getCos(styleModel.distance) * (styleModel.position || drict);
styleX = tempx + model.transferTrackNamePosition.x;
styleY = tempy + model.transferTrackNamePosition.y;
styleName = model.transferTrackName;
}
if (model.transferTrackNameShow) {
isShow = true;
}
}
// 目的码名称
if (this.model.type == 'destinationText') {
if (model.destinationCode) {
isCreate = true;
let tempx = x + traingle.getSin(styleModel.distance);
let tempy = y + traingle.getCos(styleModel.distance) * (styleModel.position || drict);
if (!tempx || !tempy) {
tempx = 0;
tempy = 0;
}
styleX = tempx + model.destinationCodePoint.x;
styleY = tempy + model.destinationCodePoint.y;
styleName = model.destinationCode;
}
if (model.destinationNameShow) {
isShow = true;
}
}
if (isCreate) {
this.text = new Text({
_subType: 'Text',
zlevel: this.model.zlevel,
z: this.model.z,
silent: model.silent || false,
style: {
x: styleX,
y: styleY,
fontWeight: styleModel.fontWeight || 'normal',
fontSize: styleModel.fontSize,
fontFamily: styleModel.fontFamily || this.model.style.fontFamily,
text: styleName,
textFill: styleModel.fontColor,
textAlign: styleModel.textAlign,
textPosition: styleModel.textPosition || 'inside',
textVerticalAlign: styleModel.textVerticalAlign || null
}
});
this.add(this.text);
isShow ? this.text.show() : this.text.hide();
}
}
show() {
this.text && this.text.show();
}
hide() {
this.text && this.text.hide();
}
getBoundingRect() {
if (this.text) {
return this.text.getBoundingRect().clone();
}
}
recover() {
// 暂时不做状态初始化
}
setState() {
// 区段名称类暂时不做状态处理
}
}
export default ETextName;

26
src/jmapNew/shape/Section/EblockLines.js
View File

@ -16,13 +16,17 @@ export default class ELines extends Group {
this.model = model;
this.zlevel = model.zlevel;
this.z = model.z;
this.create(model);
this.create();
}
create(model) {
create() {
/** 创建区段*/
const model = this.model.modelData;
const style = this.model.style;
const isCurve = model.curve;
if (model && model.points.length > 1) {
if (model.isCurve) { // 曲线 用贝塞尔曲线绘图 封锁 必须4个点来绘图
if (isCurve) { // 曲线 用贝塞尔曲线绘图 封锁 必须4个点来绘图
const shape = {};
for (let i = 1; i < (model.points.length - 1); i++) {
shape[`cpx${i}`] = model.points[i].x;
@ -41,8 +45,8 @@ export default class ELines extends Group {
culling: true,
shape: this.couvert(shape),
style: {
lineWidth: model.style.Section.line.width,
stroke: model.style.Section.line.blockColor,
lineWidth: style.Section.line.width,
stroke: style.Section.line.blockColor,
fillOpacity: 0
}
});
@ -63,8 +67,8 @@ export default class ELines extends Group {
y2: model.points[0].y + spaceY + spaceY
},
style: {
lineWidth: model.style.Section.line.width,
stroke: model.style.Section.line.blockColor
lineWidth: style.Section.line.width,
stroke: style.Section.line.blockColor
}
});
this.add(this.sectionM);
@ -183,4 +187,12 @@ export default class ELines extends Group {
cpy1: (cpy1 + cpy2) / 2 + v[0] * y0 * 0.128
};
}
recover() {
}
setState() {
}
}

790
src/jmapNew/shape/Section/index.js
View File

@ -1,15 +1,15 @@
import Group from 'zrender/src/container/Group';
import ETextName from '../element/ETextName'; // 名称文字 (共有)
// import ERelease from './ERelease'; // 线段 (共有)
import ETextName from './ETextName'; // 名称文字
import ELimitLines from './ELimitLines'; // 区段限速 (私有)
import ELines from './ELines'; // 创建多线条 曲线 (私有)
import EblockLines from './EblockLines'; // 区段封锁特有
import ESeparator from './ESeparator'; // 分隔符 (私有)
import EMouse from './EMouse';
import EAxle from './EAxle'; // 创建计轴
import { EBackArrow, EBackArrowTriangle } from './EBackArrow'; // 折返进路箭头
// import { EBackArrow, EBackArrowTriangle } from './EBackArrow'; // 折返进路箭头
import EBackArrowGroup from './EBackArrow'; // 折返进路箭头
import ELimitName from './ELimitName'; // 成都三号线 限速名称
import JTriangle from '../../utils/JTriangle';
// import JTriangle from '../../utils/JTriangle';
import { drawSectionStyle } from '../../config/defaultStyle';
import EStopRouteImg from './EStopRouteImg';
import store from '@/store/index_APP_TARGET';
@ -35,556 +35,67 @@ export default class Section extends Group {
create() {
// 区段type 01计轴区段；02逻辑区段；03道岔区段 04道岔计轴区段
this.createSectionText(); // 创建区段文字
this.createSection(); // 创建区段
// this.creatRelease(); // 创建延时释放
this.createSeparator(); // 创建分隔符
this.createTurnBack(); // 创建成都三号线 折返箭头
this.createAxlex(); // 创建计轴 （西安二号线）
this.createReleaseText(); // 创建延迟解锁计时
}
// 创建计轴
createAxlex() {
if (this.style.Section.axle.show) {
const length = this.model.points.length;
const traingleStart = new JTriangle(this.model.points[0], this.model.points[1]);
const traingleEnd = new JTriangle(this.model.points[length - 2], this.model.points[length - 1]);
if (this.model.leftAxlePosition) {
const leftPoint = {x:this.model.points[0].x, y: this.model.points[0].y};
if (this.model.leftAxleOffset) {
leftPoint.x = leftPoint.x + this.model.leftAxleOffset.x || 0;
leftPoint.y = leftPoint.y + this.model.leftAxleOffset.y || 0;
}
this.leftAxle = new EAxle({
_subType: 'leftAxle',
zlevel: this.zlevel,
z: this.z,
shape: {
style: this.style,
traingle: traingleStart,
drictx: 1,
dricty: this.model.leftAxlePosition === 1 || this.model.leftAxlePosition === 2 ? 1 : -1,
isSpecial: this.model.leftAxlePosition === -2 || this.model.leftAxlePosition === 2,
point: leftPoint,
difference: this.model.points[0].y - this.model.points[1].y,
multiple: 1
},
style: {
lineWidth: this.style.Section.axle.lineWidth,
fill: this.style.Section.axle.color,
stroke: this.style.Section.axle.color
}
});
this.add(this.leftAxle);
}
if (this.model.rightAxlePosition) {
const rightPoint = {x:this.model.points[length - 1].x, y: this.model.points[length - 1].y};
if (this.model.rightAxleOffset) {
rightPoint.x = rightPoint.x + this.model.rightAxleOffset.x || 0;
rightPoint.y = rightPoint.y + this.model.rightAxleOffset.y || 0;
}
this.rightAxle = new EAxle({
_subType: 'rightAxle',
zlevel: this.zlevel,
z: this.z,
shape: {
style: this.style,
traingle: traingleEnd,
drictx: -1,
dricty: this.model.rightAxlePosition === 1 || this.model.rightAxlePosition === 2 ? 1 : -1,
isSpecial: this.model.rightAxlePosition === -2 || this.model.rightAxlePosition === 2,
point: rightPoint,
difference: this.model.points[length - 2].y - this.model.points[length - 1].y,
multiple1: -1
},
style: {
lineWidth: this.style.Section.axle.lineWidth,
fill: this.style.Section.axle.color,
stroke: this.style.Section.axle.color
}
});
this.add(this.rightAxle);
}
}
}
// 创建区段名称
createSectionText() {
// 站台所有的绘图元素
const elementTypeList = {
'name': ETextName, // 区段名称
'logicText': ETextName, // 逻辑区段名称
'standTrackText': ETextName, // 站台轨名称
'reentryTrackText': ETextName, // 折返轨名称
'transferTrackText': ETextName, // 转换轨名称
'destinationText': ETextName, // 目的码名称
'line': ELines, // 创建区段
'lineBorder': ELines, // 哈尔滨线路点击背景色
'sectionBlock': EblockLines, // 哈尔滨线路区段（封锁显示）
'stopRouteImg': EStopRouteImg, // 宁波三线路特有
'axle': EAxle, // 计轴 (西安二号线 )
'separator': ESeparator, // 分隔符
'speedLimit': ELimitLines, // 限速线
'speedLimitName': ELimitName, // 限速线名称
'shuttleBack': EBackArrowGroup // 折返箭头 (成都三号线显示)
};
// 遍历当前线路下的绘图元素
const model = this.model;
const style = this.style;
if (model && style) {
// 计算区段坐标位置
const x = Math.min(model.points[0].x, model.points[model.points.length - 1].x) + Math.abs(model.points[model.points.length - 1].x - model.points[0].x) / 2;
const y = Math.min(model.points[0].y, model.points[model.points.length - 1].y) + Math.abs(model.points[model.points.length - 1].y - model.points[0].y) / 2;
const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]);
const drict = model.trainPosType != '01' ? 1 : -1;
if (model.type == '01') { // 物理区段名称
const tempx = x + traingle.getSin(style.Section.text.distance);
const tempy = y + traingle.getCos(style.Section.text.distance) * (style.Section.text.position || drict);
this.name = new ETextName({
zlevel: this.zlevel,
z: this.z + 2,
style: this.style,
silent: false,
x: tempx + model.namePosition.x,
y: tempy + model.namePosition.y,
fontWeight: style.Section.text.fontWeight,
fontSize: style.Section.text.fontSize,
fontFamily: style.fontFamily,
text: model.name,
textFill: style.Section.text.fontColor,
textAlign: style.Section.text.textAlign,
textPosition: style.Section.text.textPosition,
textVerticalAlign: style.Section.text.textVerticalAlign
});
this.add(this.name);
model.nameShow && style.Section.text.show ? this.name.show() : this.name.hide();
} else if (model.type == '02') { // 逻辑区段
const tempx = x + traingle.getSin(style.Section.logicText.distance);
const tempy = y + traingle.getCos(style.Section.logicText.distance) * (style.Section.logicText.position || drict);
this.name = new ETextName({
zlevel: this.zlevel,
z: this.z + 2,
style: this.style,
silent: false,
x: tempx + model.namePosition.x,
y: tempy + model.namePosition.y,
fontWeight: style.Section.logicText.fontWeight,
fontSize: style.Section.logicText.fontSize,
fontFamily: style.fontFamily,
text: model.name,
textFill: style.Section.logicText.fontColor,
textAlign: style.Section.logicText.textAlign,
textPosition: style.Section.logicText.textPosition,
textVerticalAlign: style.Section.logicText.textVerticalAlign
});
this.add(this.name);
model.nameShow && style.Section.logicText.show ? this.name.show() : this.name.hide();
} else if (model.type == '04') { // 道岔计轴区段
this.name = new ETextName({
zlevel: this.zlevel,
z: this.z + 2,
style: this.style,
silent: false,
x: x + model.namePosition.x,
y: y + model.namePosition.y + style.Section.text.distance * drict,
fontWeight: style.Section.text.fontWeight,
fontSize: style.Section.text.fontSize,
fontFamily: style.fontFamily,
text: model.name,
textFill: style.Section.text.fontColor,
textAlign: style.Section.text.textAlign,
textPosition: style.Section.text.textPosition,
textVerticalAlign: style.Section.text.textVerticalAlign
});
this.add(this.name);
model.nameShow ? this.name.show() : this.name.hide();
}
/** 站台轨名称*/
// 站台轨存在且站台轨名称存在时显示
if (model.standTrack && model.standTrackName) {
const tempx = x + traingle.getSin(style.Section.standText.distance);
const tempy = y + traingle.getCos(style.Section.standText.distance) * (style.Section.standText.position || drict);
this.standTrackText = new ETextName({
zlevel: this.zlevel,
z: this.z + 2,
silent: false,
x: tempx + model.standTrackNamePosition.x,
y: tempy + model.standTrackNamePosition.y,
fontWeight: style.Section.standText.fontWeight,
fontSize: style.Section.standText.fontSize,
fontFamily: style.fontFamily,
text: model.standTrackName,
textFill: style.Section.standText.fontColor,
textAlign: style.Section.standText.textAlign,
textPosition: style.Section.standText.textPosition,
textVerticalAlign: style.Section.standText.textVerticalAlign
});
this.add(this.standTrackText);
model.standTrackNameShow && style.Section.standText.show ? this.standTrackText.show() : this.standTrackText.hide();
}
/** 折返轨名称*/
// 折返轨存在且折返轨名称存在时显示
if (model.reentryTrack && model.reentryTrackName) {
const tempx = x + traingle.getSin(style.Section.reentryText.distance);
const tempy = y + traingle.getCos(style.Section.reentryText.distance) * (style.Section.reentryText.position || drict);
this.reentryTrackText = new ETextName({
zlevel: this.zlevel,
z: this.z + 2,
silent: false,
x: tempx + model.reentryTrackNamePosition.x,
y: tempy + model.reentryTrackNamePosition.y,
fontWeight: style.Section.reentryText.fontWeight,
fontSize: style.Section.reentryText.fontSize,
fontFamily: style.fontFamily,
text: model.reentryTrackName,
textFill: style.Section.reentryText.fontColor,
textAlign: style.Section.reentryText.textAlign,
textPosition: style.Section.reentryText.textPosition,
textVerticalAlign: style.Section.reentryText.textVerticalAlign
});
this.add(this.reentryTrackText);
model.reentryTrackNameShow && style.Section.reentryText.show ? this.reentryTrackText.show() : this.reentryTrackText.hide();
}
/** 转换轨名称*/
// 转换轨存在且转换轨名称存在时显示
if (model.transferTrack && model.transferTrackName) {
const tempx = x + traingle.getSin(style.Section.transferText.distance);
const tempy = y + traingle.getCos(style.Section.transferText.distance) * (style.Section.transferText.position || drict);
this.transferTrackText = new ETextName({
zlevel: this.zlevel,
z: this.z + 2,
silent: false,
x: tempx + model.transferTrackNamePosition.x,
y: tempy + model.transferTrackNamePosition.y,
fontWeight: style.Section.transferText.fontWeight,
fontSize: style.Section.transferText.fontSize,
fontFamily: style.fontFamily,
text: model.transferTrackName,
textFill: style.Section.transferText.fontColor,
textAlign: style.Section.transferText.textAlign,
textPosition: style.Section.transferText.textPosition,
textVerticalAlign: style.Section.transferText.textVerticalAlign
});
this.add(this.transferTrackText);
model.transferTrackNameShow && style.Section.transferText.show ? this.transferTrackText.show() : this.transferTrackText.hide();
}
/** 目的码名称*/
// 目的码存在且目的码名称存在时显示
if (model.destinationCode) {
let tempx = x + traingle.getSin(style.Section.destinationText.distance);
let tempy = y + traingle.getCos(style.Section.destinationText.distance) * (style.Section.destinationText.position || drict);
if (!tempx || !tempy) {
tempx = 0;
tempy = 0;
}
this.destinationText = new ETextName({
zlevel: this.zlevel,
z: this.z + 2,
silent: false,
x: tempx + model.destinationCodePoint.x,
y: tempy + model.destinationCodePoint.y,
fontWeight: style.Section.destinationText.fontWeight,
fontSize: style.Section.destinationText.fontSize,
fontFamily: style.fontFamily,
text: model.destinationCode,
textFill: style.Section.destinationText.fontColor,
textAlign: style.Section.destinationText.textAlign,
textPosition: style.Section.destinationText.textPosition,
textVerticalAlign: style.Section.destinationText.textVerticalAlign
});
this.add(this.destinationText);
model.destinationNameShow && style.Section.destinationText.show ? this.destinationText.show() : this.destinationText.hide();
}
}
}
/** 创建区段*/
createSection() {
const model = this.model;
const style = this.style;
// 创建区段 model.logicSectionCodeList 为空 或 0 表明没有逻辑区段 创建 否则过滤
if ((model.type == '01' && (!model.logicSectionCodeList || !model.logicSectionCodeList.length)) || model.type == '02' || model.type == '03') {
this.section = new ELines({
const currentTypeList = style.Section.elemnetType;
currentTypeList.forEach(element => {
const ClassName = elementTypeList[element];
const elementZ = style.Section[element] ? style.Section[element].z ? style.Section[element].z : 0 : 0;
this[element] = new ClassName({
zlevel: this.zlevel,
z: model.type == '02' ? this.z + 1 : this.z, // 逻辑区段会覆盖物理区段
isSwitchSection: model.switchSection,
isCurve: model.curve,
points: model.type == '04' ? [model.namePosition, model.namePosition] : model.points,
style: style
});
this.add(this.section);
if (this.style.Section.block.special) { // 创建哈尔滨特殊区段（用作封锁显示）
this.sectionBlock = new EblockLines({
zlevel: this.zlevel,
z: this.z + 2,
isSwitchSection: model.switchSection,
isCurve: model.curve,
points: model.points,
style: style
});
this.add(this.sectionBlock);
}
if (this.style.Section.line.isActiveShow) { // 哈尔滨线路点击背景色
this.lineBorder = new ELines({
zlevel: this.zlevel,
z: this.z - 1,
isSwitchSection: model.switchSection,
isCurve: model.curve,
points: model.type == '04' ? [model.namePosition, model.namePosition] : model.points,
style: style
});
this.add(this.lineBorder);
this.lineBorder.setStyle({ lineWidth: 0 });
}
if (this.style.Section.stopRouteImg && model.type !== '04') {
this.stopRouteImg = new EStopRouteImg({
zlevel: this.zlevel,
z: this.z,
points: model.points,
style:style
});
this.add(this.stopRouteImg);
}
}
}
// 折返箭头
createTurnBack() {
const model = this.model;
const style = this.style;
if (model.reentryTrack && style.Section.shuttleBack) {
const radius = 3;
model.drict = 1; // 箭头朝向 (是折返轨加一个方向选择) 目前在区段右边
const width = style.Section.line.width * 2;
const height = style.Section.line.width * 1;
const turnBackDistance = style.Section.shuttleBack.distance + radius * 4;
const points = model.points;
let x = -model.drict * width * 1.2;
let y = -turnBackDistance;
if (model.drict < 0) {
x += points[0].x;
y += points[0].y;
} else {
x += points[points.length - 1].x;
y += points[points.length - 1].y;
}
this.turnBack = new EBackArrow({
zlevel: this.zlevel,
z: this.z + 10,
shape: {
drict: model.drict,
width: width,
height: height,
points: {
x: x,
y: y
}
},
style: {
lineWidth: style.Section.separator.width,
stroke: style.Section.separator.color,
fill: 'rgba(0, 0, 0, 0)'
}
});
this.turnBackriangle = new EBackArrowTriangle({
zlevel: this.zlevel,
z: this.z + 10,
shape: {
drict: model.drict,
width: width,
height: height,
points: {
x: x,
y: y
}
},
style: {
lineWidth: style.Section.separator.width,
stroke: style.Section.separator.color,
fill: style.Section.separator.color
}
});
this.add(this.turnBack);
this.add(this.turnBackriangle);
this.turnBack.hide();
this.turnBackriangle.hide();
}
}
// // 创建延时释放
// creatRelease() {
// const model = this.model;
// const style = this.style;
// const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]);
// if ((model.type == '01' && (!model.logicSectionCodeList || !model.logicSectionCodeList.length)) || model.type == '02' || model.type == '03') {
// this.release = new ERelease({
// zlevel: this.zlevel,
// z: this.z,
// shape: {
// x1: model.points[0].x + traingle.getCos(traingle.absz / 3),
// y1: model.points[0].y + traingle.getSin(traingle.absz / 3),
// x2: model.points[0].x + traingle.getCos(traingle.absz / 3 * 2),
// y2: model.points[0].y + traingle.getSin(traingle.absz / 3 * 2)
// },
// lineWidth: style.Section.line.width,
// stroke: style.Section.line.spareColor
// });
// this.add(this.release);
// }
// }
// 创建限速线
creatSpeedLimit() {
const model = this.model;
const style = this.style;
const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]);
let x = traingle.drictx * (style.Section.speedLimit.distance) * traingle.getSinRate();
let y = traingle.dricty * (style.Section.speedLimit.distance) * traingle.getCosRate();
if (x == Infinity) { x = 0; }
if (y == Infinity) { y = 0; }
if (!this.speedLimitLeft && !this.speedLimitRight) {
this.speedLimitLeft = new ELimitLines({
zlevel: this.zlevel,
z: this.z,
position: [x, -y],
z: this.z + elementZ,
style: style,
switch: model.switch,
code: model.code,
isSwitchSection: model.switchSection,
relSwitchCode: model.relSwitchCode,
isCurve: model.curve, // 是否曲线
points: model.points
type: element,
modelData: model
});
this.speedLimitRight = new ELimitLines({
zlevel: this.zlevel,
z: this.z,
position: [-x, y],
style: style,
switch: model.switch,
code: model.code,
isSwitchSection: model.switchSection,
relSwitchCode: model.relSwitchCode,
isCurve: model.curve, // 是否曲线
points: model.points
});
if (style.Section.speedLimit.nameShow) {
// 开头 起点位置
this.speedLimitNameLeft = new ELimitName({
zlevel: this.zlevel,
z: this.z + 10,
drict: -1,
x: model.points[0].x,
y: model.points[0].y - 15,
style: style
});
// 终点位置
this.speedLimitNameRight = new ELimitName({
zlevel: this.zlevel,
z: this.z + 10,
drict: 1,
x: model.points[model.points.length - 1].x,
y: model.points[model.points.length - 1].y - 15,
style: style
});
this.add(this.speedLimitNameLeft);
this.add(this.speedLimitNameRight);
}
}
this.add(this.speedLimitLeft);
this.add(this.speedLimitRight);
}
// 创建分隔符
createSeparator() {
const model = this.model;
const style = this.style;
let traingle = null;
if (model && style && model.points && model.points.length > 1) {
/** 创建左侧分隔符*/
traingle = new JTriangle(model.points[0], model.points[1]);
this.lPartition = new ESeparator({
style: style,
zlevel: this.zlevel,
z: this.z + style.Section.separator.z,
traingle: traingle,
point: {
x: model.points[0].x,
y: model.points[0].y
},
sepType: model.sepTypeLeft,
drict: -1 // 方向
});
/** 创建右侧分隔符*/
traingle = new JTriangle(model.points[model.points.length - 2], model.points[model.points.length - 1]);
this.rPartition = new ESeparator({
style: style,
zlevel: this.zlevel,
z: this.z + style.Section.separator.z,
traingle: traingle,
point: {
x: model.points[model.points.length - 1].x,
y: model.points[model.points.length - 1].y
},
sepType: model.sepTypeRight,
drict: 1 // 方向
});
/** 添加视图*/
this.add(this.lPartition);
this.add(this.rPartition);
}
}
// 创建延迟解锁计时
createReleaseText() {
const model = this.model;
const style = this.style;
this.releaseName = new ETextName({
zlevel: this.zlevel,
z: this.z + 2,
style: this.style,
silent: false,
x: model.points[0].x + 10,
y: model.points[0].y - style.Section.line.width * 2,
fontWeight: style.Section.text.fontWeight,
fontSize: style.Section.text.fontSize,
fontFamily: style.fontFamily,
text: '30',
textFill: style.Section.text.fontColor,
textAlign: style.Section.text.textAlign,
textPosition: style.Section.text.textPosition,
textVerticalAlign: style.Section.text.textVerticalAlign
this.add(this[element]);
});
this.add(this.releaseName);
}
/** 设置区段恢复默认状态*/
recover() {
if (this.section) {
this.section.stopAnimation(true);
if (this.line) {
this.line.stopAnimation(true);
this.sectionBlock && this.sectionBlock.hide(); // 因此特殊区段
this.section.setStyle({
this.line.setStyle({
stroke: this.style.Section.line.spareColor,
lineWidth: this.style.Section.line.width
});
// this.release && this.release.hide();
if (this.speedLimitLeft && this.speedLimitRight) {
this.remove(this.speedLimitLeft);
this.remove(this.speedLimitRight);
}
}
this.releaseName && this.releaseName.hide();
if (this.leftAxle) {
this.leftAxle.setStyle({
stroke: this.style.Section.line.spareColor,
fill: this.style.Section.line.spareColor
});
}
if (this.rightAxle) {
this.rightAxle.setStyle({
stroke: this.style.Section.line.spareColor,
fill: this.style.Section.line.spareColor
});
}
this.section && this.section.recoverRoute();
this.speedLimit && this.speedLimit.hide();
this.speedLimitName && this.speedLimitName.hide();
this.axle && this.axle.setStyle({
stroke: this.style.Section.line.spareColor,
fill: this.style.Section.line.spareColor
});
this.line && this.line.recoverRoute();
this.lineBorder && this.lineBorder.setStyle({ lineWidth: 0 });
}
/** 未定义状态 00*/
undefine() {
if (this.section) {
this.section.setStyle({
if (this.line) {
this.line.setStyle({
stroke: this.style.Section.line.undefinedColor,
lineWidth: this.style.Section.line.width
});
@ -593,8 +104,8 @@ export default class Section extends Group {
/** 空闲状态 01*/
spare() {
if (this.section) {
this.section.setStyle({
if (this.line) {
this.line.setStyle({
stroke: this.style.Section.line.spareColor,
lineWidth: this.style.Section.line.width
});
@ -603,58 +114,42 @@ export default class Section extends Group {
/** 通信车占用状态 02*/
communicationOccupied() {
if (this.section) {
this.section.setStyle({
if (this.line) {
this.line.setStyle({
stroke: this.style.Section.line.communicationOccupiedColor,
lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
});
}
if (this.leftAxle) {
this.leftAxle.setStyle({
stroke: this.style.Section.line.communicationOccupiedColor,
fill:this.style.Section.line.communicationOccupiedColor
});
}
if (this.rightAxle) {
this.rightAxle.setStyle({
stroke: this.style.Section.line.communicationOccupiedColor,
fill:this.style.Section.line.communicationOccupiedColor
});
}
this.axle && this.axle.setStyle({
stroke: this.style.Section.line.communicationOccupiedColor,
fill:this.style.Section.line.communicationOccupiedColor
});
}
/** 非通信车占用状态 03*/
unCommunicationOccupied() {
if (this.section) {
this.section.setStyle({
if (this.line) {
this.line.setStyle({
stroke: this.style.Section.line.unCommunicationOccupiedColor,
lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
});
}
if (this.leftAxle) {
this.leftAxle.setStyle({
stroke: this.style.Section.line.unCommunicationOccupiedColor,
fill:this.style.Section.line.unCommunicationOccupiedColor
});
}
if (this.rightAxle) {
this.rightAxle.setStyle({
stroke: this.style.Section.line.unCommunicationOccupiedColor,
fill:this.style.Section.line.unCommunicationOccupiedColor
});
}
this.axle && this.axle.setStyle({
stroke: this.style.Section.line.unCommunicationOccupiedColor,
fill:this.style.Section.line.unCommunicationOccupiedColor
});
}
/** ARB故障 */
invalid() {
this.section && this.section.setStyle({
this.line && this.line.setStyle({
stroke: this.style.Section.line.invalidColor,
lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
});
}
/** 进路锁闭 04*/
routeLock() {
if (this.section) {
this.section.setStyle({
if (this.line) {
this.line.setStyle({
stroke: this.style.Section.line.routeLockColor,
lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
});
@ -663,16 +158,16 @@ export default class Section extends Group {
/** 封锁 06*/
block() {
if (this.style.Section.block.special) {
this.sectionBlock && this.sectionBlock.show();
if (this.sectionBlock) {
this.sectionBlock.show();
} else {
this.section && this.section.setStyle({
this.line && this.line.setStyle({
stroke: this.style.Section.line.blockColor,
lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
});
}
if (this.style.Section.block.blockGlint && this.section) {
this.section.animateStyle(true, [
if (this.style.Section.block && this.style.Section.block.blockGlint && this.line) {
this.line.animateStyle(true, [
{ time: 1000, styles: { stroke: this.style.backgroundColor } },
{ time: 2000, styles: { stroke: this.style.Section.line.blockColor } }
]);
@ -681,8 +176,8 @@ export default class Section extends Group {
/** 故障锁闭 05*/
faultLock() {
if (this.section) {
this.section.setStyle({
if (this.line) {
this.line.setStyle({
stroke: this.style.Section.line.faultLockColor,
lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
});
@ -691,8 +186,8 @@ export default class Section extends Group {
/** atc切除状态 07*/
atcExcision() {
if (this.section) {
this.section.setStyle({
if (this.line) {
this.line.setStyle({
stroke: this.style.Section.line.atcExcisionColor,
lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
});
@ -701,9 +196,9 @@ export default class Section extends Group {
/** ats切除状态 08*/
atsExcision() {
if (this.section) {
if (this.line) {
this.atcExcision();
this.section.animateStyle(true, [
this.line.animateStyle(true, [
{ time: 1000, styles: { stroke: this.style.backgroundColor } },
{ time: 2000, styles: { stroke: this.style.Section.line.atsExcisionColor, lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth } }
]);
@ -712,39 +207,19 @@ export default class Section extends Group {
/** 保护区段锁闭 09*/
protectiveLock() {
if (this.section) {
this.section.setStyle({
if (this.line) {
this.line.setStyle({
stroke: this.style.Section.line.protectiveLockColor,
lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
});
}
}
// /** 延时释放*/
// async timeRelease() {
// this.section.setStyle({
// stroke: this.style.Section.line.routeLockColor,
// lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
// });
// if (this.release) {
// this.release.show();
// this.release.setStyle({
// stroke: this.style.Section.line.routeLockColor,
// lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
// });
// this.release.animateStyle(true, [
// { time: 1000, styles: { stroke: this.style.Section.line.routeLockColor } },
// { time: 2000, styles: { stroke: this.style.Section.line.timeReleaseColor } }
// ]);
// }
// }
/** 区段切除*/
sectionCutOff() {
const lineWidth = this.style.Section.line.width + (this.model.status != '01' ? this.style.Section.line.beyondWidth : 0);
if (this.section) {
this.section.animateStyle(true, [
if (this.line) {
this.line.animateStyle(true, [
{ time: 0, styles: { lineWidth: lineWidth } },
{ time: 1000, styles: { stroke: this.style.backgroundColor } },
{ time: 2000, styles: { lineWidth: lineWidth } }
@ -754,54 +229,14 @@ export default class Section extends Group {
/** 设置限速*/
setSpeedUpperLimit() {
if (this.style.Section.line.speedLimitColor) {
this.section.setStyle({stroke: this.style.Section.line.speedLimitColor});
} else if (this.section) {
this.creatSpeedLimit();
if (this.style.Section.line.speedLimitColor) { // 宁波三号线 独有
this.line.setStyle({stroke: this.style.Section.line.speedLimitColor});
} else {
this.speedLimit && this.speedLimit.show();
this.speedLimitName && this.speedLimitName.show();
}
}
// /** 计轴预复位 12*/
// axleReset() {
// if (this.release) {
// this.release.show();
// this.release && this.release.setStyle({
// stroke: this.style.Section.axle.resetColor,
// fill: 'green'
// });
// }
// }
// /** 计轴失效 13*/
// alxeFailure() {
// if (this.section) {
// this.section.setStyle({
// stroke: this.style.Section.axle.Failure,
// lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
// });
// }
// }
showRemainTime(number) { // 区段延时保护倒计时显示
this.releaseName && this.releaseName.show();
// this.releaseName && this.releaseName.setStyle({ text: number });
let pointX = this.model.points[0].x + 45;
let pointY = this.model.points[0].y;
if (!this.model.timeRight) {
pointX = this.model.points[this.model.points.length - 1].x - 45;
pointY = this.model.points[this.model.points.length - 1].y;
}
this.releaseName && this.releaseName.attr({
style: {
text: number
},
shape: {
x: pointX,
y: pointY - this.style.Section.line.width * 2
}
});
}
/** 设置状态*/
setState(model, flag = false) {
if (!this.isShowShape) return;
@ -811,12 +246,12 @@ export default class Section extends Group {
const switchModel = Vue.prototype.$jlmap.mapDevice[model.relSwitchCode];
if (switchModel.normalPosition != 0) { // 定位情况
const sectionC = Vue.prototype.$jlmap.mapDevice[switchModel.sectionCCode];
sectionC && sectionC.instance && sectionC.instance.section.setStyle({ stroke: this.style.Switch.sectionAction.spareColor });
sectionC && sectionC.instance && sectionC.instance.line.setStyle({ stroke: this.style.Switch.sectionAction.spareColor });
const sectionB = Vue.prototype.$jlmap.mapDevice[switchModel.sectionBCode];
sectionB && sectionB.instance && sectionB.instance.setState(sectionB, true);
} else if (switchModel.normalPosition == 0) { // 反位情况
const sectionB = Vue.prototype.$jlmap.mapDevice[switchModel.sectionBCode];
sectionB && sectionB.instance && sectionB.instance.section.setStyle({ stroke: this.style.Switch.sectionAction.spareColor });
sectionB && sectionB.instance && sectionB.instance.line.setStyle({ stroke: this.style.Switch.sectionAction.spareColor });
const sectionC = Vue.prototype.$jlmap.mapDevice[switchModel.sectionCCode];
sectionC && sectionC.instance && sectionC.instance.setState(sectionC, true);
}
@ -841,9 +276,6 @@ export default class Section extends Group {
// 区段计轴预复位状态 (未处理)
// 区段故障锁闭
model.fault && this.faultLock();
// 区段延时保护倒计时显示
// model.remainTime = 10;
model.remainTime && this.showRemainTime(model.remainTime);
/** 道岔区段更新岔心颜色 */
if (model.type === '03' && model.switch) {
@ -858,13 +290,8 @@ export default class Section extends Group {
getShapeTipPoint() {
let rect = this.getBoundingRect();
const distance = this.style.Section.line.width / 2;
if (this.section) {
rect = this.section.getBoundingRect();
// if (this.model.type !== '02' && this.model.nameShow) {
// if (this.model.trainPosType == '01') {
// distance = distance + this.style.Section.text.distance + this.style.Section.text.fontSize;
// }
// }
if (this.line) {
rect = this.line.getBoundingRect();
}
return {
x: rect.x + rect.width / 2,
@ -873,10 +300,10 @@ export default class Section extends Group {
}
getBoundingRect() {
if (this.section) {
return this.section.getBoundingRect().clone();
} else if (this.name) {
return this.name.getBoundingRect().clone();
if (this.line && this.line.getBoundingRect()) {
return this.line.getBoundingRect().clone();
} else if (this.name && this.name.getBoundingRect()) {
return this.name.getBoundingRect();
}
}
@ -890,10 +317,10 @@ export default class Section extends Group {
const path = window.location.href;
if (path.includes('/map/draw')) {
this.on('mouseout', () => {
!this.selectedType && !this.selected && this.section && this.section.setStyle({ stroke: this.style.Section.line.spareColor, lineWidth: this.style.Section.line.width });
!this.selectedType && !this.selected && this.line && this.line.setStyle({ stroke: this.style.Section.line.spareColor, lineWidth: this.style.Section.line.width });
});
this.on('mouseover', () => {
!this.selectedType && this.section && this.section.setStyle({ stroke: '#fbfbfb', lineWidth: this.style.Section.line.width - 0.2 });
!this.selectedType && this.line && this.line.setStyle({ stroke: '#fbfbfb', lineWidth: this.style.Section.line.width - 0.2 });
});
}
}
@ -901,10 +328,10 @@ export default class Section extends Group {
drawSelected(selected) {
this.selected = selected;
if (selected) {
if (this.style.Section.line.isActiveShow) { // 哈尔滨线路专属显示
this.lineBorder && this.lineBorder.setStyle({ lineWidth: this.style.Section.line.width + 3 });
if (this.lineBorder) { // 哈尔滨线路专属显示
this.lineBorder.setStyle({ lineWidth: this.style.Section.line.width + 3 });
} else {
!this.selectedType && this.section && this.section.setStyle({ stroke: '#fbfbfb' });
!this.selectedType && this.line && this.line.setStyle({ stroke: '#fbfbfb' });
}
} else {
this.lineBorder && this.lineBorder.setStyle({ lineWidth: 0 });
@ -916,9 +343,9 @@ export default class Section extends Group {
return;
}
if (selected && type) {
this.section && this.section.setStyle({ stroke: drawSectionStyle[type] });
this.line && this.line.setStyle({ stroke: drawSectionStyle[type] });
} else {
this.section && this.section.setStyle({ stroke: this.style.Section.line.spareColor });
this.line && this.line.setStyle({ stroke: this.style.Section.line.spareColor });
}
this.selectedType = type;
}
@ -928,7 +355,7 @@ export default class Section extends Group {
}
mouseover() {
this.section && this.section.setStyle({ stroke: 'rgba(255,255,255,0.8)' });
this.line && this.line.setStyle({ stroke: 'rgba(255,255,255,0.8)' });
}
setShowMode() { }
setShowStation(stationCode) {
@ -938,25 +365,22 @@ export default class Section extends Group {
});
this.isShowShape = true;
if (this.name) {
if (this.model.type == '01') {
this.model.nameShow && this.style.Section.text.show ? this.name.show() : this.name.hide();
} else if (this.model.type == '02') {
this.model.nameShow && this.style.Section.logicText.show ? this.name.show() : this.name.hide();
} else if (this.model.type == '04') {
this.model.nameShow ? this.name.show() : this.name.hide();
}
this.model.nameShow ? this.name.show() : this.name.hide();
}
if (this.logicText) {
this.model.nameShow ? this.logicText.show() : this.logicText.hide();
}
if (this.transferTrackText) {
this.model.transferTrackNameShow && this.style.Section.transferText.show ? this.transferTrackText.show() : this.transferTrackText.hide();
this.model.transferTrackNameShow ? this.transferTrackText.show() : this.transferTrackText.hide();
}
if (this.standTrackText) {
this.model.standTrackNameShow && this.style.Section.standText.show ? this.standTrackText.show() : this.standTrackText.hide();
this.model.standTrackNameShow ? this.standTrackText.show() : this.standTrackText.hide();
}
if (this.destinationText) {
this.model.destinationNameShow && this.style.Section.destinationText.show ? this.destinationText.show() : this.destinationText.hide();
this.model.destinationNameShow ? this.destinationText.show() : this.destinationText.hide();
}
if (this.reentryTrackText) {
this.model.reentryTrackNameShow && this.style.Section.reentryText.show ? this.reentryTrackText.show() : this.reentryTrackText.hide();
this.model.reentryTrackNameShow ? this.reentryTrackText.show() : this.reentryTrackText.hide();
}
this.setState(this.model);

6
src/jmapNew/theme/chengdu_03/menus/menuDialog/viewName.vue
View File

@ -214,17 +214,17 @@ export default {
}
// 站台轨名称
if (elem.isStandTrack) {
if (elem.standTrack) {
standTrackNameShow = this.nameLevels.indexOf(2) !== -1;
}
// 折返轨名称
if (elem.isReentryTrack) {
if (elem.reentryTrack) {
reentryTrackNameShow = this.nameLevels.indexOf(4) !== -1;
}
// 转换轨名称
if (elem.isTransferTrack) {
if (elem.transferTrack) {
transferTrackNameShow = this.nameLevels.indexOf(6) !== -1;
}

6
src/jmapNew/theme/fuzhou_01/menus/menuDialog/viewName.vue
View File

@ -214,17 +214,17 @@ export default {
}
// 站台轨名称
if (elem.isStandTrack) {
if (elem.standTrack) {
standTrackNameShow = this.nameLevels.indexOf(2) !== -1;
}
// 折返轨名称
if (elem.isReentryTrack) {
if (elem.reentryTrack) {
reentryTrackNameShow = this.nameLevels.indexOf(4) !== -1;
}
// 转换轨名称
if (elem.isTransferTrack) {
if (elem.transferTrack) {
transferTrackNameShow = this.nameLevels.indexOf(6) !== -1;
}