Threejs 开发3D地图实践总结

export function getPoiRect(poi, zoomLevel, wrapper) {
  let style = getStyle(poi.styleId, zoomLevel);
  if (!style) {
    console.warn("style is invalid!");
    return;
  }
  let labelStyle = getStyle(style.labelid, zoomLevel);
  if (!labelStyle) {
    console.warn("labelStyle is invalid!");
    return;
  }
  if (!poi.text) {
    return;
  }
  let charWidth = (TEXTPROP.charWidth || 11.2) * // 11.2是根据测试得到的估值
    (labelStyle.fontSize / (TEXTPROP.fontSize || 13)); // 13是得到11.2时的fontSize
  // 返回2d坐标
  let x = 0;//poi.points[0].x;
  let y = 0;//-poi.points[0].z;
  let path = [];
  let icon = iconSet[poi.styleId];
  let iconWidh = (icon && icon.width) || 32;
  let iconHeight = (icon && icon.height) || 32;
  let multi = ///g;
  let firstLinePos = [];
  let textAlign = null;
  let baseLine  = null;
  let hOffset = (iconWidh / 2) * ICONSCALE;
  let vOffset = (iconHeight / 2) * ICONSCALE;
  switch(poi.direct) {
    case 2: { // 左
      firstLinePos.push(x - hOffset - 2);
      firstLinePos.push(y);
      textAlign = 'right';
      baseLine = 'middle';
      break;
    };
    case 3: { // 下
      firstLinePos.push(x);
      firstLinePos.push(y - vOffset - 2);
      textAlign = 'center';
      baseLine = 'top';
      break;
    };
    case 4: { // 上
      firstLinePos.push(x);
      firstLinePos.push(y + vOffset + 2);
      textAlign = 'center';
      baseLine = 'bottom';
      break;
    };
    case 1:{ // 右
      firstLinePos.push(x + hOffset + 2);
      firstLinePos.push(y);
      textAlign = 'left';
      baseLine = 'middle';
      break;
    };
    default: {
      firstLinePos.push(x);
      firstLinePos.push(y);
      textAlign = 'center';
      baseLine = 'middle';
    }
  }
  path = path.concat(firstLinePos);

  let minX = null, maxX = null;
  let minY = null, maxY = null;
  let parts = poi.text.split(multi);

  let textWidth = 0;
  if (wrapper) {
    // 汉字和数字的宽度是不同的，所以必须使用measureText来精确测量
    let textWidth1 = wrapper.context.measureText(parts[0]).width;
    let textWidth2 = wrapper.context.measureText(parts[1] || '').width;
    textWidth = Math.max(textWidth1, textWidth2);
  } else {
    textWidth = Math.max(parts[0].length, parts[1] ? parts[1].length : 0) * charWidth;
  }

  if (textAlign === 'left') {
    minX = x - hOffset;
    maxX = path[0] + textWidth; // 只用第一行文本
  } else if (textAlign === 'right') {
    minX = path[0] - textWidth;
    maxX = x + hOffset;
  } else { // center
    minX = x - Math.max(textWidth / 2, hOffset);
    maxX = x + Math.max(textWidth / 2, hOffset);
  }
  if (baseLine === 'top') {
    maxY = y + vOffset;
    minY = y - vOffset - labelStyle.fontSize * parts.length;
  } else if (baseLine === 'bottom') {
    maxY = y + vOffset + labelStyle.fontSize * parts.length;
    minY = y - vOffset;
  } else { // middle
    minY = Math.min(y - vOffset, path[1] - labelStyle.fontSize / 2);
    maxY = Math.max(y + vOffset, path[1] + labelStyle.fontSize * (parts.length + 0.5 - 1));
  }

  return {
    min: {
      x: minX,
      y: minY
    },
    max: {
      x: maxX,
      y: maxY
    }
  };
}