rt-sim-training-client/src/jmapNew/shape/Station/index.js

/*
*	车站
*/
import Group from 'zrender/src/container/Group';
import ETextName from '../element/ETextName';
import EControl from '../element/EControl';
import EMouse from './EMouse';
import EMouseDraw from './EMouseDraw';
import ESingleControl from './ESingleControl';
import EArrow from './EArrow';
import { arrow } from '../utils/ShapePoints';
import Rect from 'zrender/src/graphic/shape/Rect';
import Text from 'zrender/src/graphic/Text';
import store from '@/store/index';

import EStationText from './EStationText';
import { traverseLineElements } from '../utils/ShapeStatusCovert';

import Vue from 'vue';

export default class Station extends Group {
    constructor(model, {style}) {
        super();
        this._code = model.code;
        this._type = model._type;
        this.zlevel = model.zlevel;
        this.z = 40;
        this.model = model;
        this.style = style;
        this.noneBeforeMode = '';
        this.isShowShape = true;
        this.create();
        this.createTurnBack(); // 创建按图折返
        this.createControlMode();
        this.setState(model);
        this.checkIsDrawMap();
        this.setVisible(model.visible);
    }

    create() {
        const model = this.model;
        const style = this.style;

        // 站台所有的绘图元素
        const elementTypeList = {
            'stationText': EStationText // 车站名称   （普通站台样式）
        };

        // 遍历当前线路下的绘图元素 组合模式
        traverseLineElements(style.Station, elementTypeList, model, style, this);

        const path = window.location.href;
        if (style.Station.kmPostShow || path.includes('/map/draw')) { // 公里标是否显示
            let direction = 1;
            if (this.style.Station.kilometerPosition == 'up') {
                direction = -1;
            }
            const offset = { x: 0, y: 0 };
            if (model.kilometerPosition) {
                offset.x = model.kilometerPosition.x;
                offset.y = model.kilometerPosition.y;
            }
            this.mileageText = new ETextName({
                zlevel: this.zlevel,
                z: this.z,
                position: [0, 0],
                x: model.position.x + offset.x,
                y: model.position.y + ((parseInt(model.nameFont) + 2) * direction) + offset.y,
                fontWeight: model.fontWeight,
                fontSize: model.kmPostFont || 18,
                fontFamily: style.fontFamily,
                silent: !model.visible,
                text: model.kmPost,
                textAlign: 'middle',
                textVerticalAlign: 'top',
                textFill: model.kmPostFontColor
            });
            this.add(this.mileageText);
            model.kmPostShow ? this.mileageText.show() : this.mileageText.hide();
            if (!model.visible) {
                this.mileageText.setStyle('fontSize', 0);
            }
        }

        // if (!model.visible) { // 隐藏车站
        //     // this.subheadText && this.subheadText.setStyle('textFill', 'rgba(0,0,0,0)');
        //     // this.mileageText && this.mileageText.setStyle('textFill', 'rgba(0,0,0,0)');
        //     // this.stationText && this.stationText.setStyle('textFill', 'rgba(0,0,0,0)');
        //     this.eachChild(elem => { elem.hide(); });
        // }
    }
    createTurnBack() { // 创建按图折返
        const model = this.model;
        const style = this.style;
        if (model.visible && model.createTurnBack) {
            this.turnBacks = [];
            if (style.Station.turnBack.topText) {
                this.turnBackTopText = new Text({
                    zlevel: this.zlevel,
                    z: this.z,
                    position: [0, 0],
                    style: {
                        x: model.turnBackPoint.x,
                        y: model.turnBackPoint.y - style.Station.lamp.radiusR - style.Station.turnBack.toptextDistance,
                        fontWeight: style.Station.text.fontWeight,
                        fontSize: style.Station.text.fontSize,
                        fontFamily: style.fontFamily,
                        text: model.name + '站后折返',
                        textFill: '#fff',
                        textAlign: 'middle',
                        textVerticalAlign: 'top'
                    }
                });
                this.add(this.turnBackTopText);
            }
            for (let index = 0; index < style.Station.turnBack.lamp; index++) {
                const turnBack = new EControl({
                    zlevel: this.zlevel,
                    z: this.z,
                    arc: {
                        shape: {
                            cx: model.turnBackPoint.x + style.Station.turnBack.lampSpace * index,
                            cy: model.turnBackPoint.y,
                            r: style.Station.lamp.radiusR
                        },
                        lineWidth: 0,
                        lineDash: style.Station.turnBack.lineDash,
                        fill: style.Station.lamp.controlColor
                    },
                    text: {
                        position: [0, 0],
                        x: model.turnBackPoint.x + style.Station.turnBack.lampSpace * index,
                        y: model.turnBackPoint.y + style.Station.lamp.radiusR + style.Station.StationControl.text.distance,
                        fontWeight: style.Station.text.fontWeight,
                        fontSize: style.Station.text.fontSize,
                        fontFamily: style.fontFamily,
                        text: style.Station.turnBack.textName || '按图折返',
                        textFill: '#fff',
                        textAlign: 'middle',
                        textVerticalAlign: 'top'
                    },
                    style: this.style
                });
                this.turnBacks.push(turnBack);
            }
            this.turnBacks.forEach(lamp => {
                lamp.setArcBorder(style.Station.turnBack.showLampBorder);
                this.add(lamp);
            });
        }
    }
    // 创建控制模式
    createControlMode() {
        const model = this.model;
        if (!this.style.Station.StationControl.disPlayNone) {
            if (this.style.Station.StationControl.special) {
                if (model.visible && model.createControlMode) { // model.createControlMode  控制模式
                    this.createSpecialControlMode();
                }
            } else {
                if (model.visible && model.createControlMode) { // model.createControlMode  控制模式
                    this.createEmergencyControl(); // 紧急站控
                    this.createCenterControl(); // 中控按钮
                    this.createSubstationControl(); // 站控按钮
                    this.createInterconnectedControl(); // 联锁控
                }
            }

        }
        this.setState(model);
    }

