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

相关推荐
拉不动的猪18 小时前
webpack分包优化简单分析
前端·vue.js·webpack
麦麦大数据18 小时前
F035 vue+neo4j中医南药药膳知识图谱可视化系统 | vue+flask
vue.js·知识图谱·neo4j·中医·中药·药膳·南药
麦麦大数据19 小时前
F037 vue+neo4j 编程语言知识图谱可视化分析系统vue+flask+neo4j
vue.js·flask·知识图谱·neo4j·可视化·编程语言知识图谱
Sheldon一蓑烟雨任平生19 小时前
Vue3 组件 v-model
vue.js·vue3·v-model·definemodel·v-model修饰符·自定义双向绑定组件·多个v-model绑定
OpenTiny社区19 小时前
如何使用 TinyEditor 快速部署一个协同编辑器?
前端·vue.js
胖虎26519 小时前
打造梦幻粒子动画效果:基于 Vue 的 Canvas 实现方案
vue.js
李剑一20 小时前
vite框架下大屏适配方案
前端·vue.js·响应式设计
胖虎26520 小时前
从零搭建 Vue3 富文本编辑器:基于 Quill可扩展方案
vue.js
xhload3d20 小时前
热力图可视化为何被广泛应用?| 图扑数字孪生
3d·html5·webgl·数字孪生·可视化·热力图·三维建模·轻量化·电力能源·空间热力图
濑户川21 小时前
Vue3 计算属性与监听器:computed、watch、watchEffect 用法解析
前端·javascript·vue.js