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博客

相关推荐
用户516816614584117 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端缘梦17 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
Simon_He17 小时前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
王同学QaQ1 天前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊1 天前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
艾小码1 天前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
Gracemark2 天前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
天下无贼2 天前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
洋葱头_2 天前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing2 天前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化