vue3实现模拟地图站点名称按需显示的功能(车辆模拟地图)

/**
 * 获取站点名称
 * @param item 
 * @param showFullName 是否总是显示站点全名
 */
/** */
export const getSiteName = (item: any,showFullName?:boolean=false) => {
  const { siteSign } = simulatedMapConf.value;
  let name = '';
  if (siteSign == 'firstWord') {
    name = getSubStrByPreNum(item.stationName);
  } else if (siteSign == 'order') {
    name = item.stationSeq + '';
  } else {
    name=showFullName?item.stationName:(item.show? item.stationName:''); //show控制站点名称是否显示
  }
  return name || '';
}
/**
 * 获取站点名称宽度
 * @param item 站点对象
 * @param showFullName 是否总是显示站点全名
 * @returns 
 */
export const getSiteNameWidth = (item: any,showFullName?:boolean=false) => {
  const name =showFullName?item.stationName: getSiteName(item,showFullName);
  const width= calculateStringWidth(name);
  return width>siteMaxWidth?siteMaxWidth:width;
}
/**
 * 根据字符串计算出界面渲染的宽度
 * @param str 
 * @returns 
 */
function calculateStringWidth(str:string) {
  // 创建一个虚拟的 <canvas> 元素
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  // 设置字体样式
  ctx.font = '12px sans-serif';
  // 使用 canvas 的 measureText 方法测量字符串的宽度
  const width = ctx.measureText(str).width;
  // 返回计算出的宽度
  return width;
}

//计算上行站点，控制站点是否显示在模拟地图上
    function calcSite(station: any, lineWidth: number) {
        if (station.length < 1) return [];
        station.forEach((f: any, index) => {
            f.show=false;
        });
        const lastSiteLength = getSiteNameWidth(station[station.length - 1], true) / 2;//站点文字宽度
        let lastLeft = getSiteCx(station[station.length - 1], station.length - 1);//最后一个站点left
        lastLeft = toDecimal(lastLeft - lastSiteLength);
        station.forEach((f: any, index) => {
            let siteLength = getSiteNameWidth(f, true);//站点文字宽度
            let bigHalf = siteLength / 2;//获取当前的半宽
            f.left = getSiteCx(f, index); 
            if (index == 0 || index == station.length - 1) { //第一项和最后一项必须显示
                f.show = true;
            } else {
                const preShowIndex = getLastTrueIndex(station); //获取前面最近一个显示站点的索引
                const preEndLeft = toDecimal(station[preShowIndex].left + getSiteNameWidth(station[preShowIndex], true) / 2);//上一项显示的站点名称结束left位置
                f.show = toDecimal(f.left - bigHalf) >=preEndLeft && preEndLeft < lastLeft; //如果上一个显示站点文字的结尾位置 小于等于 当前站点文字的开始位置  并且小于最后一个站点文字的开始位置

if (f.show && toDecimal(f.left + bigHalf) > lastLeft) {
                    f.show = false;
                }
            }
        })
    }

//获取list集合中最后一项show的index位置
    function getLastTrueIndex(dataList: any) {
        // 从数组末尾第2项开始向前遍历
        for (let i = dataList.length - 2; i >= 0; i--) {
            if (dataList[i].show === true) {
                return i;  // 返回第一个找到的最后一个为true的索引
            }
        }
        return -1;  // 如果未找到符合条件的对象，返回-1
    }

//计算下行站点，控制站点是否显示在模拟地图上 getDownSiteCx
    function calcDownSite(station: any, lineWidth: number) {
        if (station.length < 1) return [];
        station.forEach((f: any, index) => {
            f.show=false;
        });
        const lastSiteLength = getSiteNameWidth(station[station.length - 1], true) / 2;//站点文字宽度
        let lastLeft = getDownSiteCx(station[station.length - 1], station.length - 1);//最后一个站点left
        lastLeft = toDecimal(lastLeft + lastSiteLength);
        station.forEach((f: any, index) => {
            let siteLength = getSiteNameWidth(f, true);//站点文字宽度
            let bigHalf = siteLength / 2;//获取当前的半宽
            f.left = getDownSiteCx(f, index); 
            if (index == 0 || index == station.length - 1) { //第一项和最后一项必须显示
                f.show = true;
            } else {
                const preShowIndex = getLastTrueIndex(station); //获取前面最近一个显示站点的索引
                const preEndLeft = toDecimal(station[preShowIndex].left - getSiteNameWidth(station[preShowIndex], true) / 2);//上一项显示站的的结束left位置
                f.show = toDecimal(f.left + bigHalf) <=preEndLeft && preEndLeft > lastLeft;
                if (f.show && toDecimal(f.left - bigHalf) < lastLeft) {
                    f.show = false;
                }
            }
        })
    }

//获取上行站点水平x位置
    const getSiteCx = (item: any, index: number) => {
        return startleft.value + dLayout.lineWidth * index;
    }
    //获取下行站点水平x位置
    const getDownSiteCx = (item: any, index: number) => {
        return downStartleft.value - layout.endLine - dLayout.downLineWidth * index;
    }

//计算站点，控制站点是否显示在模拟地图上
    function calcSite(station: any, lineWidth: number) {
        let availableWidth = (station.length - 1) * lineWidth; //总长度
        //记录显示站点的长度
        let totalLength = 0;
        station.forEach((f: any, index) => {
            let siteLength = getSiteNameWidth(f, true);
            let bigHalf =siteLength / 2;//获取比较大的半宽
            let bigHalfPre = 0;
            //计算上一项的文字半宽
            if (index >= 1) {
                let siteLengthPre = getSiteNameWidth(station[index - 1], true);
                bigHalfPre =siteLengthPre / 2;
            }
            f.left = toDecimal(lineWidth * index);
            f.show =index==0?true: f.left >=toDecimal(totalLength);
            if(index >= 1&&station[index-1].show&&bigHalf+bigHalfPre>lineWidth){
                f.show=false;
            }
            if (f.show) {
                let times = getDivisor(siteLength, lineWidth);
                totalLength += times * lineWidth;
            }
        })
    }

/**
 * 两个数相除有余数时结果加1
 * @param all 被除数 站点宽度
 * @param num 除数  线宽
 * @returns 
 */

export const getDivisor=( all:number,item:number)=>{
    if(all<=item) return 1;
    let diff:number=0;
    if(item<=20){
        diff=2.5;
    }
    if(item<=30){
        diff=2;
    }
    else if(item<=40){
        diff=1.5;
    }
    else if(item<=46){
        diff=1.05;
    }
    else if(item<=50){
        diff=1;
    }
    return all%item==0?(all/item):(Math.ceil(all/item)+diff);
}