canvas绘制红绿灯路口（二）

风舞红枫

于 2024-06-20 16:14:35 发布

阅读量359

点赞数 6

分类专栏： canvas 文章标签： canvas

本文链接：https://blog.csdn.net/qq_42231248/article/details/139835238

版权

canvas 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

系列文章
canvas绘制红绿灯路口（一）

无图不欢，先上图
在这里插入图片描述

优化项：
一：加入人行道红绿信号
二：加入专用车道标识（无方向标识时采用专用车道标识）
三：东南西北四项路口优化绘制逻辑，美化图像
四：加入拖拽、缩放图例

使用方法（以vue3为例）

<template>
    <canvas class="lane" ref="laneCanvas" />
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import Lane from 'services/roadCanvas/lane';

const laneCanvas = ref(null);
/**
 * 车道方向，进口方向
 * 1 - 北，2 - 东北，3 - 东，4 - 东南，
 * 5 - 南，6 - 西南，7 - 西，8 - 西北
 *
 * 直行放行 nThrough 0不放行 1放行
 * 左转放行 nTurnLeft 0不放行 1放行
 * 右转放行 nTurnRight 0不放行 1放行
 * 调头 nTurnAround 0不放行 1放行
 *
 * 通道相位 nChannelNumberPhase 1-红灯 2绿灯 3黄灯
 */

const data = [
    {
        'approachDirection': 1,
        'cdireCtion': '北',
        'lanes': [
            {
                'laneNo': '1',
                'through': 0,
                'turnLeft': 1,
                'turnRight': 0,
                'turnAround': 0,
                'directionIdentifyings': '左转',
                'channelNumberPhase': '2',
                'trafficLightColor': '#33CC00'
            },
            {
                'laneNo': '2',
                'through': 1,
                'turnLeft': 0,
                'turnRight': 0,
                'turnAround': 0,
                'directionIdentifyings': '直行',
                'channelNumberPhase': '1',
                'trafficLightColor': '#FF0033'
            },
            {
                'laneNo': '3',
                'through': 1,
                'turnLeft': 0,
                'turnRight': 0,
                'turnAround': 0,
                'directionIdentifyings': '直行',
                'channelNumberPhase': '1',
                'trafficLightColor': '#FF0033'
            },
            {
                'laneNo': '4',
                'through': 1,
                'turnLeft': 0,
                'turnRight': 0,
                'turnAround': 0,
                'directionIdentifyings': '直行',
                'channelNumberPhase': '1',
                'trafficLightColor': '#FF0033'
            },
            {
                'laneNo': '5',
                'through': 0,
                'turnLeft': 0,
                'turnRight': 1,
                'turnAround': 0,
                'directionIdentifyings': '右转',
                'channelNumberPhase': 0,
                'trafficLightColor': '#ccc'
            }
        ],
        'peoples': [
            {
                'laneNo': '0',
                'lfd': '0(人行)',
                'channelNumberPhase': '1'
            },
            {
                'laneNo': '99',
                'lfd': '99(人行)',
                'channelNumberPhase': '1'
            }
        ]
    },
    {
        'approachDirection': 3,
        'cdireCtion': '东',
        'lanes': [
            {
                'laneNo': '1',
                'through': 0,
                'turnLeft': 1,
                'turnRight': 0,
                'turnAround': 0,
                'directionIdentifyings': '左转',
                'channelNumberPhase': 0,
                'trafficLightColor': '#ccc'
            },
            {
                'laneNo': '2',
                'through': 1,
                'turnLeft': 0,
                'turnRight': 0,
                'turnAround': 0,
                'directionIdentifyings': '直行',
                'channelNumberPhase': '1',
                'trafficLightColor': '#FF0033'
            },
            {
                'laneNo': '3',
                'through': 1,
                'turnLeft': 0,
                'turnRight': 0,
                'turnAround': 0,
                'directionIdentifyings': '直行',
                'channelNumberPhase': '1',
                'trafficLightColor': '#FF0033'
            },
            {
                'laneNo': '4',
                'through': 1,
                'turnLeft': 0,
                'turnRight': 0,
                'turnAround': 0,
                'directionIdentifyings': '直行',
                'channelNumberPhase': '1',
                'trafficLightColor': '#FF0033'
            },
            {
                'laneNo': '5',
                'through': 0,
                'turnLeft': 0,
                'turnRight': 1,
                'turnAround': 0,
                'directionIdentifyings': '右转',
                'channelNumberPhase': 0,
                'trafficLightColor': '#ccc'
            }
        ],
        'peoples': [
            {
                'laneNo': '0',
                'lfd': '0(人行)',
                'channelNumberPhase': '2'
            },
            {
                'laneNo': '99',
                'lfd': '99(人行)',
                'channelNumberPhase': '1'
            }
        ]
    },
    {
        'approachDirection': 5,
        'cdireCtion': '南',
        'lanes': [
            {
                'laneNo': '1',
                'through': 0,
                'turnLeft': 1,
                'turnRight': 0,
                'turnAround': 0,
                'directionIdentifyings': '左转',
                'channelNumberPhase': '2',
                'trafficLightColor': '#33CC00'
            },
            {
                'laneNo': '2',
                'through': 1,
                'turnLeft': 0,
                'turnRight': 0,
                'turnAround': 0,
                'directionIdentifyings': '直行',
                'channelNumberPhase': '1',
                'trafficLightColor': '#FF0033'
            },
            {
                'laneNo': '3',
                'through': 1,
                'turnLeft': 0,
                'turnRight': 0,
                'turnAround': 0,
                'directionIdentifyings': '直行',
                'channelNumberPhase': '1',
                'trafficLightColor': '#FF0033'
            },
            {
                'laneNo': '4',
                'through': 1,
                'turnLeft': 0,
                'turnRight': 0,
                'turnAround': 0,
                'directionIdentifyings': '直行',
                'channelNumberPhase': '1',
                'trafficLightColor': '#FF0033'
            },
            {
                'laneNo': '5',
                'through': 0,
                'turnLeft': 0,
                'turnRight': 1,
                'turnAround': 0,
                'directionIdentifyings': '右转',
                'channelNumberPhase': 0,
                'trafficLightColor': '#ccc'
            }
        ],
        'peoples': [
            {
                'laneNo': '0',
                'lfd': '0(人行)',
                'channelNumberPhase': '1'
            },
            {
                'laneNo': '99',
                'lfd': '99(人行)',
                'channelNumberPhase': '1'
            }
        ]
    },
    {
        'approachDirection': 7,
        'cdireCtion': '西',
        'lanes': [
            {
                'laneNo': '1',
                'through': 0,
                'turnLeft': 1,
                'turnRight': 0,
                'turnAround': 0,
                'directionIdentifyings': '左转',
                'channelNumberPhase': 0,
                'trafficLightColor': '#ccc'
            },
            {
                'laneNo': '2',
                'through': 1,
                'turnLeft': 0,
                'turnRight': 0,
                'turnAround': 0,
                'directionIdentifyings': '直行',
                'channelNumberPhase': '1',
                'trafficLightColor': '#FF0033'
            },
            {
                'laneNo': '3',
                'through': 1,
                'turnLeft': 0,
                'turnRight': 0,
                'turnAround': 0,
                'directionIdentifyings': '直行',
                'channelNumberPhase': '1',
                'trafficLightColor': '#FF0033'
            },
            {
                'laneNo': '4',
                'through': 1,
                'turnLeft': 0,
                'turnRight': 0,
                'turnAround': 0,
                'directionIdentifyings': '直行',
                'channelNumberPhase': '1',
                'trafficLightColor': '#FF0033'
            },
            {
                'laneNo': '5',
                'through': 0,
                'turnLeft': 0,
                'turnRight': 1,
                'turnAround': 0,
                'directionIdentifyings': '右转',
                'channelNumberPhase': 0,
                'trafficLightColor': '#ccc'
            }
        ],
        'peoples': [
            {
                'laneNo': '0',
                'lfd': '0(人行)',
                'channelNumberPhase': '2'
            },
            {
                'laneNo': '99',
                'lfd': '99(人行)',
                'channelNumberPhase': '1'
            }
        ]
    }
];
let laneC = null;