    createSpecialControlMode() {
        const model = this.model;
        this.stationControlText = new Text({
            zlevel: this.zlevel,
            z: this.z,
            style: {
                x: model.controlModePoint.x,
                y: model.controlModePoint.y,
                fontWeight: this.style.Station.StationControl.text.fontWeight,
                fontSize: this.style.Station.StationControl.text.fontSize,
                fontFamily: this.style.fontFamily,
                text: 'CC',
                textFill: this.style.Station.StationControl.text.centerControlColor,
                textAlign: this.style.Station.StationControl.text.textAlign,
                textVerticalAlign: this.style.Station.StationControl.text.textVerticalAlign
            }
        });
        this.add(this.stationControlText);
    }

    createEmergencyControl() { // 紧急站控
        const model = this.model;
        if (this.style.Station.StationControl.emergencyControl.show) {
            this.emergencyControl = new ESingleControl({
                _subType: 'emergency',
                style: this.style,
                zlevel: this.zlevel,
                z: this.z,
                point: {
                    x: model.controlModePoint.x - this.style.Station.StationControl.lamp.distance * 3 / 2 + this.style.Station.StationControl.emergencyControl.offset.x,
                    y: model.controlModePoint.y + this.style.Station.StationControl.emergencyControl.offset.y
                },
                context: this.style.Station.StationControl.emergencyControl.text,
                pop: false
            });
            this.add(this.emergencyControl);
            if (this.style.Station.StationControl.emergencyControl.arrowShow) {
                const x = model.controlModePoint.x - this.style.Station.StationControl.lamp.distance * 2 + this.style.Station.StationControl.emergencyControl.offset.x;
                const y = model.controlModePoint.y + this.style.Station.StationControl.emergencyControl.offset.y;
                const point = arrow(x, y + this.style.Station.StationControl.lamp.radiusR / 2, this.style.Station.StationControl.lamp.distance / 6, this.style.Station.StationControl.lamp.radiusR * 0.8);
                this.emergencyArrowsControl = new EArrow({
                    zlevel: this.zlevel,
                    z: this.z,
                    style: this.style,
                    count: this.count,
                    drict: 1,
                    point: point,
                    x: model.controlModePoint.x + this.style.Station.StationControl.lamp.offset.x,
                    y: model.controlModePoint.y + this.style.Station.StationControl.lamp.radiusR / 2 + this.style.Station.StationControl.lamp.offset.y,
                    fill: this.style.Station.StationControl.emergencyControl.grayColor,
                    lineWidth: 1,
                    stroke: this.style.sidelineColor
                });
                this.add(this.emergencyArrowsControl);
            }
        }
    }

