参考网址: MapVGL (baidu.com)
对地理坐标进行转换的API Web服务API | 百度地图API SDK (baidu.com)
百度地图可视化3D建筑
1. 初始化页面样式和引入需要的JS库
- 需要设置
html、body和容器的宽高为100%。
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_container {
width: 100%;
height: 100%;
}
</style>
<!-- 百度地图基础库 -->
<script type="text/javascript"
src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=**********"></script>
<!-- 公共的文件代码 里面包含 地图初始化 和 实用样式 -->
<script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
<!-- 使用根据城市名称获取城市的坐标 -->
<script src="https://mapv.baidu.com/build/mapv.js"></script>
<!--使用mapcgl的时候需要引入-->
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
2. 初始化地图容器
初始化地图容器使用一个标签，因为这里使用
common.js对地图进行初始化，在该文件中固定了获取容器的id为map_container，所以在初始化容器时需要固定其id为map_container。当然也可以将
common.js文件下载修改后单独引入，自己定义的文件。
<div id="map_container"></div>
3. 初始化地图
/**
* 初始化地图
* @returns {*}
*/
function initMyMap() {
let centerCity = mapv.utilCityCenter.getCenterByCityName('重庆')
return initMap(
{
tilt: 60,
heading: 0,
zoom: 17,
center: [centerCity.lng, centerCity.lat],
style: purpleStyle
}
)
}
4. 准备数据源
准备的数据源是获取的某处的建筑
json数据并对其专门进行解析。如果我们单独需要创建一个
立体多边形,可以参考官方文档中需要哪些数据，按照指定的需求根据获取到的数据进行解析。
var layer = new mapvgl.ShapeLayer({
color: 'rgba(55, 55, 200, 1)',
blend: 'lighter',
style: 'normal',
data: [{
geometry: {
type: 'Polygon',
// 立体多边形需要的三个点坐标数据
coordinates: [
[
[116.392394, 39.910683],
[116.405976, 39.927727],
[116.420996, 39.910351]
]
]
},
properties: {
height: 100, // 多边形高度
}
}]
});
/**
* 准备需要的数据信息
* @returns {Promise<any>}
*/
function initData() {
// 请求某处的城市建筑数据
return fetch('https://www.youbaobao.xyz/datav-res/examples/chongqing.json').then(
res => res.json()
).then(
res => {
// 数据的长度
let len = res.length
let data = []
// 下面的算法是根据请求到的数据进行专门处理的算法 ，在开发中我们需要获取的数据有 一些点的坐标用于构成面 以及高度数据
for (let i = 0; i < len; i++) {
// 获取结果中的每一项数据
let line = res[i]
// 每一个多边形的面数据
let polygon = []
// 转换为 墨卡托数据
let 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]]
)
}
// 将数据设置到我们的data中
data.push(
{
geometry: {
// 设置类型为多边形
type: 'Polygon',
coordinates: [
polygon
]
},
properties: {
// 在获取到的数据中第一个数据代表的是高度
height: line[0] / 2
}
}
)
}
return data
}
)
}
5. 绘制数据源
/**
* 绘制数据源
* @param map
* @param data
*/
function setData(map, data) {
// 创建一个图层管理器
let view = new mapvgl.View({
map
})
// 创建一个需要是多边形立体图层
let shapeLayer = new mapvgl.ShapeLayer(
{
// 这里面有的属性在官方文档中也是没有介绍，但是可以查看一些官方案例就可以知道其他属性
// 建筑图层的颜色
color: 'rgba(194, 147, 75, 0.8)',
// 重叠的时候使用什么样式
// blend: 'lighter',
style: 'windowAnimation', //
opacity: 1,//多边形透明度
riseTime: 1000,// 建筑升起动画
enablePicked: true,// 是否可以进行拾取
selectedIndex: -1, // 选中项
selectedColor: '#ee1111', // 选中的颜色
autoSelect: true, // 根据鼠标位置自动设置选中
onClick: (e) => {
console.log(e) // 打印的是当前选中的多边形对象
}
}
)
// 将图层添加到图层管理其中
view.addLayer(shapeLayer)
// 将数据和图层进行邦信
shapeLayer.setData(data)
}
6. 案例完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>replay-dataV-MapVGL-Shape</title>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_container {
width: 100%;
height: 100%;
}
</style>
<!-- 百度地图基础库 -->
<script type="text/javascript"
src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=*****"></script>
<!-- 公共的文件代码 里面包含 地图初始化 和 实用样式 -->
<script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
<!-- 使用根据城市名称获取城市的坐标 -->
<script src="https://mapv.baidu.com/build/mapv.js"></script>
<!--使用mapcgl的时候需要引入-->
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
</head>
<body>
<div id="map_container"></div>
<!-- 复盘立方体 3D建筑 -->
<script>
let map = initMyMap()
// initData函数返回的是一个Promise对象需要进行处理
initData().then(
data => {
setData(map, data)
}
)
/**
* 初始化地图
* @returns {*}
*/
function initMyMap() {
let centerCity = mapv.utilCityCenter.getCenterByCityName('重庆')
return initMap(
{
tilt: 60,
heading: 0,
zoom: 17,
center: [centerCity.lng, centerCity.lat],
style: purpleStyle
}
)
}
/**
* 准备需要的数据信息
* @returns {Promise<any>}
*/
function initData() {
// 请求某处的城市建筑数据
return fetch('https://www.youbaobao.xyz/datav-res/examples/chongqing.json').then(
res => res.json()
).then(
res => {
// 数据的长度
let len = res.length
let data = []
// 下面的算法是根据请求到的数据进行专门处理的算法 ，在开发中我们需要获取的数据有 一些点的坐标用于构成面 以及高度数据
for (let i = 0; i < len; i++) {
// 获取结果中的每一项数据
let line = res[i]
// 每一个多边形的面数据
let polygon = []
// 转换为 墨卡托数据
let 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]]
)
}
// 将数据设置到我们的data中
data.push(
{
geometry: {
// 设置类型为多边形
type: 'Polygon',
coordinates: [
polygon
]
},
properties: {
// 在获取到的数据中第一个数据代表的是高度
height: line[0] / 2
}
}
)
}
return data
}
)
}
/**
* 绘制数据源
* @param map
* @param data
*/
function setData(map, data) {
// 创建一个图层管理器
let view = new mapvgl.View({
map
})
// 创建一个需要是多边形立体图层
let shapeLayer = new mapvgl.ShapeLayer(
{
// 这里面有的属性在官方文档中也是没有介绍，但是可以查看一些官方案例就可以知道其他属性
// 建筑图层的颜色
color: 'rgba(194, 147, 75, 0.8)',
// 重叠的时候使用什么样式
// blend: 'lighter',
style: 'windowAnimation', //
opacity: 1,//多边形透明度
riseTime: 1000,// 建筑升起动画
enablePicked: true,// 是否可以进行拾取
selectedIndex: -1, // 选中项
selectedColor: '#ee1111', // 选中的颜色
autoSelect: true, // 根据鼠标位置自动设置选中
onClick: (e) => {
console.log(e) // 打印的是当前选中的多边形对象
}
}
)
// 将图层添加到图层管理其中
view.addLayer(shapeLayer)
// 将数据和图层进行邦信
shapeLayer.setData(data)
}
</script>
</body>
</html>