onMounted(() => {
    laneC = new Lane({
        canvas: laneCanvas.value,
        data
    });

    // 如红绿数据更新可采用setData方法刷新红绿状态
    // laneC.setData(data)
});

onUnmounted(() => {
    laneC?.destroy();
    laneC = null;
});

</script>

<style scoped lang="scss">
.lane {
    width: 100%;
    height: 100%;
    background-color: #325e76;
}
</style>

lane.js封装如下

import { getDirectionIdentifyings, computePosition } from './baseDI';

class Lane {
    constructor(opt) {
        this.dpr = window.devicePixelRatio || 1;
        this.canvas = opt.canvas;
        this.w = null;
        this.h = null;
        this.ctx = null;

        this.data = opt.data;
        // 车道范围坐标
        this.region = [];
        // 车道线坐标
        this.dataXY = [];

        // 路中心空白区域占canvas宽高最小值的比，用来计算车道宽度。占比越大，中心空白区域越大，车道越宽，线路越短。取值范围0-1，不允许取0,1。
        this.laneCenterProportion = 'auto' || opt.laneCenterProportion; // ex: 0.8
        // 车道样式
        this.laneStyle = opt.laneStyle;

        // 缩放
        this.scaleFlag = false;
        this.mouseScaleSpeed = 5; // 缩放速度
        this.scaleIndex = 100; // 初始缩放系数
        this.normalScaleIndex = 100; // 标准缩放系数
        this.minScaleIndex = 50; // 最小缩放系数
        this.scaleC = this.scaleIndex / this.normalScaleIndex; // 缩放比例

        // 平移
        this.translate = {
            x: 0,
            y: 0
        };

        // 异步任务list
        this.taskList = [];
        this.hasTaskDone = false;
        this.status = 'do'; // do or stop

        this.init();
    }

    init() {
        if (!this.canvas) {
            return;
        }

        if (this.canvas.width !== Math.floor(this.canvas.offsetWidth * this.dpr) || this.canvas.height !== Math.floor(this.canvas.offsetHeight * this.dpr)) {
            // eslint-disable-next-line
            this.w = this.canvas.width = Math.floor(this.canvas.offsetWidth * this.dpr);
            // eslint-disable-next-line
            this.h = this.canvas.height = Math.floor(this.canvas.offsetHeight * this.dpr);
        } else {
            this.w = this.canvas.width;
            this.h = this.canvas.height;
        }
        this.ctx = this.canvas.getContext('2d');

        this.getLaneStyle();
        this.formatDataXY();
        this.getRegion();
        this.draw();
        this.addEvent();
        this.addAnimationFrame();
    }

    // 获取车道样式
    getLaneStyle() {
        const laneStyle = {
            // 车道范围
            region: {
                width: 2 * this.dpr,
                color: '#fff',
                type: 'solid',
                CurveType: 'quadratic', // normal: 插值曲线, quadratic: 二次贝塞尔, arc: 圆弧线。arc有问题，请勿使用
                background: '#1f2748'
            },
            // 车道左侧车道线
            innerLeft: {
                width: 1 * this.dpr,
                color: '#999',
                type: [10 * this.dpr, 10 * this.dpr],
            },
            // 车道右侧车道线
            innerRight: {
                width: 1 * this.dpr,
                color: '#eee',
                type: [10 * this.dpr, 10 * this.dpr],
            },
            // 车道分割线
            innerDivider: {
                width: 2 * this.dpr,
                color: '#f0bf0a',
                type: 'solid'
            },
            // 车道标识
            direction: {
                widthProportion: 0.1, // 占车道比例，建议小于0.2
                HeightWidthProportion: 10, // 高宽比，建议大于5
                maxWidth: 20 * this.dpr,
                arrowWidth: 2, // 箭头/方向线的比例, 建议大于1小于2
                background: '#ddd'
            },
            // 斑马线
            zebraCrossing: {
                widthProportion: 0.05, // 单个斑马线宽占车道比例，建议小于0.2
                widthHeightProportion: 0.2, // 单个斑马线宽高比，建议小于0.5
                color: '#ddd'
            },
            // 红绿灯
            trafficLight: {
                rProportion: 0.3, // 单个红绿灯半径占车道比例，建议小于0.5,
                colors: ['#fff', '#FF0033', '#33CC00', '#FFFF33'],
            }
        };
        if (this.laneStyle) {
            this.laneStyle = Object.assign(laneStyle, this.laneStyle);
        } else {
            this.laneStyle = laneStyle;
        }

        const laneMaxNum = this.getLaneMaxNum();
        const sideLength = this.getSideLength();
        // 车道宽度 / 2 表示双向
        this.laneStyle.width = sideLength / 2 / laneMaxNum;
        // 方向表示线宽高
        this.laneStyle.direction.width = this.laneStyle.width * this.laneStyle.direction.widthProportion;
        if (this.laneStyle.direction.width > this.laneStyle.direction.maxWidth) {
            this.laneStyle.direction.width = this.laneStyle.direction.maxWidth;
        }
        this.laneStyle.direction.height = this.laneStyle.direction.width * this.laneStyle.direction.HeightWidthProportion;
        // 斑马线宽高
        this.laneStyle.zebraCrossing.width = this.laneStyle.width * this.laneStyle.zebraCrossing.widthProportion;
        this.laneStyle.zebraCrossing.height = this.laneStyle.zebraCrossing.width / this.laneStyle.zebraCrossing.widthHeightProportion;
        this.laneStyle.zebraCrossing.type = [this.laneStyle.zebraCrossing.width * 4, this.laneStyle.zebraCrossing.width];
        // 红绿灯半径
        this.laneStyle.trafficLight.r = this.laneStyle.width * this.laneStyle.trafficLight.rProportion;
    }

    // 获取最大车道数
    getLaneMaxNum() {
        let laneMaxNum = 0;
        this.data.forEach(item => {
            if (item.lanes.length > laneMaxNum) {
                laneMaxNum = item.lanes.length;
            }
        });
        if (laneMaxNum === 1) {
            laneMaxNum = 2;
        }
        return laneMaxNum;
    }

    // 获取中心路口（四边形/八边形）边长
    getSideLength() {
        const minW = this.w > this.h ? this.h : this.w;

        let legitimate = true;
        let maxLans = 0;
        const cdireCtions = ['东', '南', '西', '北'];
        for (let i = 0; i < this.data.length; i++) {
            if (cdireCtions.indexOf(this.data[i].cdireCtion) === -1) {
                legitimate = false;
            }
            if (this.data[i].lanes.length > maxLans) {
                maxLans = this.data[i].lanes.length;
            }
        }
        if (this.laneCenterProportion === 'auto') {
            this.laneCenterProportion = maxLans / 10 > 0.8 ? 0.8 : maxLans / 10;
        }
        if (legitimate) {
            return minW * this.laneCenterProportion / 1.1;
        }
        return minW * this.laneCenterProportion / (Math.sqrt(2) + 1);
    }