    createCenterControl() { // 中控按钮
        const model = this.model;
        if (this.style.Station.StationControl.centerControl.show) {
            this.centerControl = new ESingleControl({
                _subType: 'center',
                style: this.style,
                zlevel: this.zlevel,
                z: this.z,
                point: {
                    x: model.controlModePoint.x - this.style.Station.StationControl.lamp.distance / 2 + this.style.Station.StationControl.centerControl.offset.x,
                    y: model.controlModePoint.y + this.style.Station.StationControl.centerControl.offset.y
                },
                context: this.style.Station.StationControl.centerControl.text,
                pop: false
            });
            this.add(this.centerControl);
            if (this.style.Station.StationControl.centerControl.arrowShow) {
                const x = model.controlModePoint.x - this.style.Station.StationControl.lamp.distance * 3 / 2 + this.style.Station.StationControl.emergencyControl.offset.x;
                const y = model.controlModePoint.y + this.style.Station.StationControl.emergencyControl.offset.y;
                const point = arrow(x, y + this.style.Station.StationControl.lamp.radiusR / 2, this.style.Station.StationControl.lamp.distance / 6, this.style.Station.StationControl.lamp.radiusR * 0.8);
                this.centerArrowsControl = new EArrow({
                    zlevel: this.zlevel,
                    z: this.z,
                    style: this.style,
                    count: this.count,
                    drict: 1,
                    point: point,
                    x: model.controlModePoint.x + this.style.Station.StationControl.lamp.offset.x,
                    y: model.controlModePoint.y + this.style.Station.StationControl.lamp.radiusR / 2 + this.style.Station.StationControl.lamp.offset.y,
                    fill: this.style.Station.StationControl.centerControl.grayColor,
                    lineWidth: 1,
                    stroke: this.style.sidelineColor
                });
                this.add(this.centerArrowsControl);
            }
        }
        // 中控按钮
        if (this.style.Station.StationControl.centerControl.buttonShow) { // 宁波一 显示
            this.centerControlButton = new ESingleControl({
                _subType: 'button',
                style: this.style,
                zlevel: this.zlevel,
                z: this.z,
                point: {
                    x: model.controlModePoint.x + this.style.Station.StationControl.lamp.distance * 3 / 2 + this.style.Station.StationControl.lamp.offset.x,
                    y: model.controlModePoint.y + this.style.Station.StationControl.lamp.offset.y
                },
                context: this.style.Station.StationControl.centerControl.buttonText,
                pop: false
            });
            this.add(this.centerControlButton);
            const arcRect = this.centerControlButton.getArcBoundingRect();
            this.arcBorder = new Rect({
                zlevel: this.zlevel,
                z: this.z,
                silent: true,
                shape: arcRect,
                style: {
                    lineDash: null,
                    stroke: this.style.Station.StationControl.lamp.stroke,
                    fill: this.style.Station.StationControl.lamp.fill
                }
            });
            this.add(this.arcBorder);
        }
        if (this.style.Station.StationControl.centerControl.lightShow) {
            this.controlLight = new ESingleControl({
                _subType: 'light',
                style: this.style,
                zlevel: this.zlevel,
                z: this.z,
                point: {
                    x: model.controlModePoint.x + this.style.Station.StationControl.lamp.distance * 9 / 2 + this.style.Station.StationControl.lamp.offset.x,
                    y: model.controlModePoint.y + this.style.Station.StationControl.lamp.offset.y
                },
                context: this.style.Station.StationControl.centerControl.lightText,
                pop: false
            });
            this.add(this.controlLight);
            const arcRect = this.controlLight.getArcBoundingRect();
            this.lightArcBorder = new Rect({
                zlevel: this.zlevel,
                z: this.z,
                silent: true,
                shape: arcRect,
                style: {
                    lineDash: null,
                    stroke: this.style.Station.StationControl.lamp.stroke,
                    fill: this.style.Station.StationControl.lamp.fill
                }
            });
            this.add(this.lightArcBorder);
        }
        if (this.style.Station.StationControl.centerControl.preResetShow) {
            this.controlPreReset = new ESingleControl({
                _subType: 'preReset',
                style: this.style,
                zlevel: this.zlevel,
                z: this.z,
                point: {
                    x: model.controlModePoint.x + this.style.Station.StationControl.lamp.distance * 3 + this.style.Station.StationControl.lamp.offset.x,
                    y: model.controlModePoint.y + this.style.Station.StationControl.lamp.offset.y
                },
                context: this.style.Station.StationControl.centerControl.preResetText,
                pop: false
            });
            this.add(this.controlPreReset);
            const arcRect = this.controlPreReset.getArcBoundingRect();
            this.preResetArcBorder = new Rect({
                zlevel: this.zlevel,
                z: this.z,
                silent: true,
                shape: arcRect,
                style: {
                    lineDash: null,
                    stroke: this.style.Station.StationControl.lamp.stroke,
                    fill: this.style.Station.StationControl.lamp.fill
                }
            });
            this.add(this.preResetArcBorder);
        }
    }

