百度地图之可视化

这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战

今天我们继续来一起学习百度地图吧，之前都是学的百度地图的基本使用，今天我们来学习百度地图可视化嗷～

<script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>

• 首先我们要引入这个js
  1. 便于我们初始化地图
  2. 方便我们更改地图样式（默认是darkStyle）
  3. 缺陷 把id 固定是map_container

var map = initMap({
    tilt: 0,
    center: [cityCenter.lng, cityCenter.lat],
    zoom: 10,
    style: snowStyle
  })

<script src="https://mapv.baidu.com/build/mapv.js"></script>

接下来引用mapv.baidu.com/build/mapv.…

var cityCenter = mapv.utilCityCenter.getCenterByCityName(citys[0]);

接下来引用mapvgl.min.js

• 生成mapvgl 视图view
• 初始化mapvgl的pointLayer 对象
• 将 pointLayer 对象加入view 中
• 将data 与 pointLayer 进行绑定

var view = new mapvgl.View({map});
var pointLayer = new mapvgl.PointLayer({});
view.addLayer(pointLayer);
pointLayer.setData(data)

这样我们就简简单单的在地图上画了一个点啦～

可以满足简单的需求，如果是显示销售额，显示购买金额这些不能实现，我们还得需要 properties，通过这个对象里面去传递数据，在配置pointLayer 的时候就可以拿到相应的值，然后根据需求做相应的逻辑。

var intensity = new mapvgl.Intensity({
   min: 0,
   max: 100,
   minSize: 5,
   maxSize: 30,
   gradient: {
       0: 'rgba(25,66,102,0.8)',
       0.3: 'rgba(145,102,129,0.8)',
       0.7: 'rgba(210,131,137,0.8)',
       1:'rgba(248,177,149,0.8)'
   }
});

可以通过intensity 去改变大小跟颜色

size: function(data){		    			          
    return intensity.getSize(data.properties.sales)
},
color: function(data){
    return intensity.getColor(data.properties.sales);
}