    // 计算车道坐标
    formatDataXY() {
        const dataXY = [];
        // 车道起始中心位置
        const centerX = this.w / 2;
        const centerY = this.h - this.h * (1 - this.laneCenterProportion) / 2;
        // 车道长度
        const laneLength = Math.sqrt(this.w ** 2 * this.h ** 2);
        this.data.forEach(dataItem => {
            const dataXYItem = {
                approachDirection: dataItem.approachDirection,
            };
            // 起始x
            const startX = centerX - this.laneStyle.width * dataItem.lanes.length;
            // 起始y
            const startY = centerY + this.laneStyle.zebraCrossing.height * 2;
            // 结束Y
            const endY = startY + laneLength;
            // 线
            const lines = [];
            // 单向车道分割线数量
            const innerLines = dataItem.lanes.length - 1;

            // 车道左边线
            lines.push({
                x0: startX,
                y0: startY - this.laneStyle.zebraCrossing.height * 2,
                x1: startX,
                y1: endY,
                type: 'outer'
            });
            // 车道左侧分割线
            for (let i = 0; i < innerLines; i++) {
                const x = startX + (i + 1) * this.laneStyle.width;
                lines.push({
                    x0: x,
                    y0: startY,
                    x1: x,
                    y1: endY,
                    style: { ...this.laneStyle.innerLeft }
                });
            }
            // 左右车道分割线
            const dividerX = startX + (innerLines + 1) * this.laneStyle.width;
            lines.push({
                x0: dividerX,
                y0: startY,
                x1: dividerX,
                y1: endY,
                style: { ...this.laneStyle.innerDivider }
            });
            // 车道右侧分割线
            for (let i = 0; i < innerLines; i++) {
                const x = startX + (innerLines + i + 2) * this.laneStyle.width;
                lines.push({
                    x0: x,
                    y0: startY,
                    x1: x,
                    y1: endY,
                    style: { ...this.laneStyle.innerRight }
                });
            }
            // 车道右边线
            const outerRightx = startX + (innerLines + 1) * 2 * this.laneStyle.width;
            lines.push({
                x0: outerRightx,
                y0: startY - this.laneStyle.zebraCrossing.height * 2,
                x1: outerRightx,
                y1: endY,
                type: 'outer'
            });
            dataXYItem.lines = lines;

            // 方向标识
            const directionIdentifyings = [];
            for (let i = 0; i < dataItem.lanes.length; i++) {
                const laneItem = dataItem.lanes[i];
                const key = [laneItem.through, laneItem.turnLeft, laneItem.turnRight, laneItem.turnAround].join('');
                const line = lines[innerLines + i + 1];
                directionIdentifyings.push(getDirectionIdentifyings(key, this.laneStyle.direction.width, this.laneStyle.direction.height, {
                    x: line.x0 + this.laneStyle.width / 2,
                    y: line.y0 + this.laneStyle.direction.height / 2 + this.laneStyle.trafficLight.r * 4
                }, this.laneStyle.direction.arrowWidth));
            }
            dataXYItem.directionIdentifyings = directionIdentifyings;

            // 斑马线
            if (dataItem.peoples.length === 1) {
                dataXYItem.zebraCrossing = [{
                    x0: lines[0].x0 + this.laneStyle.zebraCrossing.width * 4,
                    y0: startY - this.laneStyle.zebraCrossing.height,
                    x1: lines[lines.length - 1].x0 - this.laneStyle.zebraCrossing.width * 4,
                    y1: startY - this.laneStyle.zebraCrossing.height,
                    color: this.laneStyle.trafficLight.colors[dataItem.peoples[0].channelNumberPhase]
                }];
            } else if (dataItem.peoples.length === 2) {
                dataXYItem.zebraCrossing = [{
                    x0: lines[0].x0 + this.laneStyle.zebraCrossing.width * 4,
                    y0: startY - this.laneStyle.zebraCrossing.height,
                    x1: lines[(lines.length - 1) / 2].x0,
                    y1: startY - this.laneStyle.zebraCrossing.height,
                    color: this.laneStyle.trafficLight.colors[dataItem.peoples[0].channelNumberPhase]
                }, {
                    x0: lines[(lines.length - 1) / 2].x0,
                    y0: startY - this.laneStyle.zebraCrossing.height,
                    x1: lines[lines.length - 1].x0 - this.laneStyle.zebraCrossing.width * 4,
                    y1: startY - this.laneStyle.zebraCrossing.height,
                    color: this.laneStyle.trafficLight.colors[dataItem.peoples[1].channelNumberPhase]
                }];
            } else {
                dataXYItem.zebraCrossing = [{
                    x0: lines[0].x0 + this.laneStyle.zebraCrossing.width * 4,
                    y0: startY - this.laneStyle.zebraCrossing.height,
                    x1: lines[lines.length - 1].x0 - this.laneStyle.zebraCrossing.width * 4,
                    y1: startY - this.laneStyle.zebraCrossing.height,
                    color: this.laneStyle.trafficLight.colors[0]
                }];
            }

            // 红绿灯
            const trafficLights = [];
            for (let i = 0; i < dataItem.lanes.length; i++) {
                const laneItem = dataItem.lanes[i];
                const line = lines[innerLines + i + 1];
                trafficLights.push({
                    x: line.x0 + this.laneStyle.width / 2,
                    y: line.y0 + this.laneStyle.trafficLight.r * 2,
                    r: this.laneStyle.trafficLight.r,
                    color: this.laneStyle.trafficLight.colors[laneItem.channelNumberPhase]
                });
            }
            dataXYItem.trafficLights = trafficLights;

            dataXY.push(dataXYItem);
        });

        this.dataXYByRotate(dataXY);

        this.dataXY = dataXY;
    }

    // 计算旋转坐标
    dataXYByRotate(dataXY) {
        const centerX = this.w / 2;
        const centerY = this.h / 2;
        dataXY.forEach(dataXYItem => {
            // 八边形，一个边占45度
            const rotateReg = -180 + (dataXYItem.approachDirection - 1) * 45;
            dataXYItem.lines.forEach(line => {
                const xy0 = computePosition(line.x0, line.y0, rotateReg, centerX, centerY);
                line.x0 = xy0.x;
                line.y0 = xy0.y;

                const xy1 = computePosition(line.x1, line.y1, rotateReg, centerX, centerY);
                line.x1 = xy1.x;
                line.y1 = xy1.y;
            });
            dataXYItem.directionIdentifyings.forEach(directionIdentifying => {
                directionIdentifying.points.forEach(point => {
                    point.forEach(item => {
                        const { x, y } = computePosition(item.x, item.y, rotateReg, centerX, centerY);
                        item.x = x;
                        item.y = y;
                    });
                });
                directionIdentifying.arrowPoints.forEach(arrowPoint => {
                    arrowPoint.forEach(item => {
                        const { x, y } = computePosition(item.x, item.y, rotateReg, centerX, centerY);
                        item.x = x;
                        item.y = y;
                    });
                });
            });
            dataXYItem.zebraCrossing.forEach(zebraCrossing => {
                const xy0 = computePosition(zebraCrossing.x0, zebraCrossing.y0, rotateReg, centerX, centerY);
                zebraCrossing.x0 = xy0.x;
                zebraCrossing.y0 = xy0.y;

                const xy1 = computePosition(zebraCrossing.x1, zebraCrossing.y1, rotateReg, centerX, centerY);
                zebraCrossing.x1 = xy1.x;
                zebraCrossing.y1 = xy1.y;
            });
            dataXYItem.trafficLights.forEach(trafficLight => {
                const { x, y } = computePosition(trafficLight.x, trafficLight.y, rotateReg, centerX, centerY);
                trafficLight.x = x;
                trafficLight.y = y;
            });
        });
    }

