修改区段名称的问题

This commit is contained in:
ival 2019-08-05 15:00:51 +08:00
parent 5e8f1899ff
commit 042e6c0e59
6 changed files with 266 additions and 131 deletions

View File

@ -1,8 +1,8 @@
const mapDeviceStyle = {
// '01': 'chengdu_04',
'02': 'fuzhou_01',
// '03': 'bejing_01',
'03': 'chengdu_03',
'03': 'bejing_01',
// '03': 'chengdu_03',
'05': 'batong_01' // 暂时没有画北京八通线
};

View File

@ -12,16 +12,62 @@ class SkinStyle extends defaultStyle {
};
this[deviceType.Section] = {
text: { // 区段文字属性
distance: 2, // 文字离区段距离
fontSize: 10, // 字体大小
fontFormat: 'consolas', // 字体族类
fontColor: '#C0C0C0', // 字体颜色
destinationTextColor: 'yellow', // 目的地颜色
textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle', // 文字垂直对齐方式
position: 1 // 区段名称位置 1 上面 -1 下面 0 默认
text: {
position: -1, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 11, // 文字离区段距离
fontSize: 11, // 字体大小
fontColor: '#FFFFFF', // 字体颜色
textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
logicText: {
position: -1, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 11, // 文字离区段距离
fontSize: 11, // 字体大小
fontColor: '#FFFFFF', // 字体颜色
textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
standText: {
opposite: true, // 对称相反
position: 1, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 11, // 文字离区段距离
fontSize: 11, // 字体大小
fontColor: '#FFFFFF', // 字体颜色
textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
reentryText: {
opposite: true, // 对称相反
position: 1, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 22, // 文字离区段距离
fontSize: 11, // 字体大小
fontColor: '#FFFFFF', // 字体颜色
textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
transferText: {
opposite: true, // 对称相反
position: 1, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 33, // 文字离区段距离
fontSize: 11, // 字体大小
fontColor: '#FFFFFF', // 字体颜色
textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
destinationText: {
position: 1, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 11, // 文字离区段距离
fontSize: 11, // 字体大小
fontColor: 'yellow', // 字体颜色
textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
mouseOverStyle: {
borderColor: '#fff',
@ -78,7 +124,7 @@ class SkinStyle extends defaultStyle {
distance: 3, // 文字和灯杆的距离
isNoRotation: true, // 是否禁止旋转
isAlignCenter: false, // 信号字体对其方式
fontSize: 10, // 信号机名称字体大小
fontSize: 11, // 信号机名称字体大小
defaultColor: '#C0C0C0', // 信号灯字体默认色
blockColor: '#EF0C08', // 信号灯字体锁定颜色
checkColor: '#00FF00' // 信号字体

View File

@ -12,16 +12,59 @@ class SkinStyle extends defaultStyle {
};
this[deviceType.Section] = {
text: { // 区段文字属性
distance: 1, // 文字离区段距离
text: {
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 10, // 文字离区段距离
fontSize: 12, // 字体大小
fontFormat: 'consolas', // 字体族类
fontColor: '#FFFFFF', // 字体颜色
destinationTextColor: 'yellow', // 目的地颜色
textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle', // 文字垂直对齐方式
position: 1 // 区段名称位置 1 上面 -1 下面 0 默认
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
logicText: {
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 12, // 文字离区段距离
fontSize: 11, // 字体大小
fontColor: '#FFFFFF', // 字体颜色
textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
standText: {
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 24, // 文字离区段距离
fontSize: 11, // 字体大小
fontColor: '#FFFFFF', // 字体颜色
textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
reentryText: {
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 36, // 文字离区段距离
fontSize: 11, // 字体大小
fontColor: '#FFFFFF', // 字体颜色
textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
transferText: {
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 36, // 文字离区段距离
fontSize: 11, // 字体大小
fontColor: '#FFFFFF', // 字体颜色
textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
destinationText: {
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 12, // 文字离区段距离
fontSize: 11, // 字体大小
fontColor: 'yellow', // 字体颜色
textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
line: {
width: 5, // 区段宽度
@ -73,7 +116,7 @@ class SkinStyle extends defaultStyle {
distance: 3, // 文字和灯杆的距离
isNoRotation: true, // 是否禁止旋转
isAlignCenter: false, // 信号字体对其方式
fontSize: 12, // 信号机名称字体大小
fontSize: 11, // 信号机名称字体大小
defaultColor: '#FFFFFF', // 信号灯字体默认色
blockColor: '#EF0C08', // 信号灯字体锁定颜色
checkColor: '#00FF00' // 信号保护区段检查颜色
@ -107,7 +150,7 @@ class SkinStyle extends defaultStyle {
delay: {
direction: false, // 延时解锁方向
offset: { x: -5, y: 0}, // 延时解锁偏移量
fontSize: 12, // 延迟解锁字体大小
fontSize: 11, // 延迟解锁字体大小
fontColor: '#C00808' // 延迟解锁颜色
},
@ -181,7 +224,7 @@ class SkinStyle extends defaultStyle {
this[deviceType.StationControl] = {
text: {
distance: 2, // 灯和文字之间的距离
fontSize: 12, // 字体大小
fontSize: 11, // 字体大小
fontFormat: 'consolas', // 字体格式
fontColor: '#ffffff', // 字体颜色
fontWeight: 'normal', // 字体粗细
@ -226,7 +269,7 @@ class SkinStyle extends defaultStyle {
this[deviceType.Switch] = {
text: {
distance: 2, // 道岔名称与区段距离
fontSize: 12, // 字体大小
fontSize: 11, // 字体大小
fontWeight: 'normal', // 字体粗细
borderColor: '#FE0000', // 道岔边框颜色
lossColor: '#C00808', // 道岔失去颜色
@ -241,7 +284,7 @@ class SkinStyle extends defaultStyle {
this[deviceType.LcControl] = {
text: {
fontSize: 12, // 字体大小
fontSize: 11, // 字体大小
distance: 5 // 灯跟文字距离
},
lamp: {
@ -252,7 +295,7 @@ class SkinStyle extends defaultStyle {
this[deviceType.ZcControl] = {
text: {
fontSize: 12, // 字体大小
fontSize: 11, // 字体大小
distance: 5 // 灯跟文字距离
},
lamp: {
@ -263,7 +306,7 @@ class SkinStyle extends defaultStyle {
this[deviceType.LimitControl] = {
text: {
fontSize: 12, // 字体大小
fontSize: 11, // 字体大小
distance: 5 // 灯跟文字距离
},
lamp: {
@ -331,7 +374,7 @@ class SkinStyle extends defaultStyle {
/** HSDA上边距离 */
upPaddingHSDA: 4,
/** 列车字号*/
trainTextFontSize: 12,
trainTextFontSize: 11,
/** 目的地状态 01准点 02早点 03晚点 04头码车 */
destinationStatus: [
{status: '01', showColor: '#FFFFFF'},

View File

@ -12,15 +12,63 @@ class SkinStyle extends defaultStyle {
};
this[deviceType.Section] = {
text: { // 区段文字属性
distance: 2, // 文字离区段距离
fontSize: 10, // 字体大小
fontColor: '#FFFFFF', // 字体颜色
destinationTextColor: 'yellow', // 目的地颜色
textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle', // 文字垂直对齐方式
position: 0 // 区段名称位置 1 上行 -1 下面 0 默认
text: {
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 18, // 文字离区段距离
fontSize: 10, // 字体大小
fontColor: '#FFFFFF', // 字体颜色
textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
logicText: {
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 8, // 文字离区段距离
fontSize: 8, // 字体大小
fontColor: '#FFFFFF', // 字体颜色
textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
standText: {
opposite: true, // 对称相反
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 10, // 文字离区段距离
fontSize: 10, // 字体大小
fontColor: '#FFFFFF', // 字体颜色
textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
reentryText: {
opposite: true, // 对称相反
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 20, // 文字离区段距离
fontSize: 10, // 字体大小
fontColor: '#FFFFFF', // 字体颜色
textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
transferText: {
opposite: true, // 对称相反
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 30, // 文字离区段距离
fontSize: 10, // 字体大小
fontColor: '#FFFFFF', // 字体颜色
textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
destinationText: {
opposite: true, // 对称相反
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 10, // 文字离区段距离
fontSize: 10, // 字体大小
fontColor: 'yellow', // 字体颜色
textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
line: {
width: 5, // 区段宽度

View File

@ -170,87 +170,76 @@ export default class Section extends Group {
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 + model.namePosition.x;
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 + model.namePosition.y;
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.nameShow) {
let tempx = x;
let tempy = y;
if (style.Section.text.position == 1) {
tempy = tempy - style.Section.text.fontSize;
} else if (style.Section.text.position == -1) {
tempy = tempy + style.Section.text.fontSize;
} else if (style.Section.text.position == 0) {
// 根据列车上下行进行坐标偏移
const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]);
if (model.trainPosType === '01') {
tempy -= (style.Section.line.width * 1.5);
if (model.type === '01') {
tempy += traingle.getCos(style.Section.text.fontSize * 0.8 + style.Section.text.distance) - style.Section.text.fontSize * 2;
}
} else {
tempy += (style.Section.line.width * 1.5);
if (model.type === '01') {
tempy -= traingle.getCos(style.Section.text.fontSize * 0.8 + style.Section.text.distance) - style.Section.text.fontSize * 2;
}
}
}
if (model.type !== '03') {
// 计算文字和物理区段的距离
// 如果不是逻辑区段,让名称和区段保持点距离
const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]);
if (model.type === '01') {
tempx += traingle.getSin(style.Section.text.fontSize * 0.8 + style.Section.text.distance);
}
}
// 创建区段名称
const fontSize = model.type == '02' ? style.Section.text.fontSize + 2: style.Section.text.fontSize;
this.name = new ETextName({
zlevel: this.zlevel,
z: this.z + 2,
style: this.style,
silent: false,
x: tempx,
y: tempy,
fontWeight: 'normal',
fontSize: fontSize,
fontFamily: style.textFontFormat,
text: model.name,
textFill: style.Section.text.fontColor,
textAlign: style.Section.text.textAlign,
textPosition: style.Section.text.textPosition,
textVerticalAlign: style.Section.text.textVerticalAlign
});
if (model.type == '02') {
const opposite = style.Section.logicText.opposite ? -1: 1;
const tempx = x + traingle.getSin(style.Section.logicText.distance);
const tempy = y + traingle.getCos(style.Section.logicText.distance) * (style.Section.logicText.position || opposite*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: 'normal',
fontSize: style.Section.logicText.fontSize,
fontFamily: style.textFontFormat,
text: model.name,
textFill: style.Section.logicText.fontColor,
textAlign: style.Section.logicText.textAlign,
textPosition: style.Section.logicText.textPosition,
textVerticalAlign: style.Section.logicText.textVerticalAlign
});
} else {
const opposite = style.Section.text.opposite ? -1: 1;
const tempx = x + traingle.getSin(style.Section.text.distance);
const tempy = y + traingle.getCos(style.Section.text.distance) * (style.Section.text.position || opposite*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: 'normal',
fontSize: style.Section.text.fontSize,
fontFamily: style.textFontFormat,
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);
}
/** 站台轨名称*/
if (model.isStandTrack && model.standTrackNameShow) {
let tempx = x;
let tempy = y;
// 计算文字和物理区段的距离
const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]);
tempx += traingle.getSin(style.Section.text.distance);
tempy += traingle.getCos(style.Section.text.distance);
// 创建站台轨名称
const opposite = style.Section.standText.opposite ? -1: 1;
const tempx = x + traingle.getSin(style.Section.standText.distance);
const tempy = y + traingle.getCos(style.Section.standText.distance) * (style.Section.standText.position || opposite*drict);
this.standTrackText = new ETextName({
zlevel: this.zlevel,
z: this.z + 2,
x: tempx + model.standTrackNamePosition.x,
y: tempy + model.standTrackNamePosition.y,
fontWeight: 'bold',
fontSize: style.Section.text.fontSize,
silent: false,
x: tempx,
y: tempy,
fontWeight: 'normal',
fontSize: style.Section.standText.fontSize,
fontFamily: style.textFontFormat,
text: model.standTrackName,
textFill: style.Section.text.fontColor,
textAlign: style.Section.text.textAlign,
textPosition: style.Section.text.textPosition,
style: this.style
textFill: style.Section.standText.fontColor,
textAlign: style.Section.standText.textAlign,
textPosition: style.Section.standText.textPosition,
textVerticalAlign: style.Section.standText.textVerticalAlign
});
// 添加视图
this.add(this.standTrackText);
@ -258,20 +247,23 @@ export default class Section extends Group {
/** 折返轨名称*/
if (model.isReentryTrack && model.reentryTrackNameShow) {
// 创建折返轨名称
const opposite = style.Section.reentryText.opposite ? -1: 1;
const tempx = x + traingle.getSin(style.Section.reentryText.distance);
const tempy = y + traingle.getCos(style.Section.reentryText.distance) * (style.Section.reentryText.position || opposite*drict);
this.reentryTrackText = new ETextName({
zlevel: this.zlevel,
z: this.z + 2,
x: x + model.reentryTrackNamePosition.x,
y: y + model.reentryTrackNamePosition.y + style.Section.text.distance + style.Section.text.fontSize,
fontWeight: 'bold',
fontSize: style.Section.text.fontSize,
silent: false,
x: tempx,
y: tempy,
fontWeight: 'normal',
fontSize: style.Section.reentryText.fontSize,
fontFamily: style.textFontFormat,
text: model.reentryTrackName,
textFill: style.Section.text.fontColor,
textAlign: style.Section.text.textAlign,
textPosition: style.Section.text.textPosition,
style: this.style
textFill: style.Section.reentryText.fontColor,
textAlign: style.Section.reentryText.textAlign,
textPosition: style.Section.reentryText.textPosition,
textVerticalAlign: style.Section.reentryText.textVerticalAlign
});
// 添加视图
this.add(this.reentryTrackText);
@ -279,20 +271,23 @@ export default class Section extends Group {
/** 转换轨名称*/
if (model.isTransferTrack && model.transferTrackNameShow) {
// 转换轨名称
const opposite = style.Section.transferText.opposite ? -1: 1;
const tempx = x + traingle.getSin(style.Section.transferText.distance);
const tempy = y + traingle.getCos(style.Section.transferText.distance) * (style.Section.transferText.position || opposite*drict);
this.transferTrackText = new ETextName({
zlevel: this.zlevel,
z: this.z + 2,
x: x + model.transferTrackNamePosition.x,
y: y + model.transferTrackNamePosition.y + style.Section.text.distance + style.Section.text.fontSize * 2,
fontWeight: 'bold',
fontSize: style.Section.text.fontSize,
silent: false,
x: tempx,
y: tempy,
fontWeight: 'normal',
fontSize: style.Section.transferText.fontSize,
fontFamily: style.textFontFormat,
text: model.transferTrackName,
textFill: style.Section.text.fontColor,
textAlign: style.Section.text.textAlign,
textPosition: style.Section.text.textPosition,
style: this.style
textFill: style.Section.transferText.fontColor,
textAlign: style.Section.transferText.textAlign,
textPosition: style.Section.transferText.textPosition,
textVerticalAlign: style.Section.transferText.textVerticalAlign
});
// 添加视图
this.add(this.transferTrackText);
@ -300,20 +295,23 @@ export default class Section extends Group {
/** 目的码名称*/
if (model.destinationCode && model.destinationCodeShow) {
// 转换轨名称
const opposite = style.Section.destinationText.opposite ? -1: 1;
const tempx = x + traingle.getSin(style.Section.destinationText.distance);
const tempy = y + traingle.getCos(style.Section.destinationText.distance) * (style.Section.destinationText.position || opposite * drict);
this.destinationText = new ETextName({
zlevel: this.zlevel,
z: this.z + 2,
x: x + model.destinationCodePoint.x,
y: y + model.destinationCodePoint.y,
silent: false,
x: tempx,
y: tempy,
fontWeight: 'bold',
fontSize: style.Section.text.fontSize,
fontSize: style.Section.destinationText.fontSize,
fontFamily: style.textFontFormat,
text: model.destinationCode,
textFill: style.Section.text.destinationTextColor,
textAlign: style.Section.text.textAlign,
textPosition: style.Section.text.textPosition,
style: this.style
textFill: style.Section.destinationText.fontColor,
textAlign: style.Section.destinationText.textAlign,
textPosition: style.Section.destinationText.textPosition,
textVerticalAlign: style.Section.destinationText.textVerticalAlign
});
// 添加视图
this.add(this.destinationText);

View File

@ -80,7 +80,7 @@ class Signal extends Group {
x: sigNameX,
y: sigNameY,
text: model.name,
fontWeight: 'normal',
fontWeight: 'bold',
fontSize: style.Signal.text.fontSize,
fontFamily: style.textFontFormat,
textFill: style.Signal.text.defaultColor,