【百度地圖可視化（MapVGL）】繪制散點圖

MapV開發(fā)文檔 (baidu.com) 但是在文檔中詳細的操作不是非常詳細。

使用百度地圖中的地圖可視化（MapVGL）繪制散點圖
1. 在head 頭部 導入需要的依賴信息
  <!-- 百度地圖基礎(chǔ)庫 使用自己的 ak 進行配置 -->
    <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. 進行全局樣式的配置
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map_container {
            width: 100%;
            height: 100%;
        }
3. 編寫一個容器用于展示地圖 這里的id名稱 在commo.js文件中已經(jīng)被固定了，這里只能寫為 map_container 
<div id="map_container"></div>
4. 初始化地圖

  1. 這里初始化地圖使用的是 https://mapv.baidu.com/gl/examples/static/common.js庫中的initMap 函數(shù)它初始化完成一個地圖之后會返回一個地圖對象。

  2. 在common.js 中有初始化地圖公共的代碼，但是其將地圖容器的名稱固定的寫為 map_container，這里需要注意。

  3. 可以使用mapv庫中的 mapv.utilCityCenter.getCenterByCityName('城市名稱')根據(jù)城市名稱獲取一個城市的中心點坐標。

  /**
   * 初始化地圖
   * */
  function initMyMap() {
    // 使用工具類獲取城市的中心點坐標
    let centerCity = mapv.utilCityCenter.getCenterByCityName('城市名稱')
    // 使用  /examples/static/common.js 下的 initMap 方法進行地圖的初始化
    let map = initMap(
      {
        tilt: 45,
        heading: 30,
        zoom: 8,
        center: [centerCity.lng, centerCity.lat],
        style: snowStyle
      }
    )

    return map
  }
5. 初始化數(shù)據(jù)
  1. 這里需要初始化數(shù)據(jù)并進行返回 ；使用循環(huán)不斷的向data中設(shè)置一個個的點數(shù)據(jù)。
  /**
   * 初始化數(shù)據(jù)
   */
  function initData() {
    // 保存的是每一個點的數(shù)據(jù)信息 這些點需要進行構(gòu)造
    let data = [];
    // 保存城市信息
    let cities = ['北京', '天津', '上海', '重慶', '石家莊', '太原', '呼和浩特', '哈爾濱', '長春',
      '沈陽', '濟南', '南京', '合肥', '杭州', '南昌', '福州', '鄭州', '武漢', '長沙', '廣州',
      '南寧', '西安', '銀川', '蘭州', '西寧', '烏魯木齊', '成都', '貴陽', '昆明', '拉薩', '海口'];
    // 需要繪制的點的數(shù)量
    let randomCount = 700
    while (randomCount--) {

      // 根據(jù)每一個城市名稱獲取到城市的中心點坐標
      let centerCity = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length, 10)])
      data.push(
        {
          geometry: {
            // 可以設(shè)置類型的有 : Point(點)、 LineString(線)、Polygon(面)  這里設(shè)置的類型是點
            type: 'Point',
            // 設(shè)置當前點的坐標點
            coordinates: [centerCity.lng - 2 + Math.random() * 4, centerCity.lat - 2 + Math.random() * 4]
          },
          // 可以為每一個點配置一些數(shù)據(jù)信息
          properties: {
            sales: Math.random() * 100
          }
        }
      );
    }
    // 對sales大于 50 的data項進行過濾
    data = data.filter(item => item.properties.sales > 50)
    return data;
  }
6. 初始化圖層 、圖層管理器、圖層和數(shù)據(jù)源綁定

  1. 在散點圖中的點需要渲染到一個圖層上面，使用mapvgl.PointLayer創(chuàng)建一個點圖層。

  2. 每一個圖層需要使用圖層管理器進行管理，使用mapvgl.View創(chuàng)建一個圖層管理器并將圖層添加到圖層管理器中。

  3. 在創(chuàng)建完成圖層之后需要將數(shù)據(jù)和圖層進行綁定，這樣每一個數(shù)據(jù)才能被渲染成為每一個點。

  /**
   * 設(shè)置數(shù)據(jù)源
   * @param map
   * @param data
   */
  function setData(map, data) {
    // 創(chuàng)建 intensity 強度對象用于 優(yōu)化每一個點的顯示效果
    let intensity = new mapvgl.Intensity(
      {
        min: 0,
        max: 100,
        minSize: 5,
        maxSize: 30,
        // 加入一個區(qū)分顏色的漸變配置信息
        gradient: {
          0: 'rgb(25, 66, 102, 0.8)',
          0.3: 'rgb(145, 102, 129, 0.8)',
          0.7: 'rgb(210, 131, 137, 0.8)',
          1: 'rgb(248, 177, 149, 0.8)'
        }
      }
    )
    // 創(chuàng)建圖層信息
    let pointLayer = new mapvgl.PointLayer(
      {
        size: function (data) {
          return intensity.getSize(parseInt(data.properties.sales))
        },
        color: function (data) {
          return intensity.getColor(parseInt(data.properties.sales))
        }
      }
    );
    // 根據(jù) map 對象 生成圖層管理器
    let view = new mapvgl.View(
      {
        map
      }
    );
    // 將圖層添加到 view 圖層管理器中
    view.addLayer(pointLayer)
    //為圖層綁定數(shù)據(jù)源
    pointLayer.setData(data)
  }
