搜索
简帛阁>技术文章>百度地图+3d模型

百度地图+3d模型

建议将配置文件弄好后,直接看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></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>

建议将配置文件弄好后,直接看threejs文档,需要中文字体包,window用户直接找c盘,mac用户跟window用户要一下<!DOCTYPEhtml><htmllangen>
百度地图的立体效果来实现百度映射用于使用二维映射图之前。如今,百度地图找到支持立体效果。为了实现立体效果只需要添加以下两个示例代码可:mapsetMapType(BMAP_PERSPECTIVE_M
开发百度地图目录开发百度地图各个版本介绍简单操作2d3d两种地图2d地图3d地图用途及注意点用途:注意点各个版本介绍JavaScriptAPIv20和v30:采用2D和卫星地图两种混用模式(标准版
做软件工程大作业的时候需要使用到baidu地图的API。这里将调用百度地图API的过程说明一下。其实大部分是参照百度API的实例说明做了。只做了一些小小的改动。因为个人对javascript非常不熟
基于python代码的3D地图可视化,供大家参考,具体内容如下介绍使用Python对地图进行3D可视化。以地图地图,可以在三维空间对轨迹、点进行可视化。库我们使用了多个库:1gdal;主要是用于读
各个版本介绍JavaScriptAPIv20和v30:采用2D和卫星地图两种混用模式(标准版)JavaScriptAPIGLv10:使用WebGL对地图、覆盖物等进行渲染,支持3D视角展示地图Java
十年河东,十年河西,莫欺少年穷学无止境,精益求精先去百度开放平台申请ak。http://lbsyunbaiducom/进来之后按照步骤走,先登录百度账号,然后申请成为开发者,然后申请ak密钥填写完毕后
http://devbaiducom/platform/s10http://lbsyunbaiducom/indexphp?titlejspopular
主要分解为如下步骤:(1)在html文件中引入百度地图,<scripttypetext/javascriptsrchttp://apimapbaiducom/api?v20akyourtoken
我们可以进入百度API的网站学习百度地图API:http://lbsyunbaiducom/indexphp?titlejspopular,看完这些你应该基本上会掌握了demohtml:<!DO