vue3实现模拟地图上，站点名称按需显示的功能

vue3 · 浏览次数 : 0

小编点评

## 车辆模拟地图站点名称显示问题记录很久没有更新博客了，因为最近工作实在太忙了。最近在做车辆模拟地图，其中一个功能是实现控制站点名称按需显示。折腾了好一段时间，终于完成了这个功能。下面是最终的效果图。 ### 需求 - 首末站必须显示 - 从第一个站开始，如果站点名称能显示，则显示，如果站点名称重叠则隐藏 - 当界面宽度变化时，车辆模拟地图自动变化，保证站点名称能够最大限度的显示 ### 技术实现 #### 1. 获取站点名称及宽度通过`getSiteName`和`getSiteNameWidth`函数获取站点名称和宽度。其中，`getSiteName`函数根据站点类型（首末站、按顺序排列等）返回相应的站点名称。`getSiteNameWidth`函数用于计算站点名称的宽度。 ```javascript export const getSiteName = (item: any, showFullName?:boolean=false) => { // ... } export const getSiteNameWidth = (item: any,showFullName?:boolean=false) => { // ... } ``` #### 2. 计算站点显示状态通过`calcSite`和`calcDownSite`函数计算上行和下行的站点是否显示在模拟地图上。这两个函数接收站点数据和线路宽度作为参数，根据站点名称的宽度和其他条件判断站点是否显示。 ```javascript function calcSite(station: any, lineWidth: number) { // ... } function calcDownSite(station: any, lineWidth: number) { // ... } ``` #### 3. 获取站点中心点位置通过`getSiteCx`和`getDownSiteCx`函数获取上行和下行的站点中心点位置。这两个函数接收站点对象和线路宽度作为参数，返回站点的水平x位置。 ```javascript const getSiteCx = (item: any, index: number) => { // ... }; const getDownSiteCx = (item: any, index: number) => { // ... }; ``` #### 4. CSS定位站点的布局采用CSS绝对定位。将SVG图形改为HTML实现后，布局变得更加简单。 ### 总结在这个项目中，我遇到了很多挑战，包括算法复杂度、站点名称长度计算、站点显示状态判断等问题。通过不断地调试和优化，最终完成了车辆模拟地图的站点名称显示功能。

正文

很久很久没有更新博客了，因为实在是太忙了，每天都有公司的事情忙不完.......

最近在做车辆模拟地图，在实现控制站点名称按需显示时，折腾了好一段时间，特此记录一下。最终界面如下图所示：

站点显示需求：首末站必须显示，从第一个站开始，如果站点名称能显示下，则显示，如果站点名称会重叠则隐藏，以此类推。当界面宽度变化时，车辆模拟地图自动变化，保证站点名称能够最大限度的显示。

最开始我用的比例换算法，算法复杂度是O，结果总是不准。尽管一开始我就觉得算法的复杂度应该是O2。我之前一直想着只遍历一次就算出来，

需要注意的地方：由于站点的名称内容是千奇百怪的，可以有空格，各种特殊图标，所以站点文字的长度计算是一个问题，这里是通过canvas来计算的。还有，这里我添加了一个限制，站点文字内容我最大显示120px，超出隐藏并显示省略号，站点名称上添加了title显示全称。

/**
 * 获取站点名称
 * @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 {
    if(showFullName){
      name=item.stationName;
    }else{
      name =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;
        });
        let 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;
                }
            }
        })
    }

下行站点的计算有些差别，因为left基本上是反着的：

    //计算下行站点，控制站点是否显示在模拟地图上 getDownSiteCx
    function calcDownSite(station: any, lineWidth: number) {
        if (station.length < 1) return [];
        station.forEach((f: any, index) => {
            f.show=false;
        });
        let 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;
    }

说明：站点的布局采用css绝对定位。第一个版本这块我是采用的svg画的，后来发现扩展起来越来越麻烦，周末就在家花了半天时间全部改造为html实现了。