【百度地图可视化（MapVGL）】立方体3D建筑案例

参考网址: MapVGL (baidu.com)
对地理坐标进行转换的API Web服务API | 百度地图API SDK (baidu.com)

百度地图可视化3D建筑

1. 初始化页面样式和引入需要的JS库

1. 需要设置html、body和容器的宽高为 100%。

2. 初始化地图容器

1. 初始化地图容器使用一个标签，因为这里使用 common.js对地图进行初始化，在该文件中固定了获取容器的id为 map_container，所以在初始化容器时需要固定其id为 map_container。

2. 当然也可以将 common.js文件下载修改后单独引入，自己定义的文件。

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. 准备数据源

1. 准备的数据源是获取的某处的建筑 json 数据并对其专门进行解析。

2. 如果我们单独需要创建一个 立体多边形,可以参考官方文档中需要哪些数据，按照指定的需求根据获取到的数据进行解析。

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}
   */
  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. 案例完整代码