百度地图+3d模型

最新推荐文章于 2025-02-18 07:18:07 发布

magnetoY

最新推荐文章于 2025-02-18 07:18:07 发布

阅读量2.4k

点赞数 1

文章标签：前端 js

本文链接：https://blog.csdn.net/weixin_47235643/article/details/121532003

版权

该博客演示了如何结合Three.js库和MapVGL，在百度地图WebGL版上创建3D图形（如圆锥体和文字）并进行动画展示。首先配置地图和视图，然后加载JSON数据绘制形状，接着加载Three.js库，创建并添加3D几何体，最后加载字体文件显示中文字体。整个过程涉及地图交互、数据处理和3D渲染技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

建议将配置文件弄好后，直接看threejs文档，需要中文字体包，window用户直接找c盘，mac用户跟window用户要一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>MapVGL</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <style>
    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    #map_container {
        width: 100%;
        height: 100%;
        margin: 0;
    }
    </style>
    <script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=<输入你自己的ak去>"></script>
    <script src="//mapv.baidu.com/build/mapv.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
    <!-- <script src="./glft.js"></script> -->
    <script src="./common.js"></script>
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.129/dist/mapvgl.min.js"></script>
    <script type="text/javascript" src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.129/dist/mapvgl.threelayers.min.js"></script></head>
<body>
    <div id="map_container"></div>
    <script>
    /* global BMapGL */

    /* global mapv */

    /* global mapvgl */

    /* global initMap */

    var map = initMap({
        tilt: 80,
        heading: -45.3,
        center: [120.366874,36.068077],
        zoom: 17
    });

    var view = new mapvgl.View({
        map: map
    });
    view.startAnimation();

    fetch('./bd09data.json').then(function (rs) {
        return rs.json();
    }).then(function (rs) {
        console.log(rs)
        var  polygons = rs;
        
        var shaperLayer = new mapvgl.ShapeLayer({
            texture: './wall2.png',
            isTextureFull: true,
            textureScale: 0.05,
            topColor: 'rgba(39, 50, 85, 0.5)',
            opacity: 1.0,
            zIndex: 999
        });
        // var shaperLayer = new mapvgl.ShapeLayer({
        //     color: 'rgba(45, 75, 102, 1)',
        //     style: 'windowAnimation',
        //     opacity: 1
        // });
        // shaperLayer.setZIndex(99)
        view.addLayer(shaperLayer);
        shaperLayer.setData(polygons);

    });

    var threeLayer = new mapvgl.ThreeLayer();
    view.addLayer(threeLayer);


    var projection = mapvgl.MercatorProjection;
    var point = projection.convertLL2MC(new BMapGL.Point(120.366874,36.068077));
    var point1 = projection.convertLL2MC(new BMapGL.Point(120.366074,36.068077));

    map.enableKeyboard();
    map.enableScrollWheelZoom();
    map.enableInertialDragging();
    map.enableContinuousZoom();

    var geometry = new THREE.ConeGeometry(40 , 100, 8, 1, false)
    var material =  new THREE.MeshBasicMaterial( { color: 0xff0000, flatShading: false, wireframe:false})

    var cube = new THREE.Mesh(geometry, material);
    cube.rotateX(Math.PI /2 *3)

    cube.position.x = point.lng;
    cube.position.y = point.lat;
    cube.position.z = 150;
    threeLayer.add(cube);


    var loader = new THREE.FontLoader();

    loader.load( 'font/STXihei_Regular.json', function ( font ) {

        var textgeometry = new THREE.TextBufferGeometry( '你好我是文字', {
            font: font,
            size: 40,
            height: 5,
            curveSegments: 12,
            bevelEnabled: false,
            bevelThickness: 10,
            bevelSize: 8,
            bevelSegments: 5
        });

        var material1 =  new THREE.MeshBasicMaterial( { color: 0xffff00, flatShading: false, wireframe:false})

        var cube1 = new THREE.Mesh(textgeometry, material1);
        cube1.rotateX(Math.PI /2 )

        cube1.position.x = point1.lng;
        cube1.position.y = point1.lat;
        cube1.position.z = 240;
        threeLayer.add(cube1);
        console.log(cube1)

    } );

    fetch('./linstr.json').then(function (rs) {
        return rs.json();
    }).then(function (csvstr) {
        console.log('csvstr', csvstr)
        // var dataSet = mapv.csv.getDataSet(csvstr);
        // var data = dataSet.get();
        var linelayer = new mapvgl.LineTripLayer({
            color: 'rgba(130, 113, 67, 0.1)',
            step: 0.3,
            trailLength: 2000,
            startTime: 0, 

            data: csvstr
        });
        view.addLayer(linelayer);
    });
    // linstr


    // const buildloader = new THREE.GLTFLoader();

    // var buildlayer =  buildloader.load( './AM203_31.gltf', function ( gltf ) {

    //     var cube2 = new THREE.Mesh(gltf, material1);
    //     // cube1.rotateX(Math.PI /2 )

    //     cube2.position.x = point1.lng;
    //     cube2.position.y = point1.lat;
    //     cube2.position.z = 0;
    //     threeLayer.add(cube2);
    //     // scene.add( gltf.scene );

    //     }, undefined, function ( error ) {

    //     console.error( error );

    // } );



    </script>
</body>
</html>
</body>
</html>