    // 获取车道范围
    getRegion() {
        const region = [];
        for (let i = 0; i < this.dataXY.length; i++) {
            const dataXYItem = this.dataXY[i];
            const linesLength = dataXYItem.lines.length;
            if (i !== 0) {
                // 衔接上一车道
                const prevDataXYItem = this.dataXY[i - 1];
                const data = {
                    prevapproachDirection: prevDataXYItem.approachDirection,
                    approachDirection: dataXYItem.approachDirection,
                    type: 'connect'
                };
                let diffapproachDirection = dataXYItem.approachDirection - prevDataXYItem.approachDirection;
                if (diffapproachDirection > 4) {
                    diffapproachDirection = (prevDataXYItem.approachDirection + 8) - dataXYItem.approachDirection;
                }
                if (diffapproachDirection === 4) {
                    // 车道正对，直线即可
                    data.point = [
                        { x: prevDataXYItem.lines[0].x0, y: prevDataXYItem.lines[0].y0 },
                        { x: dataXYItem.lines[linesLength - 1].x0, y: dataXYItem.lines[linesLength - 1].y0 },
                    ];
                    region.push(data);
                } else {
                    if (this.laneStyle.region.CurveType === 'arc') {
                        const angle = 45 * diffapproachDirection;
                        const startAngle = 45 * (prevDataXYItem.approachDirection - 5);
                        data.OR = this.findCircleCenter(
                            prevDataXYItem.lines[0].x0,
                            prevDataXYItem.lines[0].y0,
                            dataXYItem.lines[linesLength - 1].x0,
                            dataXYItem.lines[linesLength - 1].y0,
                            angle,
                            true
                        );
                        data.OR.startAngle = startAngle;
                        data.OR.endAngle = startAngle - angle;
                        data.OR.anticlockwise = true;
                    } else {
                        // 曲线
                        const laneXY0 = this.calculateIntersection([
                            [prevDataXYItem.lines[0].x0, prevDataXYItem.lines[0].y0],
                            [prevDataXYItem.lines[0].x1, prevDataXYItem.lines[0].y1],
                        ], [
                            [dataXYItem.lines[linesLength - 1].x0, dataXYItem.lines[linesLength - 1].y0],
                            [dataXYItem.lines[linesLength - 1].x1, dataXYItem.lines[linesLength - 1].y1],
                        ]);
                        const laneXY1 = [(prevDataXYItem.lines[0].x0 + dataXYItem.lines[linesLength - 1].x0) / 2, (prevDataXYItem.lines[0].y0 + dataXYItem.lines[linesLength - 1].y0) / 2];
                        const originPoints = [
                            { x: prevDataXYItem.lines[0].x0, y: prevDataXYItem.lines[0].y0 },
                            { x: laneXY1[0] - (laneXY1[0] - laneXY0[0]) * diffapproachDirection / 4, y: laneXY1[1] - (laneXY1[1] - laneXY0[1]) * diffapproachDirection / 4 },
                            { x: dataXYItem.lines[linesLength - 1].x0, y: dataXYItem.lines[linesLength - 1].y0 },
                        ];
                        if (this.laneStyle.region.CurveType === 'normal') {
                            const point = this.getCurveVertex(originPoints);
                            data.point = point;
                        } else {
                            data.point = originPoints;
                        }
                    }
                    region.push(data);
                }
            }
            // 车道范围
            region.push({
                approachDirection: dataXYItem.approachDirection,
                x0: dataXYItem.lines[linesLength - 1].x0,
                y0: dataXYItem.lines[linesLength - 1].y0,
                x1: dataXYItem.lines[linesLength - 1].x1,
                y1: dataXYItem.lines[linesLength - 1].y1,
                x2: dataXYItem.lines[0].x1,
                y2: dataXYItem.lines[0].y1,
                x3: dataXYItem.lines[0].x0,
                y3: dataXYItem.lines[0].y0,
                type: 'lane'
            });
            if (i === this.dataXY.length - 1) {
                // 衔接起始车道
                const startDataXYItem = this.dataXY[0];
                const startLinesLength = startDataXYItem.lines.length;
                const data = {
                    startapproachDirection: startDataXYItem.approachDirection,
                    approachDirection: dataXYItem.approachDirection,
                    type: 'connect'
                };
                let diffapproachDirection = startDataXYItem.approachDirection + 8 - dataXYItem.approachDirection;
                if (diffapproachDirection > 4) {
                    diffapproachDirection = dataXYItem.approachDirection - startDataXYItem.approachDirection;
                }
                if (diffapproachDirection === 4) {
                    // 车道正对，直线即可
                    data.point = [
                        { x: dataXYItem.lines[0].x0, y: dataXYItem.lines[0].y0 },
                        { x: startDataXYItem.lines[startLinesLength - 1].x0, y: startDataXYItem.lines[startLinesLength - 1].y0 },
                    ];
                    region.push(data);
                } else {
                    if (this.laneStyle.region.CurveType === 'arc') {
                        const angle = 45 * diffapproachDirection;
                        const startAngle = 45 * (dataXYItem.approachDirection - 1);
                        data.OR = this.findCircleCenter(
                            dataXYItem.lines[0].x0,
                            dataXYItem.lines[0].y0,
                            startDataXYItem.lines[linesLength - 1].x0,
                            startDataXYItem.lines[linesLength - 1].y0,
                            angle,
                            true
                        );
                        data.OR.endAngle = startAngle + angle;
                        data.OR.startAngle = startAngle;
                        data.OR.anticlockwise = false;
                    } else {
                        // 曲线
                        const laneXY0 = this.calculateIntersection([
                            [dataXYItem.lines[0].x0, dataXYItem.lines[0].y0],
                            [dataXYItem.lines[0].x1, dataXYItem.lines[0].y1],
                        ], [
                            [startDataXYItem.lines[startLinesLength - 1].x0, startDataXYItem.lines[startLinesLength - 1].y0],
                            [startDataXYItem.lines[startLinesLength - 1].x1, startDataXYItem.lines[startLinesLength - 1].y1],
                        ]);
                        const laneXY1 = [(startDataXYItem.lines[startLinesLength - 1].x0 + dataXYItem.lines[0].x0) / 2, (startDataXYItem.lines[startLinesLength - 1].y0 + dataXYItem.lines[0].y0) / 2];
                        const originPoints = [
                            { x: dataXYItem.lines[0].x0, y: dataXYItem.lines[0].y0 },
                            { x: laneXY1[0] - (laneXY1[0] - laneXY0[0]) * diffapproachDirection / 4, y: laneXY1[1] - (laneXY1[1] - laneXY0[1]) * diffapproachDirection / 4 },
                            { x: startDataXYItem.lines[startLinesLength - 1].x0, y: startDataXYItem.lines[startLinesLength - 1].y0 },
                        ];
                        if (this.laneStyle.region.CurveType === 'normal') {
                            const point = this.getCurveVertex(originPoints);
                            data.point = point;
                        } else {
                            data.point = originPoints;
                        }
                    }
                    region.push(data);
                }
            }
        }
        this.region = region;
    }

    // 获取两条直线的交点
    calculateIntersection(line1, line2) {
        // 解方程组
        const x1 = line1[0][0];
        const y1 = line1[0][1];
        const x2 = line1[1][0];
        const y2 = line1[1][1];

        const x3 = line2[0][0];
        const y3 = line2[0][1];
        const x4 = line2[1][0];
        const y4 = line2[1][1];

        const denominator = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);

        if (denominator === 0) {
            // 直线平行，没有交点
            return null;
        }

        const intersectionX = ((x1 * y2 - y1 * x2) * (x3 - x4) - (x1 - x2) * (x3 * y4 - y3 * x4)) / denominator;
        const intersectionY = ((x1 * y2 - y1 * x2) * (y3 - y4) - (y1 - y2) * (x3 * y4 - y3 * x4)) / denominator;

