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 : 6
    if (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博客