three 地图标注省份文字

李恒道

效果图

遍历geojson的features属性
如果找到了中心质点或center就执行文字绘制

      const cneterPoint=item.properties.centroid??item.properties.center
      if (cneterPoint) {
        renderFont(projection(cneterPoint), item.properties.name);
      }

文字绘制也比较简单
主要就是读到x和y后生成一个TextGeometry，设置到对应位置，然后旋转为平行并添加到页面上

  const renderFont = (posStart, text) => {
    const [x0, y0] = [...posStart];
    var txtGeo = new THREE.TextGeometry(text, {
      font: font,
      size: 0.5,
      height: 0.001,
    });
    var txtMater = new THREE.MeshBasicMaterial({ color: '#3DEFFF' });
    var txtMesh = new THREE.Mesh(txtGeo, txtMater);
    txtMesh.position.set(x0-0.5, 3.5, y0);
    txtMesh.rotation.x = -0.5 * Math.PI;
    sence.add(txtMesh);
  };

font可以在webpack导入
import STXingkai_Regula rfrom './STXingkai_Regular.json';
然后调用
const font = new THREE.FontLoader().parse(helvetiker);
得到font类型
注意
如果渲染中文文字必须使用中文ttf
可以搜索对应的ttf文件，这里我为了文字大小问题选择了华文行楷
在
http://gero3.github.io/facetype.js/
解析得到了json文件
然后在webpack中导入即可