canvas实现路段连通和路段效果

源码

// utils.js

/**
 * 通过判断type返回目标图片的地址
 * @param   {String}   type       图片类型
 * @returns {String}   url        目标图片的地址
 */
export function setImgUrl(type) {
    let url;
    switch (type) {
        case "track":
            url = require("./image/car.png");
            break;
        case "gantry":
            url = require("./image/equipmentIcon.png");
            break;
        case "station":
            url = require("./image/dataIcon.png");
            break;
        case "hub":
            url = require("./image/userIcon.png");
            break;
        case "hh-station":
            url = require("./image/homeIcon.png");
            break;
        case "icon-hub":
            url = require("./image/password.png");
            break;
        default:
            url = require("./image/user.png");
            break;
    }
    return url;
}

/**
 * 为数据对象添加位置标记字段
 * @param {Object.} data 原始数据对象，键为分组标识，值为对象数组
 * @returns {Object.} 处理后的新对象，数组元素添加 position 字段（start/end/transition）
 */
export function addPositionFields(data) {
    const result = {};

    // 遍历对象的每个属性
    for (const key in data) {
        if (data.hasOwnProperty(key)) {
            const array = data[key];
            result[key] = [];

            // 处理数组中的每个元素
            for (let i = 0; i < array.length; i++) {
                const item = { ...array[i] }; // 创建新对象避免修改原数据

                // 根据位置设置 position 字段
                if (i === 0) {
                    item.position = 'start';
                } else if (i === array.length - 1) {
                    item.position = 'end';
                } else {
                    item.position = 'transition';
                }

                result[key].push(item);
            }
        }
    }

    return result;
}

/**
 * 为数据对象添加链式连接关系
 * @param {Object.} data 原始数据对象，键为分组标识，值为对象数组
 * @returns {Object.} 处理后的新对象，数组元素添加 source（当前节点ID）和 target（下一节点ID）字段，
 *                                  格式为 { 分组标识: [{ source: "key-i", target: "key-(i+1)" }, ...] }
 * @example
 * // 输入
 * { group1: [{}, {}, {}] }
 * // 输出
 * { 
 *   group1: [
 *     { source: 'group1-0', target: 'group1-1' },
 *     { source: 'group1-1', target: 'group1-2' },
 *     { source: 'group1-2', target: null }
 *   ]
 * }
 */
export function setSourceAndTarget(data) {
    const result = {};
    // 遍历对象的每个属性
    for (const key in data) {
        if (data.hasOwnProperty(key)) {
            const array = data[key];
            result[key] = [];
            // 处理数组中的每个元素
            for (let i = 0; i < array.length; i++) {
                const item = { ...array[i] }; // 创建新对象避免修改原数据

                // 设置节点连接关系：
                // - 非末尾节点：target指向下一节点（key-(i+1)）
                // - 末尾节点：target设为null表示终点
                if (i !== array.length - 1) {
                    item.source = `${key}-${i}`;
                    item.target = `${key}-${i + 1}`;
                } else {
                    item.source = `${key}-${i}`;
                    item.target = null;
                }
                result[key].push(item);
            }
        }
    }
    return result;
}

/**
 * 格式化并去重点位数据
 * @param   {Object.} pointData 原始点位数据对象，键为分组标识，值为点位数组
 * @returns {Array} 去重后的点位数组（根据 code 字段去重）
 */
export function pointFormat(pointData) {
    // let _pointData = [];
    // for (let key in pointData) {
    //     const gsPointList = pointData[key];
    //     // 获取点位数据（去重）
    //     gsPointList.forEach((ele) => {
    //         const info = _pointData.find(
    //             (item) => item.code === ele.code
    //         );
    //         if (!info) {
    //             _pointData.push(ele);
    //         }
    //     });
    // }
    // return _pointData;
    const uniquePoints = new Set();
    const result = [];

    for (const gsPointList of Object.values(pointData)) {
        for (const point of gsPointList) {
            if (!uniquePoints.has(point.code)) {
                uniquePoints.add(point.code);
                result.push(point);
            }
        }
    }

    return result;
}

/**
 * 将地理坐标转换为屏幕坐标
 * @param   {Array