        return [intersectionX, intersectionY];
    }

    // 以下四个方法获取曲线
    getCurveVertex(vertex, pointsPow = 0.4) {
        let length = 0;
        for (let i = 0; i < vertex.length - 1; i++) {
            length += Math.sqrt((vertex[i].x - vertex[i + 1].x) ** 2 + (vertex[i].y - vertex[i + 1].y) ** 2);
        }
        length = Math.ceil(length);
        return this.getNewData(vertex, length * pointsPow);
    }

    // 曲线 插值
    getNewData(pointsOrigin, pointsPow) {
        const points = [];
        const divisions = (pointsOrigin.length - 1) * pointsPow;
        for (let i = 0; i < divisions; i++) {
            points.push(this.getPoint(i, divisions, pointsOrigin, pointsPow));
        }
        return points;
    }

    getPoint(i, divisions, pointsOrigin, pointsPow) {
        const isRealI = (i * divisions) % pointsPow;
        const p = ((pointsOrigin.length - 1) * i) / divisions;
        const intPoint = Math.floor(p);
        const weight = p - intPoint;
        const p0 = pointsOrigin[intPoint === 0 ? intPoint : intPoint - 1];
        const p1 = pointsOrigin[intPoint];
        const p2 = pointsOrigin[intPoint > pointsOrigin.length - 2 ? pointsOrigin.length - 1 : intPoint + 1];
        const p3 = pointsOrigin[intPoint > pointsOrigin.length - 3 ? pointsOrigin.length - 1 : intPoint + 2];
        return {
            isReal: isRealI === 0,
            x: this.catmullRom(weight, p0.x, p1.x, p2.x, p3.x),
            y: this.catmullRom(weight, p0.y, p1.y, p2.y, p3.y)
        };
    }

    catmullRom(t, p0, p1, p2, p3) {
        const v0 = (p2 - p0) * 0.5;
        const v1 = (p3 - p1) * 0.5;
        const t2 = t * t;
        const t3 = t * t2;
        return (2 * p1 - 2 * p2 + v0 + v1) * t3 + (-3 * p1 + 3 * p2 - 2 * v0 - v1) * t2 + v0 * t + p1;
    }

    // 根据圆上两点以及夹角角度 求 圆心
    findCircleCenter(x1, y1, x2, y2, theta, isNeg) {
        let cx = 0;
        let cy = 0;
        const dDistance = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
        const dRadius = dDistance * 0.5 / Math.sin(Math.PI / 180 * theta * 0.5);
        if (dDistance === 0.0) {
            // cout << "\n输入了相同的点!\n";
            return false;
        }
        if ((2 * dRadius) < dDistance) {
            // cout << "\n两点间距离大于直径!\n";
            return false;
        }
        let k_verticle = 0.0;
        let mid_x = 0.0;
        let mid_y = 0.0;
        let a = 1.0;
        let b = 1.0;
        let c = 1.0;
        const k = (y2 - y1) / (x2 - x1);
        let cx1; let cy1; let cx2; let
            cy2;
        if (k === 0) {
            cx1 = (x1 + x2) / 2.0;
            cx2 = (x1 + x2) / 2.0;
            cy1 = y1 + Math.sqrt(dRadius * dRadius - (x1 - x2) * (x1 - x2) / 4.0);
            cy2 = y2 - Math.sqrt(dRadius * dRadius - (x1 - x2) * (x1 - x2) / 4.0);
        } else {
            k_verticle = -1.0 / k;
            mid_x = (x1 + x2) / 2.0;
            mid_y = (y1 + y2) / 2.0;
            a = 1.0 + k_verticle * k_verticle;
            b = -2 * mid_x - k_verticle * k_verticle * (x1 + x2);
            c = mid_x * mid_x + k_verticle * k_verticle * (x1 + x2) * (x1 + x2) / 4.0
                - (dRadius * dRadius - ((mid_x - x1) * (mid_x - x1) + (mid_y - y1) * (mid_y - y1)));

            cx1 = (-1.0 * b + Math.sqrt(b * b - 4 * a * c)) / (2 * a);
            cx2 = (-1.0 * b - Math.sqrt(b * b - 4 * a * c)) / (2 * a);
            cy1 = this.y_Coordinates(mid_x, mid_y, k_verticle, cx1);
            cy2 = this.y_Coordinates(mid_x, mid_y, k_verticle, cx2);
        }
        // cx2,cy2为顺时针圆心坐标，cx1,cy1为逆时针圆心坐标

        if (isNeg) {
            cx = cx1;
            cy = cy1;
        } else {
            cx = cx2;
            cy = cy2;
        }

        return { x: cx, y: cy, r: Math.sqrt((cx - x1) ** 2 + (cy - y1) ** 2) };
    }

    y_Coordinates(x, y, k, x0) {
        return k * x0 - k * x + y;
    }

    // 设置新的红绿灯数据
    setData(data) {
        this.dataXY.forEach((dataXYItem, dataXYIndex) => {
            dataXYItem.trafficLights.forEach((trafficLight, trafficLightIndex) => {
                if (data[dataXYIndex]?.lanes[trafficLightIndex]) {
                    trafficLight.color = this.laneStyle.trafficLight.colors[data[dataXYIndex].lanes[trafficLightIndex].channelNumberPhase];
                }
            });
            dataXYItem.zebraCrossing.forEach((zebra, zebraIndex) => {
                if (data[dataXYIndex]?.peoples[zebraIndex]) {
                    zebra.color = this.laneStyle.trafficLight.colors[data[dataXYIndex].peoples[zebraIndex].channelNumberPhase];
                }
            });
        });
        this.addTask();
    }

    // 重新绘制
    reDraw() {
        this.ctx.clearRect(0, 0, this.w, this.h);
        this.draw();
    }

    // 绘制
    draw() {
        this.drawRegion();
        this.drawLines();
        this.drawDirectionIdentifyings();
        this.drawZebraCrossing();
        this.drawTrafficLight();
        // this.drawHelper()
    }

    // 缩放、平移
    translateAndScale() {
        // 缩放
        this.ctx.translate(this.w / 2, this.h / 2);
        this.ctx.scale(this.scaleC, this.scaleC);
        this.ctx.translate(-this.w / 2, -this.h / 2);
        // 平移
        this.ctx.translate(this.translate.x, this.translate.y);
    }

    // 绘制车道范围
    drawRegion() {
        this.ctx.save();

        this.translateAndScale();

        this.ctx.beginPath();
        this.ctx.fillStyle = this.laneStyle.region.background;
        this.ctx.lineWidth = this.laneStyle.region.width;
        this.ctx.strokeStyle = this.laneStyle.region.color;
        this.ctx.lineJoin = 'round';
        for (let i = 0; i < this.region.length; i++) {
            const regionItem = this.region[i];
            if (regionItem.type === 'connect') {
                if (regionItem?.point?.length === 2 && this.laneStyle.region.CurveType !== 'arc') {
                    // 直线
                    regionItem.point.forEach(item => {
                        this.ctx.lineTo(item.x, item.y);
                    });
                } else if (this.laneStyle.region.CurveType === 'arc') {
                    // 圆
                    if (regionItem.OR) this.ctx.arc(regionItem.OR.x, regionItem.OR.y, regionItem.OR.r, regionItem.OR.startAngle * Math.PI / 180, regionItem.OR.endAngle * Math.PI / 180, regionItem.OR.anticlockwise);
                } else if (this.laneStyle.region.CurveType === 'normal') {
                    // 插值
                    regionItem.point.forEach(item => {
                        this.ctx.lineTo(item.x, item.y);
                    });
                } else {
                    // 二次贝塞尔
                    this.ctx.lineTo(regionItem.point[0].x, regionItem.point[0].y);
                    this.ctx.quadraticCurveTo(regionItem.point[1].x, regionItem.point[1].y, regionItem.point[2].x, regionItem.point[2].y);
                }
            } else {
                this.ctx.lineTo(regionItem.x0, regionItem.y0);
                this.ctx.lineTo(regionItem.x1, regionItem.y1);
                this.ctx.lineTo(regionItem.x2, regionItem.y2);
                this.ctx.lineTo(regionItem.x3, regionItem.y3);
            }
        }
        this.ctx.fill();
        this.ctx.stroke();
        this.ctx.closePath();

        this.ctx.restore();
    }

    // 绘制车道线
    drawLines() {
        this.dataXY.forEach((dataXYItem) => {
            dataXYItem.lines.forEach(lineItem => {
                if (lineItem.type !== 'outer') {
                    this.ctx.save();

                    this.translateAndScale();

                    this.ctx.beginPath();
                    this.ctx.lineWidth = lineItem.style.width;
                    this.ctx.strokeStyle = lineItem.style.color;
                    if (lineItem.style.type !== 'solid') {
                        this.ctx.setLineDash(lineItem.style.type);
                    }
                    this.ctx.lineTo(lineItem.x0, lineItem.y0);
                    this.ctx.lineTo(lineItem.x1, lineItem.y1);
                    this.ctx.stroke();
                    this.ctx.closePath();
                    this.ctx.restore();
                }
            });
        });
    }

    // 绘制方向箭头
    drawDirectionIdentifyings() {
        this.dataXY.forEach((dataXYItem) => {
            dataXYItem.directionIdentifyings.forEach(directionIdentifying => {
                this.ctx.save();

                this.translateAndScale();

                directionIdentifying.points.forEach(pointItem => {
                    this.ctx.beginPath();
                    this.ctx.lineWidth = directionIdentifying.w;
                    this.ctx.strokeStyle = this.laneStyle.direction.background;
                    if (directionIdentifying.exclusive) {
                        this.ctx.setLineDash([directionIdentifying.w, directionIdentifying.w]);
                    }
                    pointItem.forEach(item => {
                        this.ctx.lineTo(item.x, item.y);
                    });
                    this.ctx.stroke();
                    this.ctx.closePath();
                    this.ctx.setLineDash([]);
                });

                directionIdentifying.arrowPoints.forEach(arrowPoint => {
                    this.ctx.beginPath();
                    this.ctx.fillStyle = this.laneStyle.direction.background;
                    arrowPoint.forEach(item => {
                        this.ctx.lineTo(item.x, item.y);
                    });
                    this.ctx.fill();
                    this.ctx.closePath();
                });

                this.ctx.restore();
            });
        });
    }

    // 绘制信号灯
    drawTrafficLight() {
        this.dataXY.forEach((dataXYItem) => {
            dataXYItem.trafficLights.forEach(trafficLight => {
                this.ctx.save();

                this.translateAndScale();

                this.ctx.beginPath();
                this.ctx.fillStyle = trafficLight.color;
                this.ctx.arc(trafficLight.x, trafficLight.y, trafficLight.r, 0, Math.PI * 2);
                this.ctx.fill();
                this.ctx.closePath();

                this.ctx.restore();
            });
        });
    }

    // 绘制斑马线
    drawZebraCrossing() {
        this.dataXY.forEach((dataXYItem) => {
            this.ctx.save();

            this.translateAndScale();

            this.ctx.beginPath();
            this.ctx.lineWidth = this.laneStyle.zebraCrossing.height;
            dataXYItem.zebraCrossing.forEach(zebraCrossing => {
                this.ctx.strokeStyle = zebraCrossing.color;
                this.ctx.lineTo(zebraCrossing.x0, zebraCrossing.y0);
                this.ctx.lineTo(zebraCrossing.x1, zebraCrossing.y1);
            });
            this.ctx.stroke();
            this.ctx.closePath();

            this.ctx.beginPath();
            this.ctx.lineWidth = this.laneStyle.zebraCrossing.height + 1;
            this.ctx.strokeStyle = this.laneStyle.region.background;
            this.ctx.setLineDash(this.laneStyle.zebraCrossing.type);
            dataXYItem.zebraCrossing.forEach(zebraCrossing => {
                this.ctx.lineTo(zebraCrossing.x0, zebraCrossing.y0);
                this.ctx.lineTo(zebraCrossing.x1, zebraCrossing.y1);
            });
            this.ctx.stroke();
            this.ctx.closePath();
            this.ctx.restore();
        });
    }

    drawHelper() {
        // 绘制车道方向数字，用来查看车道是否正确
        this.ctx.beginPath();
        this.ctx.fillStyle = '#fff';
        this.ctx.font = 20 * this.dpr + 'px Arial';
        for (let i = 0; i < this.region.length; i++) {
            const regionItem = this.region[i];
            this.ctx.fillText(regionItem.approachDirection, regionItem.x0, regionItem.y0);
        }
        this.ctx.closePath();

        // 绘制坐标线
        this.ctx.save();
        this.ctx.lineWidth = 2 * this.dpr;
        this.ctx.strokeStyle = 'red';

        this.ctx.beginPath();
        this.ctx.lineTo(this.w / 2, 0);
        this.ctx.lineTo(this.w / 2, this.h);
        this.ctx.stroke();
        this.ctx.closePath();

        this.ctx.beginPath();
        this.ctx.lineTo(0, this.h / 2);
        this.ctx.lineTo(this.w, this.h / 2);
        this.ctx.stroke();
        this.ctx.closePath();
        this.ctx.restore();
    }

    // 事件相关
    addEvent() {
        // 缩放
        this.mousewheelBind = this.mousewheel.bind(this);
        this.canvas.addEventListener('mousewheel', this.mousewheelBind);

        // 平移
        this.canvasMousedownBind = this.canvasMousedown.bind(this);
        this.documentMouseupBind = this.documentMouseup.bind(this);
        this.documentMouseMoveBind = this.documentMouseMove.bind(this);
        this.canvas.addEventListener('mousedown', this.canvasMousedownBind);
        document.addEventListener('mousemove', this.documentMouseMoveBind);
    }

    removeEvent() {
        if (this.mousewheelBind) {
            this.canvas.removeEventListener('mousewheel', this.mousewheelBind);
        }
        if (this.canvasMousedownBind) {
            this.canvas.removeEventListener('mousedown', this.canvasMousedownBind);
        }
        if (this.documentMouseMoveBind) {
            document.removeEventListener('mousemove', this.documentMouseMoveBind);
        }
        if (this.documentMouseupBind) {
            document.removeEventListener('mouseup', this.documentMouseupBind);
        }
    }

    mousewheel(e) {
        if (this.scaleFlag) {
            return;
        }
        this.scaleFlag = true;
        if (e.wheelDelta > 0) {
            this.scaleIndex += this.mouseScaleSpeed;
        } else if (this.scaleIndex > this.minScaleIndex) {
            this.scaleIndex -= this.mouseScaleSpeed;
        }
        this.scaleC = this.scaleIndex / this.normalScaleIndex;
        // canvas缩放操作
        this.addTask();
        this.scaleFlag = false;
    }

    canvasMousedown(e) {
        this.mousedownXY = {
            x: e.clientX,
            y: e.clientY
        };

        document.addEventListener('mouseup', this.documentMouseupBind);
        e.preventDefault();
    }

    documentMouseMove(e) {
        if (this.moveFlag) {
            return;
        }
        if (!this.mousedownXY) {
            return;
        }
        // 长按移动
        this.moveFlag = true;
        const E = {
            x: e.clientX,
            y: e.clientY
        };

        this.translate.x += ((E.x - this.mousedownXY.x) * this.dpr) / this.scaleC;
        this.translate.y += ((E.y - this.mousedownXY.y) * this.dpr) / this.scaleC;

        // canvas拖拽操作
        this.addTask();

        this.mousedownXY = {
            x: e.clientX,
            y: e.clientY
        };

        this.moveFlag = false;
    }

    documentMouseup() {
        document.removeEventListener('mouseup', this.documentMouseupBind);
        this.mousedownXY = null;
    }

    // 异步处理重绘机制
    addAnimationFrame() {
        this.requestAnimationFrame = null;
        this.requestAnimationFrameDrawBind = this.requestAnimationFrameDraw.bind(this);
    }

    removeAnimationFrame() {
        this.stop();
        this.clearRequestAnimationFrame();
    }

    addTask(func = () => {}) {
        this.taskList.push(func);
        if (this.requestAnimationFrame === null) {
            this.addRequestAnimationFrame();
            this.do();
        }
    }

    do() {
        this.status = 'do';
        new Promise(res => {
            if (this.taskList[0]) {
                this.taskList[0]();
                this.taskList.shift();
            }
            this.hasTaskDone = true;
            res();
        }).then(() => {
            if (this.status === 'do' && this.taskList.length) {
                this.do();
            }
        });
    }

    stop() {
        this.status = 'stop';
    }

    requestAnimationFrameDraw() {
        this.stop();
        if (this.hasTaskDone && this.reDraw) {
            this.hasTaskDone = false;
            this.reDraw();
        }
        if (this.taskList.length) {
            this.addRequestAnimationFrame();
            this.do();
        } else {
            this.clearRequestAnimationFrame();
        }
    }

    addRequestAnimationFrame() {
        this.requestAnimationFrame = window.requestAnimationFrame(this.requestAnimationFrameDrawBind);
    }

    clearRequestAnimationFrame() {
        window.cancelAnimationFrame(this.requestAnimationFrame);
        this.requestAnimationFrame = null;
    }

    // 销毁
    destroy() {
        this.removeEvent();
        this.removeAnimationFrame();
    }
}

