three 地图标注省份文字
效果图
遍历geojson的features属性
如果找到了中心质点或center就执行文字绘制
```js
const cneterPoint=item.properties.centroid??item.properties.center
if (cneterPoint) {
renderFont(projection(cneterPoint), item.properties.name);
}
```
文字绘制也比较简单
主要就是读到x和y后生成一个TextGeometry，设置到对应位置，然后旋转为平行并添加到页面上
```js
const renderFont = (posStart, text) => {
const = [...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中导入即可
页:
[1]