原创不易~看完若对你有所帮助，记得点一个赞哈，这就是对我最大的支持了！
这里将会介绍基于百度地图与大数据来实现的立方体图形，这里就需要掌握面的概念：
这里需要掌握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', // 楼房会有升起动画2s
enablePicked: true, // 可以选中shape
selectedColor: 'red',
autoSelect: true, //根据鼠标位置选中
onClick: (e) => {
console.log(e)
}
})
view.addLayer(shapeLayer);
shapeLayer.setData(data);
}
点击一个建筑后可以获取相关信息，可以帮助我们进行标注等后续操作开发：
4343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