export default Lane;

baseDI.js封装如下

const getType = val => {
    return Object.prototype.toString.call(val).replace(/\[object (\w+)\]/, '$1');
};

// 旋转计算
const computePosition = (x, y, angle, centerX, centerY) => {
    // 圆心
    const a = centerX;
    const b = centerY;
    // 计算
    const c = Math.PI / 180 * angle;
    const rx = (x - a) * Math.cos(c) - (y - b) * Math.sin(c) + a;
    const ry = (y - b) * Math.cos(c) + (x - a) * Math.sin(c) + b;
    return { x: rx, y: ry };
};

// 获取方向标识坐标
const getArrow = (key, w, h, w2, h2, topY, bottomY, leftX, rightX, cX, cY) => {
    let point = [];
    const wd = (w - w2) / 2; // 三角形边长与线宽的差值的一半

    const rotateDeg = 30;// 左转右转旋转角度
    const hv = h2 / Math.cos(Math.PI / 180 * rotateDeg); // 计算左转右转虚拟线长
    const topYv = topY - (hv - h2) / 2; // 虚拟起始高度

    switch (key) {
    case 1:
        // 调头
        point = [
            { x: leftX - wd, y: bottomY - h },
            { x: leftX + w2 / 2, y: bottomY },
            { x: leftX + w2 + wd, y: bottomY - h }
        ];
        break;
    case 2:
        // 左转
        point = [
            { x: cX + w / 2, y: topYv + h },
            { x: cX, y: topYv },
            { x: cX - w / 2, y: topYv + h }
        ];
        point.forEach(item => {
            const newXY = computePosition(item.x, item.y, -rotateDeg, cX, cY);
            item.x = newXY.x;
            item.y = newXY.y;
        });
        break;
    case 3:
        // 直行
        point = [
            { x: cX + w / 2, y: topY + h },
            { x: cX, y: topY },
            { x: cX - w / 2, y: topY + h }
        ];
        break;
    case 4:
        // 右转
        point = [
            { x: cX + w / 2, y: topYv + h },
            { x: cX, y: topYv },
            { x: cX - w / 2, y: topYv + h }
        ];
        point.forEach(item => {
            const newXY = computePosition(item.x, item.y, rotateDeg, cX, cY);
            item.x = newXY.x;
            item.y = newXY.y;
        });
        break;
    default:
        break;
    }
    return point;
};
const getDirectionIdentifyings = (key, w, h, centerXY, arrowWidth) => {
    // 标识边界
    const topY = centerXY.y - h / 2;
    const bottomY = centerXY.y + h / 2;
    let leftX = centerXY.x - w / 2 * 3;
    let rightX = centerXY.x + w / 2 * 3;
    // 直行线中心位置
    let cX = centerXY.x + w;
    const cY = centerXY.y;
    // 箭头宽高
    const arrowW = w * arrowWidth;
    const arrowH = arrowW * Math.sin(Math.PI / 3);
    // 线坐标
    const points = [];
    // 三角形坐标
    const arrowPoints = [];
    // 专用车道（没有方向标识的车道）
    let exclusive = false;
    switch (key) {
    case '0001':
        // 调头
        arrowPoints.push(getArrow(1, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY));
        points.push([
            { x: leftX + w / 2, y: bottomY - arrowH },
            { x: leftX + w / 2, y: topY + w / 2 },
            { x: leftX + w / 2 * 5, y: topY + w / 2 },
            { x: leftX + w / 2 * 5, y: bottomY },
        ]);
        break;
    case '0100':
        // 左转
        arrowPoints.push(getArrow(2, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY));
        points.push([
            { x: (arrowPoints[0][0].x + arrowPoints[0][2].x) / 2, y: (arrowPoints[0][0].y + arrowPoints[0][2].y) / 2 },
            { x: cX, y: cY },
            { x: cX, y: bottomY }
        ]);
        break;
    case '1000':
        // 直行
        leftX = centerXY.x - w / 2;
        rightX = centerXY.x + w / 2;
        cX = centerXY.x;
        arrowPoints.push(getArrow(3, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY));
        points.push([
            { x: cX, y: topY + arrowH },
            { x: cX, y: bottomY }
        ]);
        break;
    case '0010':
        // 右转
        cX = centerXY.x - w;
        arrowPoints.push(getArrow(4, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY));
        points.push([
            { x: (arrowPoints[0][0].x + arrowPoints[0][2].x) / 2, y: (arrowPoints[0][0].y + arrowPoints[0][2].y) / 2 },
            { x: cX, y: cY },
            { x: cX, y: bottomY }
        ]);
        break;
    case '0101':
        // 左转调头
        arrowPoints.push(getArrow(1, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY));
        points.push([
            { x: leftX + w / 2, y: bottomY - arrowH },
            { x: leftX + w / 2, y: cY + w / 2 },
            { x: leftX + w / 2 * 5, y: cY + w / 2 },
            { x: leftX + w / 2 * 5, y: bottomY },
        ]);
        arrowPoints.push(getArrow(2, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY));
        points.push([
            { x: (arrowPoints[1][0].x + arrowPoints[1][2].x) / 2, y: (arrowPoints[1][0].y + arrowPoints[1][2].y) / 2 },
            { x: cX, y: cY },
            { x: cX, y: bottomY }
        ]);
        break;
    case '1001':
        // 直行调头
        arrowPoints.push(getArrow(1, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY));
        points.push([
            { x: leftX + w / 2, y: bottomY - arrowH },
            { x: leftX + w / 2, y: cY + w / 2 },
            { x: leftX + w / 2 * 5, y: cY + w / 2 },
            { x: leftX + w / 2 * 5, y: bottomY },
        ]);
        arrowPoints.push(getArrow(3, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY));
        points.push([
            { x: cX, y: topY + arrowH },
            { x: cX, y: bottomY }
        ]);
        break;
    case '0011':
        // 右转调头
        leftX = centerXY.x - w / 2 * 5;
        rightX = centerXY.x + w / 2 * 5;
        arrowPoints.push(getArrow(1, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY));
        points.push([
            { x: leftX + w / 2, y: bottomY - arrowH },
            { x: leftX + w / 2, y: cY + w / 2 },
            { x: leftX + w / 2 * 5, y: cY + w / 2 },
            { x: leftX + w / 2 * 5, y: bottomY },
        ]);
        cX = centerXY.x;
        arrowPoints.push(getArrow(4, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY));
        points.push([
            { x: (arrowPoints[1][0].x + arrowPoints[1][2].x) / 2, y: (arrowPoints[1][0].y + arrowPoints[1][2].y) / 2 },
            { x: cX, y: cY },
            { x: cX, y: bottomY }
        ]);
        break;
    case '1100':
        // 直行左转
        arrowPoints.push(getArrow(2, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY));
        points.push([
            { x: (arrowPoints[0][0].x + arrowPoints[0][2].x) / 2, y: (arrowPoints[0][0].y + arrowPoints[0][2].y) / 2 },
            { x: cX, y: cY },
            { x: cX, y: bottomY }
        ]);
        arrowPoints.push(getArrow(3, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY));
        points.push([
            { x: cX, y: topY + arrowH },
            { x: cX, y: bottomY }
        ]);
        break;
    case '0110':
        // 左转右转
        leftX = centerXY.x - w / 2 * 5;
        rightX = centerXY.x + w / 2 * 5;
        cX = centerXY.x;
        arrowPoints.push(getArrow(2, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY));
        points.push([
            { x: (arrowPoints[0][0].x + arrowPoints[0][2].x) / 2, y: (arrowPoints[0][0].y + arrowPoints[0][2].y) / 2 },
            { x: cX, y: cY },
            { x: cX, y: bottomY }
        ]);
        arrowPoints.push(getArrow(4, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY));
        points.push([
            { x: (arrowPoints[1][0].x + arrowPoints[1][2].x) / 2, y: (arrowPoints[1][0].y + arrowPoints[1][2].y) / 2 },
            { x: cX, y: cY },
            { x: cX, y: bottomY }
        ]);
        break;
    case '1010':
        // 直行右转
        cX = centerXY.x - w;
        arrowPoints.push(getArrow(3, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY));
        points.push([
            { x: cX, y: topY + arrowH },
            { x: cX, y: bottomY }
        ]);
        arrowPoints.push(getArrow(4, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY));
        points.push([
            { x: (arrowPoints[1][0].x + arrowPoints[1][2].x) / 2, y: (arrowPoints[1][0].y + arrowPoints[1][2].y) / 2 },
            { x: cX, y: cY },
            { x: cX, y: bottomY }
        ]);
        break;
    case '1101':
        // 直行左转调头
        arrowPoints.push(getArrow(1, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY));
        points.push([
            { x: leftX + w / 2, y: bottomY - arrowH },
            { x: leftX + w / 2, y: cY + w / 2 },
            { x: leftX + w / 2 * 5, y: cY + w / 2 },
            { x: leftX + w / 2 * 5, y: bottomY },
        ]);
        arrowPoints.push(getArrow(2, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY));
        points.push([
            { x: (arrowPoints[1][0].x + arrowPoints[1][2].x) / 2, y: (arrowPoints[1][0].y + arrowPoints[1][2].y) / 2 },
            { x: cX, y: cY },
            { x: cX, y: bottomY }
        ]);
        arrowPoints.push(getArrow(3, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY));
        points.push([
            { x: cX, y: topY + arrowH },
            { x: cX, y: bottomY }
        ]);
        break;
    case '1011':
        // 直行右转调头
        leftX = centerXY.x - w / 2 * 5;
        rightX = centerXY.x + w / 2 * 5;
        cX = centerXY.x;
        arrowPoints.push(getArrow(1, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY));
        points.push([
            { x: leftX + w / 2, y: bottomY - arrowH },
            { x: leftX + w / 2, y: cY + w / 2 },
            { x: leftX + w / 2 * 5, y: cY + w / 2 },
            { x: leftX + w / 2 * 5, y: bottomY },
        ]);
        arrowPoints.push(getArrow(3, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY));
        points.push([
            { x: cX, y: topY + arrowH },
            { x: cX, y: bottomY }
        ]);
        arrowPoints.push(getArrow(4, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY));
        points.push([
            { x: (arrowPoints[2][0].x + arrowPoints[2][2].x) / 2, y: (arrowPoints[2][0].y + arrowPoints[2][2].y) / 2 },
            { x: cX, y: cY },
            { x: cX, y: bottomY }
        ]);
        break;
    case '0111':
        // 左转右转调头
        leftX = centerXY.x - w / 2 * 5;
        rightX = centerXY.x + w / 2 * 5;
        cX = centerXY.x;
        arrowPoints.push(getArrow(1, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY));
        points.push([
            { x: leftX + w / 2, y: bottomY - arrowH },
            { x: leftX + w / 2, y: cY + w / 2 },
            { x: leftX + w / 2 * 5, y: cY + w / 2 },
            { x: leftX + w / 2 * 5, y: bottomY },
        ]);
        arrowPoints.push(getArrow(2, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY));
        points.push([
            { x: (arrowPoints[1][0].x + arrowPoints[1][2].x) / 2, y: (arrowPoints[1][0].y + arrowPoints[1][2].y) / 2 },
            { x: cX, y: cY },
            { x: cX, y: bottomY }
        ]);
        arrowPoints.push(getArrow(4, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY));
        points.push([
            { x: (arrowPoints[2][0].x + arrowPoints[2][2].x) / 2, y: (arrowPoints[2][0].y + arrowPoints[2][2].y) / 2 },
            { x: cX, y: cY },
            { x: cX, y: bottomY }
        ]);
        break;
    case '1110':
        // 直行左转右转
        leftX = centerXY.x - w / 2 * 5;
        rightX = centerXY.x + w / 2 * 5;
        cX = centerXY.x;
        arrowPoints.push(getArrow(2, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY));
        points.push([
            { x: (arrowPoints[0][0].x + arrowPoints[0][2].x) / 2, y: (arrowPoints[0][0].y + arrowPoints[0][2].y) / 2 },
            { x: cX, y: cY },
            { x: cX, y: bottomY }
        ]);
        arrowPoints.push(getArrow(3, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY));
        points.push([
            { x: cX, y: topY + arrowH },
            { x: cX, y: bottomY }
        ]);
        arrowPoints.push(getArrow(4, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY));
        points.push([
            { x: (arrowPoints[2][0].x + arrowPoints[2][2].x) / 2, y: (arrowPoints[2][0].y + arrowPoints[2][2].y) / 2 },
            { x: cX, y: cY },
            { x: cX, y: bottomY }
        ]);
        break;
    case '1111':
        // 直行左转右转调头
        leftX = centerXY.x - w / 2 * 5;
        rightX = centerXY.x + w / 2 * 5;
        cX = centerXY.x;
        arrowPoints.push(getArrow(1, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY));
        points.push([
            { x: leftX + w / 2, y: bottomY - arrowH },
            { x: leftX + w / 2, y: cY + w / 2 },
            { x: leftX + w / 2 * 5, y: cY + w / 2 },
            { x: leftX + w / 2 * 5, y: bottomY },
        ]);
        arrowPoints.push(getArrow(2, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY));
        points.push([
            { x: (arrowPoints[1][0].x + arrowPoints[1][2].x) / 2, y: (arrowPoints[1][0].y + arrowPoints[1][2].y) / 2 },
            { x: cX, y: cY },
            { x: cX, y: bottomY }
        ]);
        arrowPoints.push(getArrow(3, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY));
        points.push([
            { x: cX, y: topY + arrowH },
            { x: cX, y: bottomY }
        ]);
        arrowPoints.push(getArrow(4, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY));
        points.push([
            { x: (arrowPoints[3][0].x + arrowPoints[3][2].x) / 2, y: (arrowPoints[3][0].y + arrowPoints[3][2].y) / 2 },
            { x: cX, y: cY },
            { x: cX, y: bottomY }
        ]);
        break;
    default:
        // 专用车道，采用直行坐标
        exclusive = true;

        leftX = centerXY.x - w / 2;
        rightX = centerXY.x + w / 2;
        cX = centerXY.x;
        arrowPoints.push(getArrow(3, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY));
        points.push([
            { x: cX, y: topY + arrowH },
            { x: cX, y: bottomY }
        ]);
        break;
    }

    return { arrowPoints, points, w, exclusive };
};
const getDirectionLabel = (key) => {
    let label = '';
    switch (key) {
    case '0001':
        // 调头
        label = '调头';
        break;
    case '0100':
        // 左转
        label = '左转';
        break;
    case '1000':
        // 直行
        label = '直行';
        break;
    case '0010':
        // 右转
        label = '右转';
        break;
    case '0101':
        // 左转调头
        label = '左转调头';
        break;
    case '1001':
        // 直行调头
        label = '直行调头';
        break;
    case '0011':
        // 右转调头
        label = '右转调头';
        break;
    case '1100':
        // 直行左转
        label = '直行左转';
        break;
    case '0110':
        // 左转右转
        label = '左转右转';
        break;
    case '1010':
        // 直行右转
        label = '直行右转';
        break;
    case '1101':
        // 直行左转调头
        label = '直行左转调头';
        break;
    case '1011':
        // 直行右转调头
        label = '直行右转调头';
        break;
    case '0111':
        // 左转右转调头
        label = '左转右转调头';
        break;
    case '1110':
        // 直行左转右转
        label = '直行左转右转';
        break;
    case '1111':
        // 直行左转右转调头
        label = '直行左转右转调头';
        break;
    default:
        // 专用车道，采用直行坐标
        label = '专用车道';
        break;
    }

    return label;
};

