大发888体育:three.js 绘制3d舆图

admin 2个月前 (07-16) 科技 40 0

通过舆图数据配合three可以做出异常酷炫的舆图,在大数据展示中十分常见。

这篇郭先生就来说说使用three.js几何体制作3D舆图。在线案例点击原文地址。

舆图的数据是各个舆图块的点数组,通过THREE.ExtrudeGeometry方式挤压出舆图的版块,然后通过THREE.Line方式画出舆图的分割线。舆图的数据参见DATAV.GeoAtlas,鼠标悬浮到舆图版块高亮,效果如图

1. 获得数据,遍历数据,处置数据

rawMap() {
    this.worldGeometry = mapJson; //mapJson就是舆图的json数据
    this.worldGeometry.features.forEach((worldItem, worldItemIndex) => {
        worldItem.geometry.coordinates.forEach(worldChildItem => {
            worldChildItem.forEach(countryItem => { //每个版块的点数组
                this.drawExtrude(this.drawShape(countryItem)) //通报数据画出舆图的shape,返回效果再传到drawExtrude方式获得ExtrudeGeometry网格
                this.drawLine(countryItem); //通报数据画出舆图边线
            });
        });
    });
        group.scale.y = 1.2; //group内里包罗所有版块网格
    scene.add(group);
    lineGroup.scale.y = 1.2; //lineGruop内里包罗所有线的网格
    scene.add(lineGroup);
    this.render();
}

2. 通报数据画出舆图的shape,返回效果再传到drawExtrude方式获得ExtrudeGeometry网格。

drawShape(posArr) {
    var shape = new THREE.Shape();
    shape.moveTo(posArr[0][0] - this.offsetX, posArr[0][1] - this.offsetY);
    posArr.forEach(item => {
        shape.lineTo(item[0] - this.offsetX, item[1] - this.offsetY);
    });
    return shape;
}
drawExtrude(shapeObj) {
    var geometry = new THREE.ExtrudeGeometry(shapeObj, this.options);
    var material1 = new THREE.MeshPhongMaterial({
        color: this.bgColor,
        specular: this.bgColor
    });
    var material2 = new THREE.MeshBasicMaterial({
        color: 0x008bfb
    });
    let shapeGeometryObj = new THREE.Mesh(geometry, [material1, material2]);
    shapeGeometryObj.name = 'board';
    group.add(shapeGeometryObj);
}

3. 通报数据画出舆图边线

drawLine(posArr) {
    let geometry1 = new THREE.Geometry();
    let geometry2 = new THREE.Geometry();
        posArr.forEach(item => {
        geometry1.vertices.push(
            new THREE.Vector3(
                item[0] - this.offsetX,
                item[1] - this.offsetY,
                1.01
            )
        );
        geometry2.vertices.push(
            new THREE.Vector3(
                item[0] - this.offsetX,
                item[1] - this.offsetY,
                -0.01
            )
        );
    });
    let lineMaterial = new THREE.LineBasicMaterial({ color: 0x008bfb });
    let line1 = new THREE.Line(geometry1, lineMaterial);
    let line2 = new THREE.Line(geometry2, lineMaterial);
    lineGroup.add(line1);
    lineGroup.add(line2);
}

4. 鼠标悬浮后高亮版块

handleMousemove(event) {
    event.preventDefault();
    let mouse = new THREE.Vector2(0, 0);
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
    this.raycaster.setFromCamera(mouse, camera);
    let intersects = this.raycaster.intersectObjects(group.children);
    this.previousObj.material[0].color = new THREE.Color(this.bgColor);
    if(intersects[0] && intersects[0].object) {
        intersects[0].object.material[0].color = new THREE.Color(0xffaa00);
        this.previousObj = intersects[0].object; //previousObj保留悬浮的工具,鼠标移开后恢复颜色。
    }
}

主要代码部门就是这样,我们也可以在颜色改变时加入一些渐变动画,three.js可以写出林林总总的舆图,这是入门级的版本,希望给萌新一些启发。

 

转载请注明地址:郭先生的博客

,

欧博网址

欢迎进入欧博网址(Allbet Gaming):www.aLLbetgame.us,欧博网址开放会员注册、代理开户、电脑客户端下载、苹果安卓下载等业务。

Allbet声明:该文看法仅代表作者自己,与本平台无关。转载请注明:大发888体育:three.js 绘制3d舆图

网友评论

  • (*)

最新评论

站点信息

  • 文章总数:438
  • 页面总数:0
  • 分类总数:8
  • 标签总数:981
  • 评论总数:120
  • 浏览总数:3091