    createSubstationControl() { // 站控按钮
        const model = this.model;
        if (this.style.Station.StationControl.substationControl.show) {
            this.substationControl = new ESingleControl({
                _subType: 'substation',
                style: this.style,
                zlevel: this.zlevel,
                z: this.z,
                point: {
                    x: model.controlModePoint.x + this.style.Station.StationControl.lamp.distance / 2 + this.style.Station.StationControl.substationControl.offset.x,
                    y: model.controlModePoint.y + this.style.Station.StationControl.substationControl.offset.y
                },
                context: this.style.Station.StationControl.substationControl.text,
                pop: false
            });
            this.add(this.substationControl);
            if (this.style.Station.StationControl.substationControl.arrowShow) {
                const x = this.model.controlModePoint.x + this.style.Station.StationControl.substationControl.offset.x;
                const y = this.model.controlModePoint.y + this.style.Station.StationControl.substationControl.offset.y;
                const point = arrow(x, y + this.style.Station.StationControl.lamp.radiusR / 2, this.style.Station.StationControl.lamp.distance / 6, this.style.Station.StationControl.lamp.radiusR * 0.8);
                this.substationArrowsControl = new EArrow({
                    zlevel: this.zlevel,
                    z: this.z,
                    style: this.style,
                    count: this.count,
                    drict: 1,
                    point: point,
                    x: model.controlModePoint.x + this.style.Station.StationControl.lamp.offset.x,
                    y: model.controlModePoint.y + this.style.Station.StationControl.lamp.radiusR / 2 + this.style.Station.StationControl.lamp.offset.y,
                    fill: this.style.Station.StationControl.substationControl.grayColor,
                    lineWidth: 1,
                    stroke: this.style.sidelineColor
                });
                this.add(this.substationArrowsControl);
            }
        }
    }

    createInterconnectedControl() { // 联锁控
        const model = this.model;
        if (this.style.Station.StationControl.interconnectedControl.show) { // 成都三会显示
            this.interconnectedControl = new ESingleControl({
                _subType: 'interconnected',
                style: this.style,
                zlevel: this.zlevel,
                z: this.z,
                point: {
                    x: model.controlModePoint.x + this.style.Station.StationControl.lamp.distance * 3 / 2 + this.style.Station.StationControl.interconnectedControl.offset.x,
                    y: model.controlModePoint.y + this.style.Station.StationControl.interconnectedControl.offset.y
                },
                context: this.style.Station.StationControl.interconnectedControl.text || '联锁控',
                pop: false
            });
            this.add(this.interconnectedControl);
        }
    }

    handleCenter() { // 中控
        this.noneBeforeMode = 'Center';
        this.emergencyControl && this.emergencyControl.setColor(this.style.Station.StationControl.lamp.grayColor);
        this.substationControl && this.substationControl.setColor(this.style.Station.StationControl.lamp.grayColor);
        this.centerControl && this.centerControl.setColor(this.style.Station.StationControl.lamp.greenColor);
        this.centerControl && this.centerControl.setTextColor(this.style.Station.StationControl.lamp.greenColor); // 文字颜色
        if (!this.style.Station.stationText.isSpecialType) {
            this.stationText.setColor('#1fdc1f');
        }

        this.stationControlText && this.stationControlText.setStyle({text:'CC', textFill:this.style.Station.StationControl.text.centerControlColor});
        //
        //
        // if (this.style.Station.StationControl.disPlayNone) {
        //     this.stationText && this.stationText.setStyle('textFill', '#1fdc1f');
        //     if (this.model.subheadDisplay) { // 副标题
        //         this.subheadText && this.subheadText.setStyle('textFill', '#1fdc1f');
        //     }
        // }
    }