// 获取人行标识坐标
const getWalkIdentifyings = (w, h, boundaryW, centerXY) => {
    // 标识边界
    const topY = centerXY.y - h / 2;
    const bottomY = centerXY.y + h / 2;
    const leftX = centerXY.x - w / 2;
    const rightX = centerXY.x + w / 2;
    const boundaryW2 = boundaryW / 2;

    const boundaryLine = [
        [
            { x: leftX + boundaryW2, y: topY },
            { x: leftX + boundaryW2, y: bottomY },
        ],
        [
            { x: rightX - boundaryW2, y: topY },
            { x: rightX - boundaryW2, y: bottomY },
        ],
        [
            { x: leftX, y: centerXY.y },
            { x: rightX, y: centerXY.y },
        ]
    ];
    const walkLine = [
        { x: leftX, y: centerXY.y - h / 4 },
        { x: rightX, y: centerXY.y - h / 4 },
    ];

    return { boundaryLine, walkLine, w: boundaryW };
};

// 转换margin/padding
const convertMorP = (val, dpr) => {
    let MorP = [];
    const type = getType(val);
    if (type === 'Number') {
        MorP = [val * dpr, val * dpr, val * dpr, val * dpr];
    } else if (type === 'Array') {
        switch (val.length) {
        case 1:
            MorP = [val[0] * dpr, val[0] * dpr, val[0] * dpr, val[0] * dpr];
            break;
        case 2:
            MorP = [val[0] * dpr, val[1] * dpr, val[0] * dpr, val[1] * dpr];
            break;
        case 3:
            MorP = [val[0] * dpr, val[1] * dpr, val[2] * dpr, val[1] * dpr];
            break;
        case 4:
            MorP = val;
            break;
        default:
            MorP = [0, 0, 0, 0];
            break;
        }
    } else {
        MorP = [0, 0, 0, 0];
    }
    return MorP;
};

export { getDirectionIdentifyings, getDirectionLabel, computePosition, getWalkIdentifyings, convertMorP };