7. 全部完整的代碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>replay-datav-Mapvgl-point</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>

<!-- 對散點圖的復盤 -->
<script>

  let map = initMyMap()
  let data = initData();
  setData(map, data)

  /**
   * 初始化地圖
   * */
  function initMyMap() {
    // 使用工具類獲取城市的中心點坐標
    let centerCity = mapv.utilCityCenter.getCenterByCityName('云南')
    // 使用  /examples/static/common.js 下的 initMap 方法進行地圖的初始化
    let map = initMap(
      {
        tilt: 45,
        heading: 30,
        zoom: 8,
        center: [centerCity.lng, centerCity.lat],
        style: snowStyle
      }
    )

    return map
  }

  /**
   * 初始化數(shù)據(jù)
   */
  function initData() {
    // 保存的是每一個點的數(shù)據(jù)信息 這些點需要進行構(gòu)造
    let data = [];
    // 保存城市信息
    let cities = ['北京', '天津', '上海', '重慶', '石家莊', '太原', '呼和浩特', '哈爾濱', '長春',
      '沈陽', '濟南', '南京', '合肥', '杭州', '南昌', '福州', '鄭州', '武漢', '長沙', '廣州',
      '南寧', '西安', '銀川', '蘭州', '西寧', '烏魯木齊', '成都', '貴陽', '昆明', '拉薩', '海口'];
    // 需要繪制的點的數(shù)量
    let randomCount = 700
    while (randomCount--) {

      // 根據(jù)每一個城市名稱獲取到城市的中心點坐標
      let centerCity = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length, 10)])
      data.push(
        {
          geometry: {
            // 可以設(shè)置類型的有 : Point(點)、 LineString(線)、Polygon(面)  這里設(shè)置的類型是點
            type: 'Point',
            // 設(shè)置當前點的坐標點
            coordinates: [centerCity.lng - 2 + Math.random() * 4, centerCity.lat - 2 + Math.random() * 4]
          },
          // 可以為每一個點配置一些數(shù)據(jù)信息
          properties: {
            sales: Math.random() * 100
          }
        }
      );
    }
    // 對sales大于 50 的data項進行過濾
    data = data.filter(item => item.properties.sales > 50)
    return data;
  }

  /**
   * 設(shè)置數(shù)據(jù)源
   * @param map
   * @param data
   */
  function setData(map, data) {
    // 創(chuàng)建 intensity 強度對象用于 優(yōu)化每一個點的顯示效果
    let intensity = new mapvgl.Intensity(
      {
        min: 0,
        max: 100,
        minSize: 5,
        maxSize: 30,
        // 加入一個區(qū)分顏色的漸變配置信息
        gradient: {
          0: 'rgb(25, 66, 102, 0.8)',
          0.3: 'rgb(145, 102, 129, 0.8)',
          0.7: 'rgb(210, 131, 137, 0.8)',
          1: 'rgb(248, 177, 149, 0.8)'
        }
      }
    )
    // 創(chuàng)建圖層信息
    let pointLayer = new mapvgl.PointLayer(
      {
        size: function (data) {
          return intensity.getSize(parseInt(data.properties.sales))
        },
        color: function (data) {
          return intensity.getColor(parseInt(data.properties.sales))
        }
      }
    );
    // 根據(jù) map 對象 生成圖層管理器
    let view = new mapvgl.View(
      {
        map
      }
    );
    // 將圖層添加到 view 圖層管理器中
    view.addLayer(pointLayer)
    //為圖層綁定數(shù)據(jù)源
    pointLayer.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)容