    handleLocal() { // 站控
        this.noneBeforeMode = 'Local';
        this.emergencyControl && this.emergencyControl.setColor(this.style.Station.StationControl.lamp.grayColor);
        this.substationControl && this.substationControl.setColor(this.style.Station.StationControl.lamp.yellowColor);
        this.substationControl && this.substationControl.setTextColor(this.style.Station.StationControl.lamp.yellowColor); // 文字颜色
        this.centerControl && this.centerControl.setColor(this.style.Station.StationControl.lamp.grayColor);
        this.substationArrowsControl && this.substationArrowsControl.setColor(this.style.Station.StationControl.lamp.greenColor);
        this.stationControlText && this.stationControlText.setStyle({text:'LC', textFill:this.style.Station.StationControl.text.stationControlColor});
        // if (this.style.Station.StationControl.disPlayNone) {
        //     this.stationText && this.stationText.setStyle('textFill', '#fff');
        //     if (this.model.subheadDisplay) { // 副标题
        //         this.subheadText && this.subheadText.setStyle('textFill', '#fff');
        //     }
        // }
        if (!this.style.Station.stationText.isSpecialType) {
            this.stationText.setColor('#fff');
        }
    }

    handleEmergency() { // 紧急站控
        this.emergencyControl && this.emergencyControl.setColor(this.style.Station.StationControl.lamp.redColor);
        this.emergencyControl && this.emergencyControl.setTextColor(this.style.Station.StationControl.lamp.redColor); // 紧急 颜色
        this.substationControl && this.substationControl.setColor(this.style.Station.StationControl.lamp.grayColor);
        this.centerControl && this.centerControl.setColor(this.style.Station.StationControl.lamp.grayColor);
        this.emergencyArrowsControl && this.emergencyArrowsControl.setColor(this.style.Station.StationControl.lamp.greenColor);
        this.stationControlText && this.stationControlText.setStyle({text:'EL', textFill:this.style.Station.StationControl.text.emergencyControlColor});
        // if (this.style.Station.StationControl.disPlayNone) {
        //     this.stationText && this.stationText.setStyle('textFill', '#fff');
        //     if (this.model.subheadDisplay) { // 副标题
        //         this.subheadText && this.subheadText.setStyle('textFill', '#fff');
        //     }
        // }
        if (!this.style.Station.stationText.isSpecialType) {
            this.stationText.setColor('#fff');
        }
    }

    handleInterlock() { // 联锁控  成都三号线
        this.emergencyControl && this.emergencyControl.setColor(this.style.Station.StationControl.lamp.grayColor);
        this.emergencyControl && this.emergencyControl.setTextColor(this.style.Station.StationControl.lamp.grayColor);
        this.substationControl && this.substationControl.setColor(this.style.Station.StationControl.lamp.grayColor);
        this.substationControl && this.substationControl.setTextColor(this.style.Station.StationControl.lamp.grayColor);
        this.centerControl && this.centerControl.setColor(this.style.Station.StationControl.lamp.grayColor);
        this.centerControl && this.centerControl.setTextColor(this.style.Station.StationControl.lamp.grayColor);
        this.interconnectedControl && this.interconnectedControl.setColor(this.style.Station.StationControl.lamp.purpleColor);
        this.interconnectedControl && this.interconnectedControl.setTextColor(this.style.Station.StationControl.lamp.purpleColor);
    }

    handleNone() { // 空
        if (this.style.Station.stationText.noneModeColor) {
            this.stationText.setColor(this.style.Station.stationText.noneModeColor);
        }
        if (this.style.Station.stationText.noneModeFlash) {
            this.stationText.setAnimateStyle(this.noneBeforeMode);
        }
    }

    recover() {
        this.emergencyControl && this.emergencyControl.setColor(this.style.Station.StationControl.lamp.grayColor);
        this.emergencyControl && this.emergencyControl.setTextColor(this.style.Station.StationControl.text.fontColor);
        this.substationControl && this.substationControl.setColor(this.style.Station.StationControl.lamp.grayColor);
        this.substationControl && this.substationControl.setTextColor(this.style.Station.StationControl.text.fontColor);
        this.centerControl && this.centerControl.setColor(this.style.Station.StationControl.lamp.grayColor);
        this.centerControl && this.centerControl.setTextColor(this.style.Station.StationControl.text.fontColor);
        this.interconnectedControl && this.interconnectedControl.setColor(this.style.Station.StationControl.lamp.grayColor);
        this.interconnectedControl && this.interconnectedControl.setTextColor(this.style.Station.StationControl.text.fontColor);

        this.substationArrowsControl && this.substationArrowsControl.setColor(this.style.Station.StationControl.lamp.grayColor);
        this.emergencyArrowsControl && this.emergencyArrowsControl.setColor(this.style.Station.StationControl.lamp.grayColor);
        if (this.style.Station.stationText.isSpecialType) {
            this.stationText.setColor(this.style.Station.stationText.noneModeColor);
            // sationEle.controller
        } else {
            this.stationText && this.stationText.stopAnimate();
        }
    }

