【百度地图可视化（MapVGL）】绘制散点图

MapV开发文档 (baidu.com) 但是在文档中详细的操作不是非常详细。

使用百度地图中的地图可视化（MapVGL）绘制散点图

1. 在head 头部 导入需要的依赖信息

2. 进行全局样式的配置

        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

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

3. 编写一个容器用于展示地图 这里的id名称 在commo.js文件中已经被固定了，这里只能写为 map_container

4. 初始化地图

1. 这里初始化地图使用的是 https://mapv.baidu.com/gl/examples/static/common.js库中的initMap 函数它初始化完成一个地图之后会返回一个地图对象。

2. 在common.js 中有初始化地图公共的代码，但是其将地图容器的名称固定的写为 map_container，这里需要注意。

3. 可以使用mapv库中的 mapv.utilCityCenter.getCenterByCityName('城市名称')根据城市名称获取一个城市的中心点坐标。

  /**
   * 初始化地图
   * */
  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. 初始化数据

1. 这里需要初始化数据并进行返回 ；使用循环不断的向data中设置一个个的点数据。

  /**
   * 初始化数据
   */
  function initData() {
    // 保存的是每一个点的数据信息 这些点需要进行构造
    let data = [];
    // 保存城市信息
    let cities = ['北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春',
      '沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州',
      '南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口'];
    // 需要绘制的点的数量
    let randomCount = 700
    while (randomCount--) {

      // 根据每一个城市名称获取到城市的中心点坐标
      let centerCity = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length, 10)])
      data.push(
        {
          geometry: {
            // 可以设置类型的有 : Point(点)、 LineString(线)、Polygon(面)  这里设置的类型是点
            type: 'Point',
            // 设置当前点的坐标点
            coordinates: [centerCity.lng - 2 + Math.random() * 4, centerCity.lat - 2 + Math.random() * 4]
          },
          // 可以为每一个点配置一些数据信息
          properties: {
            sales: Math.random() * 100
          }
        }
      );
    }
    // 对sales大于 50 的data项进行过滤
    data = data.filter(item => item.properties.sales > 50)
    return data;
  }

6. 初始化图层 、图层管理器、图层和数据源绑定

1. 在散点图中的点需要渲染到一个图层上面，使用mapvgl.PointLayer创建一个点图层。

2. 每一个图层需要使用图层管理器进行管理，使用mapvgl.View创建一个图层管理器并将图层添加到图层管理器中。

3. 在创建完成图层之后需要将数据和图层进行绑定，这样每一个数据才能被渲染成为每一个点。

  /**
   * 设置数据源
   * @param map
   * @param data
   */
  function setData(map, data) {
    // 创建 intensity 强度对象用于 优化每一个点的显示效果
    let intensity = new mapvgl.Intensity(
      {
        min: 0,
        max: 100,
        minSize: 5,
        maxSize: 30,
        // 加入一个区分颜色的渐变配置信息
        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)'
        }
      }
    )
    // 创建图层信息
    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))
        }
      }
    );
    // 根据 map 对象 生成图层管理器
    let view = new mapvgl.View(
      {
        map
      }
    );
    // 将图层添加到 view 图层管理器中
    view.addLayer(pointLayer)
    //为图层绑定数据源
    pointLayer.setData(data)
  }

7. 全部完整的代码