desc: 增加lc,limiit,image 图层

src/jmap/config/deviceRender.js

@@ -11,37 +11,55 @@ deviceRender[deviceType.Link] = {
 /** Section渲染配置*/
 deviceRender[deviceType.Section] = {
 	zlevel: 1,
-	progressive: 2,
+	progressive: 2
-}
+};
 
 /** Signal渲染配置*/
 deviceRender[deviceType.Signal] = {
 	zlevel: 1,
-	progressive: 3,
+	progressive: 3
-}
+};
 
 /** Switch渲染配置*/
 deviceRender[deviceType.Switch] = {
 	zlevel: 3,
-	progressive: 5,
+	progressive: 5
-}
+};
 
 /** Station渲染配置*/
 deviceRender[deviceType.Station] = {
 	zlevel: 1,
-	progressive: 4,
+	progressive: 4
-}
+};
 
 /** StationStand渲染配置*/
 deviceRender[deviceType.StationStand] = {
 	zlevel: 1,
-	progressive: 5,
+	progressive: 5
-}
+};
 
 /** StationControl渲染配置*/
 deviceRender[deviceType.StationControl] = {
 	zlevel: 1,
-	progressive: 4,
+	progressive: 4
-}
+};
+
+/** ImageControl渲染配置*/
+deviceRender[deviceType.ImageControl] = {
+	zlevel: 1,
+	progressive: 5
+};
+
+/** LcControl渲染配置*/
+deviceRender[deviceType.LcControl] = {
+	zlevel: 1,
+	progressive: 5
+};
+
+/** LimitControl渲染配置*/
+deviceRender[deviceType.LimitControl] = {
+	zlevel: 1,
+	progressive: 5
+};
 
 export default deviceRender;

src/jmap/config/deviceStyle.js

@@ -166,6 +166,65 @@ fuzhouSkin[deviceType.Signal] = {
 	/** 信号灯蓝色*/
 	signalLampBlueColor: '#0000FF'
 };
