百度地图可视化之实现散点图

    此文章最终实现的效果如下图：

使用mapv和mapvgl两个框架来实现百度地图的可视化。

     Mapv 是一款地理信息可视化开源库，可以用来展示大量地理信息数据，点、线、面的数据，每种数据也有不同的展示类型，如直接打点、热力图、网格、聚合等方式展示数据。 

     MapVGL，是一款基于WebGL的地理信息可视化库，可以用来展示大量基于3D的地理信息点线面数据。设计初衷主要是为了解决大数据量的三维地理数据展示问题及一些炫酷的三维效果

 实现步骤

1. 导入js库

<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>
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>

        其中，common.js为实现初始化百度地图的一个方法，可以很方便的使用。

2. 编写容器组件及实现地图初始化

    <div id="map_container"></div>

        common.js方法中使用map_container为id来创建地图，因此使用common.js来初始化地图时，容器组件id需要与之统一。

 function initMyMap() {
    var cityCenter = mapv.utilCityCenter.getCenterByCityName('南京')
    //initMap 为common.js中初始化地图方法
    var map = initMap({
       center: [cityCenter.lng, cityCenter.lat],
       zoom: 10,
       tilt: 0,
       style: snowStyle
    })
    return map
 }

3. 初始化数据源

  利用城市中心点的经纬度来模拟数据，实际使用中可以通过接口返回数据。使用mapv中的工具类utilCityCenter的方法来得到城市名对应的经纬度数据。

function initData() {
    var data = []
    var cities = ['北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春',
        '沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州',
        '南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口'
    ]
    var random = 700
    while (random--) {
        var cityCenter = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length)])
        data.push({
            //geometry字段来定义坐标信息
            geometry: {
                type: 'Point',
                coordinates: [cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4] //配置随机数，为了让点能分散
            },
            // 添加其他相关的数据,properties来携带一些和该坐标绑定的属性
            properties: {
                sales: Math.random() * 100
            }
        })
    }
    //筛选需要显示的数据
    return data.filter(_ => _.properties.sales > 50)
}

4.  绘制数据源方法一（使用mapvgl绘制）

        4.1 初始化mapvgl.View图层管理器

var view = new mapvgl.View({
    map
});

        4.2 初始化 Intensity对象

        mapval.Intensity 是一个工具类，可以使得点随数据的大小而有所差异，更直观的反应变化，可以控制散点大小和颜色。

var 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)'
    }
})

         4.3 初始化 mapvgl.PointLayer 图层

var pointLayer = new mapvgl.PointLayer({
    size: function(data) {
        return intensity.getSize(data.properties.sales)
    },
    color: function(data) {
        return intensity.getColor(data.properties.sales)
    }
})

         4.4 调用view.addLayer添加图层到图层管理器

 view.addLayer(pointLayer)

        4.5 调用 mapvgl.PointLayer.setData 关联图层和数据

pointLayer.setData(data)

        4.6 绘制数据源整合代码

function setData(map, data) {
    //1. 生成mapvgl 视图 View
    var view = new mapvgl.View({
        map
    });
    //2. 初始化 Intensity对象
    var 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)'
            }
        })
        //3. 初始化 mapvgl 的Point对象
    var pointLayer = new mapvgl.PointLayer({
            size: function(data) {
                return intensity.getSize(data.properties.sales)
            },
            color: function(data) {
                return intensity.getColor(data.properties.sales)
            }
        })
        //4. 将Point对象加入到View中
    view.addLayer(pointLayer)
        //5. 将data与Point进行绑定
    pointLayer.setData(data)
}

5.  绘制数据源方法二（使用mapv绘制）
mapv的相关API详情可查阅https://github.com/huiyan-fe/mapv/blob/master/API.md

function setData(map, data) {
    var dataSet = new mapv.DataSet(data);

    var options = {
        fillStyle: 'rgba(255, 50, 50, 0.6)',
        shadowColor: 'rgba(255, 50, 50, 1)',
        shadowBlur: 30,
        globalCompositeOperation: 'lighter',
        methods: {
            click: function(item) {
                console.log(item);
            }
        },
        size: 5,
        // updateImmediate: true,
        draw: 'simple'
    }

    var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);
    // dataSet.set(data); // 修改数据

    // mapvLayer.show(); // 显示图层
    // mapvLayer.hide(); // 删除图层
}

6.  函数的调用

var map = initMyMap()
const data = initData()
setData(map, data)

        之后在浏览器中打开界面即可显示出相关的散点图。