【百度地圖可視化（MapVGL）】立方體3D建筑案例

參考網(wǎng)址: MapVGL (baidu.com)
對地理坐標進行轉(zhuǎn)換的API Web服務(wù)API | 百度地圖API SDK (baidu.com)

百度地圖可視化3D建筑
1. 初始化頁面樣式和引入需要的JS庫
  1. 需要設(shè)置html、body和容器的寬高為 100%。
<style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map_container {
            width: 100%;
            height: 100%;
        }

    </style>

    <!-- 百度地圖基礎(chǔ)庫 -->
    <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>
    <!-- 使用根據(jù)城市名稱獲取城市的坐標 -->
    <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. 初始化地圖容器

  1. 初始化地圖容器使用一個標簽，因為這里使用 common.js對地圖進行初始化，在該文件中固定了獲取容器的id為 map_container，所以在初始化容器時需要固定其id為 map_container。

  2. 當然也可以將 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. 準備數(shù)據(jù)源

  1. 準備的數(shù)據(jù)源是獲取的某處的建筑 json 數(shù)據(jù)并對其專門進行解析。

  2. 如果我們單獨需要創(chuàng)建一個 立體多邊形,可以參考官方文檔中需要哪些數(shù)據(jù)，按照指定的需求根據(jù)獲取到的數(shù)據(jù)進行解析。

var layer = new mapvgl.ShapeLayer({
    color: 'rgba(55, 55, 200, 1)',
    blend: 'lighter',
    style: 'normal',
    data: [{
        geometry: {
            type: 'Polygon',
          // 立體多邊形需要的三個點坐標數(shù)據(jù)
            coordinates: [
                [
                    [116.392394, 39.910683],
                    [116.405976, 39.927727],
                    [116.420996, 39.910351]
                ]
            ]
        },
        properties: {
            height: 100, // 多邊形高度
        }
    }]
});

/**
   * 準備需要的數(shù)據(jù)信息
   * @returns {Promise<any>}
   */
  function initData() {
    // 請求某處的城市建筑數(shù)據(jù)
    return fetch('https://www.youbaobao.xyz/datav-res/examples/chongqing.json').then(
      res => res.json()
    ).then(
      res => {
        // 數(shù)據(jù)的長度
        let len = res.length
        let data = []
        // 下面的算法是根據(jù)請求到的數(shù)據(jù)進行專門處理的算法 ，在開發(fā)中我們需要獲取的數(shù)據(jù)有 一些點的坐標用于構(gòu)成面 以及高度數(shù)據(jù)
        for (let i = 0; i < len; i++) {
          // 獲取結(jié)果中的每一項數(shù)據(jù)
          let line = res[i]
          // 每一個多邊形的面數(shù)據(jù)
          let polygon = []
          // 轉(zhuǎn)換為 墨卡托數(shù)據(jù)
          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(
              // 這是一個三維數(shù)組
              [pt[0], pt[1]]
            )
          }

          // 將數(shù)據(jù)設(shè)置到我們的data中
          data.push(
            {
              geometry: {
                // 設(shè)置類型為多邊形
                type: 'Polygon',
                coordinates: [
                  polygon
                ]
              },
              properties: {
                // 在獲取到的數(shù)據(jù)中第一個數(shù)據(jù)代表的是高度
                height: line[0] / 2
              }
            }
          )
        }
        return data
      }
    )
  }
5. 繪制數(shù)據(jù)源
  /**
   * 繪制數(shù)據(jù)源
   * @param map
   * @param data
   */
  function setData(map, data) {
    // 創(chuàng)建一個圖層管理器
    let view = new mapvgl.View({
      map
    })

    // 創(chuàng)建一個需要是多邊形立體圖層
    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, // 根據(jù)鼠標位置自動設(shè)置選中
        onClick: (e) => {
          console.log(e) // 打印的是當前選中的多邊形對象
        }
      }
    )

    // 將圖層添加到圖層管理其中
    view.addLayer(shapeLayer)
    // 將數(shù)據(jù)和圖層進行邦信
    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>

    <!-- 百度地圖基礎(chǔ)庫 -->
    <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>
    <!-- 使用根據(jù)城市名稱獲取城市的坐標 -->
    <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>

<!-- 復(fù)盤立方體 3D建筑 -->
<script>

  let map = initMyMap()
  // initData函數(shù)返回的是一個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
      }
    )
  }


  /**
   * 準備需要的數(shù)據(jù)信息
   * @returns {Promise<any>}
   */
  function initData() {
    // 請求某處的城市建筑數(shù)據(jù)
    return fetch('https://www.youbaobao.xyz/datav-res/examples/chongqing.json').then(
      res => res.json()
    ).then(
      res => {
        // 數(shù)據(jù)的長度
        let len = res.length
        let data = []
        // 下面的算法是根據(jù)請求到的數(shù)據(jù)進行專門處理的算法 ，在開發(fā)中我們需要獲取的數(shù)據(jù)有 一些點的坐標用于構(gòu)成面 以及高度數(shù)據(jù)
        for (let i = 0; i < len; i++) {
          // 獲取結(jié)果中的每一項數(shù)據(jù)
          let line = res[i]
          // 每一個多邊形的面數(shù)據(jù)
          let polygon = []
          // 轉(zhuǎn)換為 墨卡托數(shù)據(jù)
          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(
              // 這是一個三維數(shù)組
              [pt[0], pt[1]]
            )
          }

          // 將數(shù)據(jù)設(shè)置到我們的data中
          data.push(
            {
              geometry: {
                // 設(shè)置類型為多邊形
                type: 'Polygon',
                coordinates: [
                  polygon
                ]
              },
              properties: {
                // 在獲取到的數(shù)據(jù)中第一個數(shù)據(jù)代表的是高度
                height: line[0] / 2
              }
            }
          )
        }
        return data
      }
    )
  }

  /**
   * 繪制數(shù)據(jù)源
   * @param map
   * @param data
   */
  function setData(map, data) {
    // 創(chuàng)建一個圖層管理器
    let view = new mapvgl.View({
      map
    })

    // 創(chuàng)建一個需要是多邊形立體圖層
    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, // 根據(jù)鼠標位置自動設(shè)置選中
        onClick: (e) => {
          console.log(e) // 打印的是當前選中的多邊形對象
        }
      }
    )

    // 將圖層添加到圖層管理其中
    view.addLayer(shapeLayer)
    // 將數(shù)據(jù)和圖層進行邦信
    shapeLayer.setData(data)
  }

</script>

</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容