Threejs 实现3D 地图（04）3d 地图的柱状图和文字显示

3d 地图的数据展示

代码仓库：

King/threejs-3d-map

核心代码：

function createText(feature, level, font) {if (feature.properties.name) {const [x_XYZ, y_XYZ] = handleProject(feature.properties.center)// 缺点：首次渲染很慢 无法使用中文已经中文标点符号 需要特殊处理（自行百度）// 优点：清晰const geometry = new TextGeometry(`GDP:32632`, {font: font,size: !level ? 10 : 6, // 字体大小depth: 0,curveSegments: 4,});const materials = new THREE.MeshBasicMaterial({color: 0xffffffff,transparent: true,opacity: 0.5,})const textMesh = new THREE.Mesh(geometry, materials)textMesh.position.set(x_XYZ - 20, -y_XYZ, 150);return textMesh// 缺点：使用的是贴图 会导致比较模糊// 优点：首次渲染很快 能使用中文已经中文标点符号// const canvas = document.createElement('canvas');// const context = canvas.getContext('2d');// // 设置 Canvas 的尺寸// canvas.width = 512;// canvas.height = 256;//// // 设置字体样式// context.font = '50px Arial';// context.fillStyle = 'white';  // 设置文字颜色// context.textAlign = 'center'; // 文字居中// context.textBaseline = 'middle'; // 文字垂直居中// // 绘制文字到 Canvas 中心// context.fillText('GDP 总额：20000亿', canvas.width / 2, canvas.height / 2);//// const texture = new THREE.CanvasTexture(canvas);// const material = new THREE.MeshBasicMaterial({ map: texture });// const geometry = new THREE.PlaneGeometry(50, 10);// const textMesh = new THREE.Mesh(geometry, material);// textMesh.position.set(x_XYZ, -y_XYZ, 150);// return textMesh}
}function createCylinder(feature, level) {const tb = level === 0 ? 10 : 6if (feature.properties.center) {const [x_XYZ, y_XYZ] = handleProject(feature.properties.center)// 随机生成20 - 100 之间的正整数const random = Math.floor(Math.random() * 80) + 20// 创建一个柱体let geometry_g = new THREE.CylinderGeometry(tb, tb, random, 32);let material_g = new THREE.MeshBasicMaterial({color: '#0DEAF8',transparent: true,opacity: 0.8});let cylinder = new THREE.Mesh(geometry_g, material_g);cylinder.position.set(x_XYZ, -y_XYZ, 16 + (random / 2));cylinder.rotateX(Math.PI / 2);return cylinder}}

下一篇：

Threejs 实现3D 地图（05）3d 地图进场动画和地图边缘动画-CSDN博客