    // 设置状态
    setState(model) {
        if (!this.isShowShape) return;
        this.recover();
        model.controlMode && this['handle' + model.controlMode]();
        model.controller && this.handleComplexControl(model.controller);

        if (this.style.Station.syncCentralizeStation && model.controlMode && model.centralized) {
            model.chargeStationCodeList.forEach(item => {
                const device = store.getters['map/getDeviceByCode'](item);
                device.controlMode = model.controlMode;
                device && device.instance && device.instance.recover();
                device && device.instance && device.instance['handle' + model.controlMode]();
            });
        }
        if (model.tbStrategyId) {
            store.state.map.map.tbStrategyList.forEach(item => {
                if (item.stationCode == model.code) {
                    const modelData = Vue.prototype.$jlmap.mapDevice[item.code];
                    modelData && modelData.instance && modelData.instance.setState(modelData, model.tbStrategyId);
                }
            });
        }
    }

    handleComplexControl(controller) {
        // debugger;
        // store.state.user.id
        // if (controller == ) {
        //     this.stationText.setColor(this.style.Station.stationText.currentModeColor);
        // } else {
        //     debugger;
        // }
    }

    // setState(model) {
    //     if (!this.isShowShape) return;
    //     // // 新版地图使用新版状态变更方式
    //     this.recover();

    //     // 更新状态
    //     const currentTypeList = this.style.Station.elemnetType;
    //     currentTypeList.forEach(element => {
    //         this[element].setState(model);
    //     });
    // }

    getShapeTipPoint(opts) {
        let rect;
        switch (opts.subDeviceType) {
        case 'button':
            rect = this.centerControlButton.getArcBoundingRect();
            break;
        case 'center':
            rect = this.centerControl.getArcBoundingRect();
            break;
        case 'substation':
            rect = this.substationControl.getArcBoundingRect();
            break;
        case 'emergency':
            rect = this.emergencyControl.getArcBoundingRect();
            break;
        case 'interconnected':
            rect = this.interconnectedControl.getArcBoundingRect();
            break;
        default:
            rect = this.stationText.getBoundingRect();
            break;
        }

        return {
            x: rect.x + rect.width,
            y: rect.y
        };
    }

    getBoundingRect() {
        const rect = this.stationText.getBoundingRect().clone();
        // if (this.model.subheadDisplay) {
        //     const subheadText = this.subheadText.getBoundingRect().clone();
        //     rect.union(subheadText);
        //     return rect;
        // } else {
        //     return rect;
        // }
        return rect;
    }

    drawSelected(selected) {
        this.EMouse && this.EMouse.drawSelected(selected);
    }

    checkIsDrawMap() {
        const path = window.location.href;
        if (path.includes('/map/draw')) {
            this.EMouse = new EMouseDraw(this);
            this.add(this.EMouse);
            this.on('mouseout', e => { this.EMouse.mouseout(e); });
            this.on('mouseover', e => { this.EMouse.mouseover(e); });
        } else if (this.style.Station.StationControl.mouseOverStyle) {
            this.EMouse = new EMouse(this);
            this.add(this.EMouse);
            this.on('mouseout', e => { this.EMouse.mouseout(e); });
            this.on('mouseover', e => { this.EMouse.mouseover(e); });
        }
    }
    setShowMode() {
    }
    setShowStation(flag) {
        if (flag) {
            if (this.model.visible) {
                this.eachChild(item => {
                    item.show();
                });
                if (this.mileageText) {
                    this.model.kmPostShow ? this.mileageText.show() : this.mileageText.hide();
                }
            }
            this.isShowShape = true;
            this.setState(this.model);
        } else {
            this.eachChild(item => {
                item.hide();
            });
            this.isShowShape = false;
        }
    }

    setVisible(visible) {
        if (visible) {
            this.eachChild(elem => { elem.show(); });
        } else {
            this.eachChild(elem => { elem.hide(); });
        }
    }
    getAnchorPoint() {
        return this.model.position;
    }
}