百度地图开发入门(6):3D建筑

本文介绍了如何结合百度地图API和大数据来实现3D城市建筑的绘制。通过理解面的概念和墨卡托坐标系,利用shapeLayer创建多边形,并通过实例展示了如何从数据源获取和处理重庆的3D建筑数据,最终实现动态的3D地图效果。此外,还探讨了layer的配置参数,如颜色、动画和交互功能,为地图应用的标注和开发提供了基础。

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

原创不易~看完若对你有所帮助,记得点一个赞哈,这就是对我最大的支持了!

这里将会介绍基于百度地图与大数据来实现的立方体图形,这里就需要掌握面的概念:

这里需要掌握shapeLayer:https://lbsyun.baidu.com/solutions/mapvdata,他可以提供一系列坐标点来形成一个面,最后多个面可以形成一个多边形。

1. 绘制一个面

<body>

    <div id="map_container"></div>

    <script>

        const map = initBMap();

        const data = initData();

        setData(data, map);



        // 初始化百度地图

        function initBMap() {
     

            // 引入的common库所作的处理

            // mapv提供了api,根据名称获取坐标

            const cityCenter = mapv.utilCityCenter.getCenterByCityName('北京');

            const map = initMap({
     

                center: [cityCenter.lng, cityCenter.lat],

                zoom: 17,

                tilt: 80,

                heading: -45.3

            })

            return map;



        }





        // 准备数据源

        function initData() {
     

            let data = [{
     

                geometry: {
     

                    type: 'Polygon',

                    // type切换为polygon - 多边形

                    // 坐标是一个三维数组

                    coordinates: [

                        [

                            // 第一种坐标定位,传入经纬度

                            [116.392394, 39.910683],

                            [116.405976, 39.927727],

                            [116.420996, 39.910351]

                        ]

                    ]

                },

                // height表示多边形高度,必要

                properties: {
     

                    height: 100, // 多边形高度

                }

            }];



            return data;

        }





        // 绘制数据源 

        function setData(data
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值