+fuzhouSkin[deviceType.Station] = {
+	/** 默认字体 族类*/
+	textFontFormat: '宋体' // consolas
+};
+fuzhouSkin[deviceType.StationControl] = {
+	nameDistance: 2,
+	/** 默认字体颜色*/
+	textFontColor: '#C0C0C0',
+
+	/** 默认字体阴影颜色*/
+	textShadowColor: '#FFFF00',
+
+	/** 默认字体 族类*/
+	textFontFormat: 'consolas',
+
+	/** 控制模式灯的半径 */
+	stationControlmodeR: 5,
+
+	/** 控制模式之间灯之间的距离*/
+	stationControlDistance: 44,
+
+	/** 控制模式字体大小*/
+	stationControlTextSize: 12,
+
+	/** 控制模式灰色*/
+	stationControlGrayColor: '#74747C',
+
+	/** 控制模式绿色*/
+	stationControlGreenColor: '#4DD43F',
+
+	/** 控制模式红色*/
+	stationControlRedColor: '#EF0C08',
+
+	/** 控制模式黄色*/
+	stationControlYellowColor: '#E4EF50'
+};
+fuzhouSkin[deviceType.LcControl] = {
+	nameDistance: 2,
+	zcControlmodeR: 4,
+	lcControlColor: '#FFFF00',
+	stationControlTextSize: 10,
+	textFontFormat: 'consolas',
+	textShadowColor: '#FFFF00',
+	borderColor: '#fff',
+	transparentColor: 'rgba(0,0,0,0)',
+	borderContextBackgroundColor: '#00FFFF'
+};
+fuzhouSkin[deviceType.LimitControl] = {
+	nameDistance: 2,
+	zcControlmodeR: 4,
+	lcControlColor: '#FFFF00',
+	stationControlTextSize: 10,
+	textFontFormat: 'consolas',
+	textShadowColor: '#FFFF00',
+	borderColor: '#fff',
+	transparentColor: 'rgba(0,0,0,0)',
+	borderContextBackgroundColor: '#00FFFF',
+	limitControlColor: 4
+};
 
 /** 皮肤配置*/
 const deviceSkin = {

src/jmap/config/deviceType.js

@@ -4,7 +4,11 @@ const deviceType = {
 	Signal: 'Signal',
 	Station: 'Station',
 	StationControl: 'StationControl',
-	StationStand: 'StationStand'
+	StationStand: 'StationStand',
+	ImageControl: 'ImageControl',
+	LcControl: 'LcControl',
+	ZcControl: 'ZcControl',
+	LimitControl: 'LimitControl'
 };
 
 export default deviceType;

src/jmap/map.js

@@ -166,6 +166,10 @@ class Jmap {
 		switch (type) {
 		case deviceType.Link: prop = 'linkList'; break;
 		case deviceType.Sction: prop = 'sectionList'; break;
+		case deviceType.Station: prop = 'stationList'; break;
+		case deviceType.StationControl: prop = 'stationControlList'; break;
+		case deviceType.LcControl: prop = 'LcControlList'; break;
+		case deviceType.LimitControl: prop = 'tempSpeedLimitList'; break;
 		}
 
 		const list = this.data[prop];

src/jmap/shape/ImageControl.js

@@ -0,0 +1,71 @@
+/*
+*	图片list
+*/
+import Group from 'zrender/src/container/Group';
+import Image from 'zrender/src/graphic/Image';
+
+export default class ImageControl extends Group {
+	constructor({ _code, _type, zlevel, model, state }, style) {
+		super({name: _code});
+		this._code = _code;
+		this._type = _type;
+		this.zlevel = zlevel;
+		this.model = model;
+		this.state = state;
+		this.style = style;
+		this.z = model.zIndex || 5;
+		this._create();
+	}
+
+	_create() {
+		const model = this.model;
+		this.image = new Image({
+			zlevel: this.zlevel,
+			z: this.z,
+			origin: {
+				x: model.position.x,
+				y: model.position.y
+			},
+			rotation: -Math.PI / 180 * model.rotate,
+			style: {
+				image: model.url,
+				x: model.position.x,
+				y: model.position.y,
+				width: model.width,
+				height: model.height
+			}
+		});
+		this.add(this.image);
+		// 旋转
+		if (model.rotate) {
+			this.transformRotation(this.image);
+		}
+	}
+
+	setState(model) {
+
+	}
+
+	// 整体图片
+	transformRotation(item) {
+		if (this.model.rotate) {
+			const origin = [this.model.position.x, this.model.position.y];
+			const rotation = -Math.PI / 180 * Number(this.model.rotate);
+			item.origin = origin;
+			item.rotation = rotation;
+			item.dirty();
+		}
+	}
+
+	getShapeTipPoint() {
+		if (this.image) {
+			var distance = 2;
+			var rect = this.image.getBoundingRect();
+			return {
+				x: rect.x + rect.width / 2,
+				y: rect.y - distance
+			};
+		}
+		return null;
+	}
+}

src/jmap/shape/Signal.js

@@ -13,7 +13,7 @@ import { arrows, triangular } from './libs/ShapePoints';
 
 class Lamp extends Group {
 	constructor(model) {
-		super();
+		super({name: `${model.name}`});
 		this.model = model;
 		this.zlevel = model.zlevel;
 		this.z = 10;
@@ -134,7 +134,7 @@ class Lamp extends Group {
 // 自动进路箭头
 class AutoSig extends Group {
 	constructor(model) {
-		super();
+		super({name: `${model.name}`});
 		this.model = model;
 		this.zlevel = model.zlevel;
 		this.z = 10;
@@ -196,7 +196,7 @@ class AutoSig extends Group {
 // 运行方向三角
 class JSigDrict extends Group {
 	constructor(model) {
-		super();
+		super({name: `${model.name}`});
 		this.model = model;
 		this.zlevel = model.zlevel;
 		this.z = 10;
@@ -226,12 +226,12 @@ class JSigDrict extends Group {
 // 信号灯 几灯、高柱等
 class JSiglamp extends Group {
 	constructor(model) {
-		super();
+		super({name: `${model.name}`});
 		this.model = model;
 		this.zlevel = model.zlevel;
 		this.z = 10;
-		this.lamps = new Group();
+		this.lamps = new Group({name: `${model.name}_Lamps`});
-		this.poles = new Group();
+		this.poles = new Group({name: `${model.name}_Poles`});
 		this._subType = 'SignalLamp';
 		this._val = '3'; /** 信号机*/
 		this._create();
@@ -246,7 +246,7 @@ class JSiglamp extends Group {
 			style: {
 				x: model.position.x + model.namePosition.x,
 				y: model.position.y + model.posit * (model.style.signalR + model.namePosition.y),
-				text: model.name,
+				text: model.signalName,
 				textAlign: 'middle',
 				textVerticalAlign: model.posit === 1 ? 'top' : 'bottom',
 				textFont: 'bold ' + (model.style.textFontSize + 1) + 'px ' + model.style.textFontFormat,
@@ -328,6 +328,7 @@ class JSiglamp extends Group {
 			const lamp = new Lamp({
 				style: model.style,
 				zlevel: this.zlevel,
+				name: `${this._code}_Lamp_${i}`,
 				lampCount: model.lampCount,
 				position: {
 					x: highPosition.x + i * model.drict * model.style.signalR * 2,
@@ -362,6 +363,7 @@ class JSiglamp extends Group {
 		this.sigDriction = new JSigDrict({
 			style: model.style,
 			zlevel: this.zlevel,
+			name: `${this._code}_JSigDrict`,
 			position: {
 				x: highPosition.x + model.drict * (model.lampCount * model.style.signalR * 2 + model.style.signalR - 1),
 				y: model.position.y
@@ -377,6 +379,7 @@ class JSiglamp extends Group {
 		this.autoSig = new AutoSig({
 			style: model.style,
 			zlevel: this.zlevel,
+			name: `${this._code}_AutoSig`,
 			position: {
 				x: highPosition.x,
 				y: highPosition.y
@@ -514,7 +517,7 @@ class JSiglamp extends Group {
 /** 按钮*/
 class SigButton extends Group {
 	constructor(model) {
-		super();
+		super({name: `${model.name}`});
 		this.model = model;
 		this.zlevel = model.zlevel;
 		this._subType = 'SignalButton';
@@ -711,7 +714,7 @@ class SigButton extends Group {
 
 export default class Signal extends Group {
 	constructor({ _code, _type, zlevel, model, state }, style) {
-		super();
+		super({name: _code});
 		this._code = _code;
 		this._type = _type;
 		this.zlevel = zlevel;
@@ -730,6 +733,7 @@ export default class Signal extends Group {
 	_create() {
 		const model = this.model;
 		const style = this.style;
+		const state = this.state;
 		const drict = model.directionType === '01' ? -1 : 1;
 		const posit = model.positionType === '01' ? -1 : 1;
 
@@ -737,13 +741,14 @@ export default class Signal extends Group {
 		this.siglamp = new JSiglamp({
 			style: style,
 			zlevel: this.zlevel,
+			name: `${this._code}_JSiglamp`,
 			position: {
 				x: model.position.x,
 				y: model.position.y + posit * style.signalDistance
 			},
 			drict: drict,
 			posit: posit,
-			name: model.name,
+			signalName: model.name,
 			namePosition: model.namePosition,
 			isShowName: model.nameShow,
 			highType: model.lampPostType,
@@ -757,6 +762,7 @@ export default class Signal extends Group {
 		this.sigButton = new SigButton({
 			style: style,
 			zlevel: this.zlevel,
+			name: `${this._code}_SigButton`,
 			position: {
 				x: model.buttonPosition.x,
 				y: model.buttonPosition.y - posit * style.signalDistance
@@ -768,7 +774,7 @@ export default class Signal extends Group {
 		this.add(this.siglamp);
 
 		this.mouseStateRecover();
-		this.setState(model);
+		this.setState(state);
 	}
 
 	setButtonStatus(model) {
@@ -938,11 +944,11 @@ export default class Signal extends Group {
 		this.siglamp.setRecover();
 	}
 
-	setState(model) {
+	setState(state) {
 		this.recover();
 
 		/** 设置状态 (点灯类型)*/
-		switch (model.status) {
+		switch (state.status) {
 		case '01': { this.close(); } break; // 关闭
 		case '02': { this.open(); } break; // 开放
 		case '03': { this.guid(); } break; // 引导
@@ -953,19 +959,19 @@ export default class Signal extends Group {
 		}
 
 		/** 进路性质类型*/
-		switch (model.natureType) {
+		switch (state.natureType) {
 		case '01': { this.trainRoute(); } break;			// 列车进路
 		case '02': { this.shuntRoute(); } break;			// 调车进路
 		}
 
 		/** 设置点灯类型*/
-		switch (model.lightType) {
+		switch (state.lightType) {
 		case '01': { this.logicalLight(); } break;			// 设置逻辑点灯
 		case '02': { this.physicsLight(); } break;			// 设置物理点灯
 		}
 
 		/**  设置自动类型*/
-		switch (model.autoType) {
+		switch (state.autoType) {
 		case '01': { this.setAutoClose(); } break; 			// 隐藏 隐藏自动信号和自动进路
 		case '02': { this.setAutoSignalOpen(); } break; 	// 显示 设置自动信号模式状态类型
 		case '03': { this.setAutoRouteOpen(); } break; // 显示 设置自动进路模式状态类型
@@ -973,15 +979,15 @@ export default class Signal extends Group {
 		}
 
 		/** 延时解锁*/
-		model.delayType = '02';
+		state.delayType = '02';
-		switch (model.delayType) {
+		switch (state.delayType) {
 		case '01': { } 										// 未延时解锁
 		case '02': { } 										// 人工闭塞延时解锁
 		case '03': { } 										// 自动闭塞延时解锁
 		}
 
 		/** 信号机进路办理，先停止动画，再判断当前颜色是否闪烁*/
-		if (model.routeSetting && (model.autoType == '03' || model.autoType == '04')) {
+		if (state.routeSetting && (state.autoType == '03' || state.autoType == '04')) {
 			this.setAutoFlicker();
 		}
 	}

src/jmap/shape/StationControl.js

@@ -0,0 +1,222 @@
+/*
+*	控制模式
+*/
+import Arc from 'zrender/src/graphic/shape/Arc';
+import Text from 'zrender/src/graphic/Text';
+import Group from 'zrender/src/container/Group';
+
+/** 单个控制灯*/
+class SingleControl extends Group {
+	constructor(model) {
+		super();
+		this.model = model;
+		this.zlevel = model.zlevel;
+		this._subType = model._subType;
+		this.z = 20;
+		this._create(model);
+	}
+
+	_create(model) {
+		var _subType = 'ControlSignal';
+		var _val = '0';
+		if (model.pop) {
+			_subType = 'ControlButton';
+			_val = '1';
+		}
+		this.control = new Arc({
+			pop: model.pop,
+			_subType: _subType,
+			_val: _val,
+			zlevel: this.zlevel,
+			z: this.z,
+			shape: {
+				cx: model.point.x,
+				cy: model.point.y,
+				r: model.style.stationControlmodeR
+			},
+			style: {
+				lineWidth: 0.5,
+				fill: model.style.stationControlGrayColor,
+				stroke: model.style.stationControlGrayColor
+			}
+		});
+
+		this.text = new Text({
+			pop: model.pop,
+			_subType: _subType,
+			zlevel: this.zlevel,
+			z: this.z,
+			position: [0, 0],
+			style: {
+				x: model.point.x,
+				y: model.point.y + model.style.stationControlmodeR + model.style.nameDistance,
+				text: model.context,
+				textFill: model.style.textFontColor,
+				textFont: model.style.textFontSize + 'px ' + model.style.textFontFormat,
+				textAlign: 'middle',
+				textVerticalAlign: 'top'
+			}
+		});
+
+		this.add(this.control);
+		this.add(this.text);
+	}
+
+	setColor(color) {
+		if (color) {
+			this.control.setStyle('fill', color);
+		}
+	}
+}
+
+/** 控制模式*/
+export default class StationControl extends Group {
+	constructor({ _code, _type, zlevel, model, state }, style) {
+		super();
+		this.selected = false;
+		this._code = _code;
+		this._type = _type;
+		this.zlevel = zlevel;
+		this.model = model;
+		this.state = state;
+		this.style = style;
+		this._create();
+		this.on('mouseout', this.mouseleave);
+		this.on('mouseover', this.mouseenter);
+	}
+
+	_create() {
+		const model = this.model;
+		this.emergencyControl = new SingleControl({
+			_subType: 'emergency',
+			style: this.style,
+			zlevel: this.zlevel,
+			point: {
+				x: model.position.x - this.style.stationControlDistance,
+				y: model.position.y
+			},
+			context: model.jjzkContent,
+			pop: false
+		});
+
+		this.centerControl = new SingleControl({
+			_subType: 'center',
+			style: this.style,
+			zlevel: this.zlevel,
+			point: {
+				x: model.position.x,
+				y: model.position.y
+			},
+			context: model.zokContent,
+			pop: false
+		});
+
+		this.substationControl = new SingleControl({
+			_subType: 'substation',
+			style: this.style,
+			zlevel: this.zlevel,
+			point: {
+				x: model.position.x + this.style.stationControlDistance,
+				y: model.position.y
+			},
+			context: model.zakContent,
+			pop: false
+		});
+
+		this.textShadow = new Text({
+			zlevel: this.zlevel,
+			z: this.z + 1,
+			position: [0, -4],
+			silent: true,
+			style: {
+				x: model.position.x,
+				y: model.position.y,
+				text: '',
+				textFill: this.style.textShadowColor, // 黄色
+				textAlign: 'middle',
+				textVerticalAlign: 'top',
+				textFont: 'bold ' + (this.style.stationControlTextSize + 1) + 'px ' + this.style.textFontFormat
+			}
+		});
+
+		this.add(this.substationControl);
+		this.add(this.centerControl);
+		this.add(this.emergencyControl);
+		this.add(this.textShadow);
+		this.setState(model);
+		this.mouseStatusRecover();
+	}
+
+	// 设置状态
+	setState(model) {
+		switch (model.status) {
+		case '00': // 无状态
+			this.emergencyControl.setColor(this.style.stationControlGrayColor);
+			this.substationControl.setColor(this.style.stationControlGrayColor);
+			this.centerControl.setColor(this.style.stationControlGrayColor);
+			break;
+		case '01': // 中控
+			this.emergencyControl.setColor(this.style.stationControlGrayColor);
+			this.substationControl.setColor(this.style.stationControlGrayColor);
+			this.centerControl.setColor(this.style.stationControlGreenColor);
+			break;
+		case '02': // 站控
+			this.emergencyControl.setColor(this.style.stationControlGrayColor);
+			this.substationControl.setColor(this.style.stationControlYellowColor);
+			this.centerControl.setColor(this.style.stationControlGrayColor);
+			break;
+		case '03': // 紧急站控
+			this.emergencyControl.setColor(this.style.stationControlRedColor);
+			this.substationControl.setColor(this.style.stationControlGrayColor);
+			this.centerControl.setColor(this.style.stationControlGrayColor);
+			break;
+		}
+	}
+
+	/** 按钮是否按下*/
+	isPop(e) {
+		for (var i = 0; i < this.childCount(); i++) {
+			var rect = this.childAt(i).getBoundingRect();
+			if (rect.contain(e.offsetX, e.offsetY) && this.childAt(i).pop) {
+				return true;
+			}
+		}
+	}
+
+	getShapeTipPoint() {
+		if (this.stationControl) {
+			var distance = 2;
+			var rect = this.stationControl.getBoundingRect();
+			return {
+				x: rect.x + rect.width / 2,
+				y: rect.y - distance
+			};
+		}
+		return null;
+	}
+
+	mouseStatusVisible(subType) {
+		switch (subType) {
+		case 'emergency': this.textShadow.setStyle({ text: this.model.jjzkContent }); break;
+		case 'center': this.textShadow.setStyle({ text: this.model.zokContent }); break;
+		case 'substation': this.textShadow.setStyle({ text: this.model.zakContent }); break;
+		}
+		this.textShadow.show();
+	}
+
+	mouseStatusRecover() {
+		this.textShadow.hide();
+	}
+
+	mouseenter(e) {
+		if (e.target.parent && e.target.parent._subType) {
+			this.mouseStatusVisible(e.target.parent._subType);
+		}
+	}
+
+	mouseleave(e) {
+		if (e.target._subType) {
+			this.mouseStatusRecover();
+		}
+	}
+}

src/jmap/shape/factory.js

@@ -1,13 +1,23 @@
 import deviceType from '../config/deviceType';
 import Link from './Link';
-import Section from './section';
+import Section from './Section';
 import Signal from './Signal';
+import Station from './station';
+import StationControl from './StationControl';
+import ImageControl from './ImageControl';
+import LcControl from './lcControl';
+import LimitControl from './limitControl';
 
 /** 图库*/
 const mapShape = {};
 mapShape[deviceType.Link] = Link;
 mapShape[deviceType.Section] = Section;
 mapShape[deviceType.Signal] = Signal;
+mapShape[deviceType.Station] = Station;
+mapShape[deviceType.StationControl] = StationControl;
+mapShape[deviceType.ImageControl] = ImageControl;
+mapShape[deviceType.LcControl] = LcControl;
+mapShape[deviceType.LimitControl] = LimitControl;
 
 function shapefactory(type, device, style) {
 	const shape = mapShape[type];

src/jmap/shape/lcControl.js

@@ -0,0 +1,157 @@
+/*
+*	lC区域控制模式
+*/
+import Arc from 'zrender/src/graphic/shape/Arc';
+import Rect from 'zrender/src/graphic/shape/Rect';
+import Text from 'zrender/src/graphic/Text';
+import Group from 'zrender/src/container/Group';
+
+export default class LcControl extends Group {
+	constructor({ _code, _type, zlevel, model, state }, style) {
+		super({name: _code});
+		this.z = 20;
+		this._code = _code;
+		this._type = _type;
+		this.zlevel = zlevel;
+		this.model = model;
+		this.state = state;
+		this.style = style;
+		this._create(model);
+
+		this.on('mouseout', this.mouseleave);
+		this.on('mouseover', this.mouseenter);
+	}
+
+	_create(model) {
+		this.control = new Arc({
+			_subType: 'Control',
+			zlevel: this.zlevel,
+			z: this.z,
+			shape: {
+				cx: model.position.x,
+				cy: model.position.y,
+				r: this.style.zcControlmodeR
+			},
+			style: {
+				lineWidth: 0,
+				fill: ''
+			}
+		});
+
+		this.text = new Text({
+			_subType: 'Text',
+			zlevel: this.zlevel,
+			z: this.z,
+			position: [0, 0],
+			style: {
+				x: model.position.x,
+				y: model.position.y + this.style.zcControlmodeR + this.style.nameDistance,
+				text: model.name,
+				textFill: '',
+				textAlign: 'middle',
+				textVerticalAlign: 'top',
+				textFont: this.style.stationControlTextSize + 'px ' + this.style.textFontFormat
+			}
+		});
+
+		this.textShadow = new Text({
+			zlevel: this.zlevel,
+			z: this.z + 1,
+			position: [4, -2],
+			silent: true,
+			style: {
+				x: model.position.x,
+				y: model.position.y + this.style.zcControlmodeR + this.style.nameDistance,
+				text: model.name,
+				textFill: this.style.textShadowColor, // 黄色
+				textAlign: 'middle',
+				textVerticalAlign: 'top',
+				textFont: 'bold ' + (this.style.stationControlTextSize + 1) + 'px ' + this.style.textFontFormat
+			}
+		});
+		this.controlBorder = new Rect({
+			zlevel: model.zlevel,
+			z: this.z - 1,
+			silent: true,
+			shape: this.control.getBoundingRect(),
+			style: {
+				lineDash: [3, 3],
+				stroke: this.style.borderColor,
+				fill: this.style.transparentColor
+			}
+		});
+
+		this.textBorder = new Rect({
+			zlevel: model.zlevel,
+			z: this.z - 1,
+			silent: true,
+			shape: this.text.getBoundingRect(),
+			style: {
+				lineDash: [3, 3],
+				stroke: this.style.borderColor,
+				fill: this.style.borderContextBackgroundColor
+			}
+		});
+
+		this.add(this.control);
+		this.add(this.text);
+		this.add(this.textShadow);
+		this.add(this.textBorder);
+		this.add(this.controlBorder);
+		this.setState(this.state);
+		this.mouseStatusRecover();
+	}
+
+	// 设置状态
+	setState(state) {
+
+	}
+
+	getShapeTipPoint() {
+		if (this.control) {
+			var distance = 2;
+			var rect = this.control.getBoundingRect();
+			return {
+				x: rect.x + rect.width / 2,
+				y: rect.y - distance
+			};
+		}
+		return null;
+	}
+
+	mouseStatusVisible(subType) {
+		if (subType == 'Text') {
+			this.textShadow.show();
+		}
+
+		if (subType == 'Control') {
+			this.textBorder.show();
+			this.controlBorder.show();
+			this.text.setStyle({ textFill: '#000' });
+			this.control.setStyle({ fill: this.style.borderContextBackgroundColor });
+		}
+	}
+
+	mouseStatusRecover() {
+		this.textShadow.hide();
+		this.textBorder.hide();
+		this.controlBorder.hide();
+		this.text.setStyle({ textFill: '#fff' });
+		this.control.setStyle({ fill: this.style.lcControlColor });
+		// this.setState(this.state);
+	}
+
+	mouseenter(e) {
+		if (e.target._subType) {
+			console.log(e.target, e.target._subType);
+			// this.mouseStatusRecover();
+			this.mouseStatusVisible(e.target._subType);
+		}
+	}
+
+	mouseleave(e) {
+		if (e.target._subType) {
+			this.mouseStatusRecover();
+		}
+	}
+}

src/jmap/shape/limitControl.js

@@ -0,0 +1,171 @@
+/*
+*	权限临时限速
+*/
+import Arc from 'zrender/src/graphic/shape/Arc';
+import Rect from 'zrender/src/graphic/shape/Rect';
+import Text from 'zrender/src/graphic/Text';
+import Group from 'zrender/src/container/Group';
+
+export default class LimitControl extends Group {
+	constructor({ _code, _type, zlevel, model, state }, style) {
+		super({name: _code});
+		this.selected = false;
+		this._code = _code;
+		this._type = _type;
+		this.model = model;
+		this.state = state;
+		this.style = style;
+		this.zlevel = zlevel;
+		this.z = 20;
+		this._create(model);
+
+		this.on('mousedown', this.mouseclick);
+		this.on('mouseout', this.mouseleave);
+		this.on('mouseover', this.mouseenter);
+	}
+
+	_create(model) {
+		this.control = new Arc({
+			_subType: 'Control',
+			zlevel: this.zlevel,
+			z: this.z,
+			shape: {
+				cx: model.position.x,
+				cy: model.position.y,
+				r: this.style.zcControlmodeR
+			},
+			style: {
+				lineWidth: 0,
+				fill: ''
+			}
+		});
+
+		this.text = new Text({
+			_subType: 'Text',
+			zlevel: this.zlevel,
+			z: this.z,
+			position: [0, 0],
+			style: {
+				x: model.position.x,
+				y: model.position.y + this.style.zcControlmodeR + this.style.nameDistance,
+				text: model.name,
+				textFill: '',
+				textAlign: 'middle',
+				textVerticalAlign: 'top',
+				textFont: this.style.stationControlTextSize + 'px ' + this.style.textFontFormat
+			}
+		});
+
+		this.textShadow = new Text({
+			zlevel: this.zlevel,
+			z: this.z + 1,
+			position: [4, -4],
+			silent: true,
+			style: {
+				x: model.position.x,
+				y: model.position.y + this.style.zcControlmodeR + this.style.nameDistance,
+				text: model.name,
+				textFill: this.style.textShadowColor, // 黄色
+				textAlign: 'middle',
+				textVerticalAlign: 'top',
+				textFont: 'bold ' + (this.style.stationControlTextSize + 1) + 'px ' + this.style.textFontFormat
+			}
+		});
+
+		this.controlBorder = new Rect({
+			zlevel: model.zlevel,
+			z: this.z - 1,
+			silent: true,
+			shape: this.control.getBoundingRect(),
+			style: {
+				lineDash: [3, 3],
+				stroke: this.style.borderColor,
+				fill: this.style.transparentColor
+			}
+		});
+
+		this.textBorder = new Rect({
+			zlevel: model.zlevel,
+			z: this.z - 1,
+			silent: true,
+			shape: this.text.getBoundingRect(),
+			style: {
+				lineDash: [3, 3],
+				stroke: this.style.borderColor,
+				fill: this.style.borderContextBackgroundColor
+			}
+		});
+
+		this.add(this.control);
+		this.add(this.text);
+		this.add(this.textShadow);
+		this.add(this.textBorder);
+		this.add(this.controlBorder);
+		this.setState(this.state);
+		this.mouseStatusRecover();
+	}
+
+	// 设置状态
+	setState(state) {
+	}
+
+	getShapeTipPoint() {
+		if (this.control) {
+			var distance = 2;
+			var rect = this.control.getBoundingRect();
+			return {
+				x: rect.x + rect.width / 2,
+				y: rect.y - distance
+			};
+		}
+		return null;
+	}
+
+	mouseStatusVisible(subType) {
+		if (subType == 'Text') {
+			this.textShadow.show();
+		}
+
+		if (subType == 'Control') {
+			this.textBorder.show();
+			this.controlBorder.show();
+			this.text.setStyle({ textFill: '#000' });
+			this.control.setStyle({ fill: this.style.borderContextBackgroundColor });
+		}
+	}
+
+	mouseStatusRecover() {
+		this.textShadow.hide();
+		this.textBorder.hide();
+		this.controlBorder.hide();
+		this.text.setStyle({ textFill: '#fff' });
+		this.control.setStyle({ fill: this.style.limitControlColor });
+		this.setState(this.state);
+	}
+
+	mouseclick(e) {
+		if ([3].includes(e.which)) {
+			this.selected = !this.selected;
+			if (this.selected) {
+				// this.mouseStatusRecover();
+				this.mouseStatusVisible('Control');
+			}
+		}
+	}
+
+	mouseenter(e) {
+		if (!this.selected && e.target._subType) {
+			// this.mouseStatusRecover();
+			this.mouseStatusVisible(e.target._subType);
+		}
+	}
+
+	mouseleave(e) {
+		if (e.target && e.target._subType) {
+			if (!this.selected && e.target._subType) {
+				this.mouseStatusRecover();
+			}
+		}
+
+	}
+}

src/jmap/shape/section.js

@@ -12,7 +12,7 @@ import store from '@/store';
 /** 计轴*/
 class SectionAxle extends Group {
 	constructor(model) {
-		super();
+		super({name: `${model.name}`});
 		this.model = model;
 		this.zlevel = model.zlevel;
 		this.z = 5;
@@ -63,7 +63,7 @@ class SectionAxle extends Group {
 /** 分隔符*/
 class SectionSeparator extends Group {
 	constructor(model) {
-		super();
+		super({name: `${model.name}`});
 		this.model = model;
 		this.zlevel = model.zlevel;
 		this.z = 6;
@@ -161,7 +161,7 @@ class SectionSeparator extends Group {
 /** 创建区段限速限集合*/
 class LimitLines extends Group {
 	constructor(model) {
-		super();
+		super({name: `${model.name}`});
 		this.model = model;
 		this.zlevel = model.zlevel;
 		this.z = model.z;
@@ -296,7 +296,7 @@ class LimitLines extends Group {
 /** 创建区段线集合*/
 class Lines extends Group {
 	constructor(model) {
-		super();
+		super({name: `${model.name}`});
 		this.model = model;
 		this.zlevel = model.zlevel;
 		this.z = model.z;
@@ -409,7 +409,7 @@ class Lines extends Group {
 /** 区段*/
 export default class Section extends Group {
 	constructor({ _code, _type, zlevel, model, state }, style) {
-		super();
+		super({name: _code});
 		this._code = _code;
 		this._type = _type;
 		this.zlevel = zlevel;
@@ -427,6 +427,7 @@ export default class Section extends Group {
 
 	_create() {
 		const model = this.model;
+		const state = this.state;
 		// 01:物理区段；02逻辑区段；03道岔区段
 		this.createSectionText(); // 创建区段文字
 		if (model.type === '01' && (
@@ -438,7 +439,7 @@ export default class Section extends Group {
 			if (model.type === '01') {
 				this.createAxles();			// 创建计轴
 			}
-			this.setState(model);
+			this.setState(state);
 		}
 
 		// this.mouseStateRecover();
@@ -453,6 +454,7 @@ export default class Section extends Group {
 		this.section = new Lines({
 			zlevel: this.zlevel,
 			z: this.z,
+			name: `${this._code}_Lines`,
 			isSwitchSection: model.isSwitchSection,
 			isCurve: model.isCurve,
 			points: model.points,
@@ -485,6 +487,7 @@ export default class Section extends Group {
 		this.speedLimitLeft = new LimitLines({
 			zlevel: this.zlevel + 4,
 			z: this.z,
+			name: `${this._code}_LimitLines_L`,
 			position: [x, -y],
 			isCurve: model.isCurve,
 			points: model.points,
@@ -496,6 +499,7 @@ export default class Section extends Group {
 		this.speedLimitRight = new LimitLines({
 			zlevel: this.zlevel + 4,
 			z: this.z,
+			name: `${this._code}_LimitLines_R`,
 			position: [-x, y],
 			isCurve: model.isCurve,
 			points: model.points,
@@ -696,6 +700,7 @@ export default class Section extends Group {
 			this.lUpAxle = new SectionAxle({
 				style: style,
 				zlevel: this.zlevel,
+				name: `${this._code}_SectionAxle_LU`,
 				point: {
 					x: model.points[0].x,
 					y: model.points[0].y
@@ -707,6 +712,7 @@ export default class Section extends Group {
 			this.lBottomAxle = new SectionAxle({
 				style: style,
 				zlevel: this.zlevel,
+				name: `${this._code}_SectionAxle_LB`,
 				point: {
 					x: model.points[0].x,
 					y: model.points[0].y
@@ -720,6 +726,7 @@ export default class Section extends Group {
 			this.rUpAxle = new SectionAxle({
 				style: style,
 				zlevel: this.zlevel,
+				name: `${this._code}_SectionAxle_RU`,
 				point: {
 					x: model.points[model.points.length - 1].x,
 					y: model.points[model.points.length - 1].y
@@ -731,6 +738,7 @@ export default class Section extends Group {
 			this.rBottomAxle = new SectionAxle({
 				style: style,
 				zlevel: this.zlevel,
+				name: `${this._code}_SectionAxle_RB`,
 				point: {
 					x: model.points[model.points.length - 1].x,
 					y: model.points[model.points.length - 1].y
@@ -758,6 +766,7 @@ export default class Section extends Group {
 			traingle = new JTriangle(model.points[0], model.points[1]);
 			this.lPartition = new SectionSeparator({
 				style: style,
+				name: `${this._code}_SectionSeparator_L`,
 				borderBorderShow: model.borderBorderShow,
 				zlevel: this.zlevel - 2,
 				traingle: traingle,
@@ -772,6 +781,7 @@ export default class Section extends Group {
 			/** 创建右侧分隔符*/
 			traingle = new JTriangle(model.points[model.points.length - 2], model.points[model.points.length - 1]);
 			this.rPartition = new SectionSeparator({
+				name: `${this._code}_SectionSeparator_R`,
 				style: style,
 				borderBorderShow: model.borderBorderShow,
 				zlevel: this.zlevel - 2,
@@ -990,9 +1000,9 @@ export default class Section extends Group {
 	}
 
 	/** 设置状态*/
-	setState(model) {
+	setState(state) {
 		this.recover();
-		switch (model.status) {
+		switch (state.status) {
 		case '00': /** 未定义*/
 			this.undefine();
 			break;
@@ -1040,12 +1050,12 @@ export default class Section extends Group {
 		}
 
 		/** 区段切除*/
-		if (model.cutOff) {
+		if (state.cutOff) {
 			this.sectionCutOff();
 		}
 
 		/** 是否限速*/
-		if (model.speedUpperLimit >= 0) {
+		if (state.speedUpperLimit >= 0) {
 			this.setSpeedUpperLimit();
 		}
 	}

src/jmap/shape/station.js

@@ -0,0 +1,77 @@
+/*
+*	车站
+*/
+import Group from 'zrender/src/container/Group';
+import Text from 'zrender/src/graphic/Text';
+
+export default class Station extends Group {
+	constructor({ _code, _type, zlevel, model, state }, style) {
+		super();
+		this.z = 40;
+		this._code = _code;
+		this._type = _type;
+		this.zlevel = zlevel;
+		this.model = model;
+		this.state = state;
+		this.style = style;
+		this._create();
+	}
+
+	_create() {
+		const model = this.model;
+		const style = this.style;
+		if (model.visible) {
+			this.stationText = new Text({
+				zlevel: this.zlevel,
+				z: this.z,
+				position: [0, 0],
+				style: {
+					x: model.position.x,
+					y: model.position.y,
+					text: model.name,
+					textAlign: 'middle',
+					textVerticalAlign: 'top',
+					textFont: model.nameFont || '18px ' + style.textFontFormat,
+					textFill: model.nameFontColor
+				}
+			});
+
+			this.mileageText = new Text({
+				zlevel: this.zlevel,
+				z: this.z,
+				position: [0, 0],
+				style: {
+					x: model.position.x,
+					y: model.position.y + parseInt(model.nameFont) + 2,
+					text: model.kmPost,
+					textAlign: 'middle',
+					textVerticalAlign: 'top',
+					textFont: model.kmPostFont || '12px ' + style.textFontFormat,
+					textFill: model.kmPostFontColor
+				}
+			});
+
+			this.add(this.stationText);
+			this.add(this.mileageText);
+			this.setShowMileageText(model.kmPostShow);
+			this.setState(model);
+		}
+	}
+
+	/** 设置公里标是否显示*/
+	setShowMileageText(show) {
+		if (show) {
+			this.mileageText.show();
+		} else {
+			this.mileageText.hide();
+		}
+	}
+
+	// eslint-disable-next-line no-unused-vars
+	setState(model) {
+	}
+
+	getShapeTipPoint() {
+		return null;
+	}
+}

src/jmap/utils/parser.js

@@ -25,6 +25,21 @@ export function parser(data, defaultStateDict) {
 		zrUtil.each(data.signalList || [], (elem) => {
 			mapDevice[elem.code] = deviceFactory(deviceType.Signal, defaultStateDict, elem);
 		});
+		zrUtil.each(data.stationList || [], (elem) => {
+			mapDevice[elem.code] = deviceFactory(deviceType.Station, defaultStateDict, elem);
+		});
+		zrUtil.each(data.stationControlList || [], (elem) => {
+			mapDevice[elem.code] = deviceFactory(deviceType.StationControl, defaultStateDict, elem);
+		});
+		zrUtil.each(data.resourceList || [], (elem) => {
+			mapDevice[elem.code] = deviceFactory(deviceType.ImageControl, defaultStateDict, elem);
+		});
+		zrUtil.each(data.lcList || [], (elem) => {
+			mapDevice[elem.code] = deviceFactory(deviceType.LcControl, defaultStateDict, elem);
+		});
+		zrUtil.each(data.tempSpeedLimitList || [], (elem) => {
+			mapDevice[elem.code] = deviceFactory(deviceType.LimitControl, defaultStateDict, elem);
+		});
 	}
 
 	return mapDevice;