上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

three 地图标注省份文字

[复制链接]
  • TA的每日心情
    擦汗
    昨天 09:20
  • 签到天数: 192 天

    [LV.7]常住居民III

    687

    主题

    5428

    回帖

    6365

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6365

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2023-5-10 14:58:36 | 显示全部楼层 | 阅读模式

    效果图
    图片.png

    遍历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中导入即可

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表