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

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

这里需要掌握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, map) {const view = new mapvgl.View({ map });const shapeLayer = new mapvgl.ShapeLayer({color: 'blue',opacity: 0.3,style: 'normal'})view.addLayer(shapeLayer);shapeLayer.setData(data);}</script></body>

2. 墨卡托坐标系 - 墨卡托投影

就是把圆球形地图变成一个直角坐标系，这样坐标系每一个点就可以对应到地球上的经纬度坐标，这种坐标就是墨卡托坐标。

这里官方由这样的API来实现：

https://lbsyun.baidu.com/index.php?title=webapi/guide/changeposition

这里我们可以尝试调用一下这个接口（需要你的密钥）根据经纬度获取墨卡托坐标，后续官方案例中使用的就是墨卡托坐标系。

3. 重庆市3D建筑图

这里我们来学习一下官方的一个示例：https://mapv.baidu.com/gl/examples/editor.html#shape.html

首先我们基于这个案例的接口获取并处理一下数据源：

 // 准备数据源function initData() {let data = [];// 直接获取视频教程接口拿到三维数组，每一个数组都是内部面的构成数组// 面构成数组第一个值是高度，后续值都是坐标系(xy顺序)fetch('https://www.youbaobao.xyz/datav-res/examples/chongqing.json').then(res => res.json()).then(res => {// 存放多边形面数据const polygons = [];const len = res.length;for (let i = 0; i < len; i++) {const line = res[i];const polygon = [];// 官方提供的转换墨卡托方式const pt = [line[1] * 512, line[2] * 512];for (let j = 3; j < line.length; j += 2) {// 官方拿到的数据源需要作的处理 - 获取经纬度pt[0] += line[j] / 100 / 2;pt[1] += line[j + 1] / 100 / 2;polygon.push([pt[0], pt[1]]);}polygons.push({geometry: {type: 'Polygon',coordinates: [polygon]},properties: {height: line[0] / 2}})}console.log(polygons)});return data;}

polygons里面有一个三维数组，里面包括墨卡托坐标以及高度，每一个面数据都是这样的结构

最后我们是异步获取data，要基于promise封装下：

<body><div id="map_container"></div><script>const map = initBMap();initData().then(data => {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() {// 直接获取视频教程接口拿到三维数组，每一个数组都是内部面的构成数组// 面构成数组第一个值是高度，后续值都是坐标系(xy顺序)return fetch('https://www.youbaobao.xyz/datav-res/examples/chongqing.json').then(res => res.json()).then(res => {// 存放多边形面数据const polygons = [];const len = res.length;for (let i = 0; i < len; i++) {const line = res[i];const polygon = [];// 官方提供的转换墨卡托方式const pt = [line[1] * 512, line[2] * 512];for (let j = 3; j < line.length; j += 2) {// 官方拿到的数据源需要作的处理 - 获取经纬度pt[0] += line[j] / 100 / 2;pt[1] += line[j + 1] / 100 / 2;polygon.push([pt[0], pt[1]]);}polygons.push({geometry: {type: 'Polygon',coordinates: [polygon]},properties: {height: line[0] / 2}})}console.log(polygons)return polygons;});}// 绘制数据源 function setData(data, map) {const view = new mapvgl.View({ map });const shapeLayer = new mapvgl.ShapeLayer({color: 'rgba(194, 147, 75, 0.8)', // 柱状图颜色style: 'normal'})view.addLayer(shapeLayer);shapeLayer.setData(data);}</script></body>

接着我们看看其他layer的配置参数：

// 绘制数据源 function setData(data, map) {const view = new mapvgl.View({ map });const shapeLayer = new mapvgl.ShapeLayer({color: 'rgba(194, 147, 75, 0.8)', // 柱状图颜色style: 'windowAnimation', // 大楼会有窗户blend: 'lighter', // 汇聚时效果riseTime: '2000', // 楼房会有升起动画2senablePicked: true, // 可以选中shapeselectedColor: 'red',autoSelect: true, //根据鼠标位置选中onClick: (e) => {console.log(e)}})view.addLayer(shapeLayer);shapeLayer.setData(data);}

点击一个建筑后可以获取相关信息，可以帮助我们进行标注等后续操作开发：

百度地图开发入门（6）：3D建筑相关推荐

Android百度地图开发入门教程
Android百度地图开发入门教程 1.平台注册登录 2.创建应用 3.Android studio配置 4.代码编写 5.最终效果(建议真机) 1.平台注册登录登录百度地图开放平台网站注册并登录 ...
百度地图开发入门（1）：案例
将我之前的百度地图入门的一些博文分享一下,这里主要系统讲解地图可视化的开发方式 1. 百度开发者账户申请具体可以参考这里:https://lbsyun.baidu.com/index.php?tit ...
百度地图开发入门（3）：动画
原创不易~看完若对你有所帮助,记得点一个赞哈,这就是对我最大的支持了! 百度地图提供了一些API来提供动画的开发 1. ViewAnimation帧动画开发 <body><div i ...
百度地图开发入门（5）：飞线动画示例
原创不易~看完若对你有所帮助,记得点一个赞哈,这就是对我最大的支持了! 讲解另一种常见应用-飞线动画,主要用于展示数据流向 https://lbsyun.baidu.com/solutions/map ...
IOS开发百度地图API入门到精通－用点生成路线，导航，气泡响应
(转)IOS开发百度地图API入门到精通-用点生成路线,导航,气泡响应 IOS百度地图API开发自定义气泡,点击气泡自动生成路线,以及拖拽 IOS百度地图开发POISearch搜索附近停车场,附近加油 ...
新手入门百度地图开发的（0,0）坐标问题
对于大部分人来讲,由于百度地图资料众多,过度依赖搜索引擎等等原因.新接触百度地图开发工作其实并不容易.今天说说关于坐标(0,0)的问题. 首先仍然介绍坐标系,我们先不管采用的和wgs84还是gcj02 ...
百度地图开发技术方案及解决办法
技术方案及解决办法文章目录技术方案及解决办法总体方案基础框架前端网页后端程序结合搭建方法跨域解决 python处理excel 问题描述解决办法网页结构 vue实例内容引入 ele ...
使用QT嵌入百度地图开发高B格岸基监控软件
文章目录 1.简述 2.百度地图 2.1百度地图准备 2.2 百度地图开发 2.2.1实时绘制轨迹 2.2.2设定航点 3 QT软件开发 3.1使用QWebEngineView显示Html 3.2 M ...
用android studio测量距离,Android studio 百度地图开发（6）Marker绑定事件、计算两点距离...
Android studio 百度地图开发(6)Marker绑定事件.计算两点距离 email:chentravelling@163.com 开发环境:win7 64位,Android Studio, ...
基于Android的百度地图开发
参考资料: android studio获得SHA1的值,然后在百度地图移动版API官网申请key Android Studio怎么查看程序的安全码获取SHA1值? http://www.codese ...

百度地图开发入门（6）：3D建筑

1. 绘制一个面

2. 墨卡托坐标系 - 墨卡托投影

3. 重庆市3D建筑图

百度地图开发入门（6）：3D建筑相关推荐

最新文章

热门文章