我的学习笔记——百度地图散点图

一、首先引入 common

common 能够快速构建地图， common 提供了一个 initMap 方法和个性化地图

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

initMap

initMap 提供一个参数 (options)

function initMap(options) {
    options = Object.assign({
        tilt: 60,    // 默认地图倾斜角为60
        heading: 0   // 默认地图旋转角度0
    }, options);
}
经过 Object.assign() 方法对参数进行合并

 

建立实例 map 实例

 var map = new BMapGL.Map('map_container', {
        restrictCenter: false,
        style: {styleJson: options.style || darkStyle }
});

 

common 提供了 snowStyle， darkStyle， purpleStyle， whiteStyle 4种 个性化地图 也能够本身加入其余 styleJson

common主要源码

function initMap(options) {
    options = Object.assign({
        tilt: 60,
        heading: 0
    }, options);
    var map = new BMapGL.Map('map_container', {
        restrictCenter: false,
        style: {styleJson: options.style || darkStyle }
    });
    map.enableKeyboard();   // 启用键盘操做，默认禁用。键盘的上、下、左、右键可连续移动地图。同时按下其中两个键可以使地图进行对角移动。PgUp、PgDn、Home和End键会使地图平移其1/2的大小。+、-键会使地图放大或缩小一级
    map.enableScrollWheelZoom();     // 容许地图可被鼠标滚轮缩放，默认禁用
    map.enableInertialDragging();    // 启用地图惯性拖拽，默认禁用
    map.enableContinuousZoom();      // 开启双击平滑缩放效果
​
    map.setDisplayOptions(options.displayOptions || {
        indoor: false,
        poi: true,
        skyColors: options.skyColors || [
            'rgba(5, 5, 30, 0.01)',
            'rgba(5, 5, 30, 1.0)'
        ]
    });
    if (options.center && options.zoom) {
        map.centerAndZoom(new BMapGL.Point(options.center[0], options.center[1]), options.zoom);
    }
​
    map.setTilt(options.tilt);         // 设置地图倾斜角
    map.setHeading(options.heading);   // 设置地图旋转角度
    return map;
}

 

实例化建立map

var map = initMap({
    tilt: 0,
    center: [121.477091, 31.223825],  // 坐标中心点
    zoom: 10,       //  地图缩放级别 
    style: snowStyle  // styleJson样式
})

 

也能够本身建立map （不引入common.js）

var cityCenter = mapv.utilCityCenter.getCenterByCityName('南京')
var map = new BMapGL.Map("map_container", {
    mapType: BMAP_NORMAL_MAP
});    // 建立Map实例
map.setMapStyleV2({
    // styleId: '',       // 提供一个 styleId
    styleJson: snowStyle  // snowstyle 是 common 中的 styleJson
});
var point = new BMapGL.Point(cityCenter.lng,cityCenter.lat);
map.centerAndZoom(point, 12);  // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
map.setHeading(0);   // 设置地图旋转角度
map.setTilt(0);       // 设置地图的倾斜角度

[ 个性化地图]  http://lbsyun.baidu.com/customv2/editor/e1bdf680d8920662a662658ffd58d6bc 包含 styleId 和 styleJson

二、其次引入 mapv 和 mapvgl

地图能正确加载后

<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>

绘制基本步骤

准备数据源

根据城市名找到对应坐标

var cities = ['上海']
// mapv.utilCityCenter.getCenterByCityName 能够根据城市名找到对应坐标
var cityCenter = mapv.utilCityCenter.getCenterByCityName(cities[0])
console.log(cityCenter)  // {lng: 121.487899, lat: 31.249162}

加入到数据源种

点数据规范 更多规范

var data = []
data.push({
    geometry: {
        type: 'Point',
        coordinates: [cityCenter.lng, cityCenter.lat]
    },
    properties: {
        sales: Math.random() * 100
    }
})

绘制数据源

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: '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)'
    }   // 渐变色设置
})

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. 将 pointLayer 对象加入 View 种

view.addLayer(pointLayer)

5. 将 data 数据与 point 对象绑定

pointLayer.setData(data)

完整代码

var map = initBMap()
var data = initData()
setData(map, data)
​
// 初始化百度地图
function initBMap () {
    var cityCenter = mapv.utilCityCenter.getCenterByCityName('南京')
     return initMap({
        tilt: 0,
        center: [cityCenter.lng, cityCenter.lat],
        zoom: 10,
        style: snowStyle
    })
}
​
// 准备数据源
function initData () {
    var data = []
    var random = 700
    var cities = [
        '北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春',
        '沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州',
        '南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口'
    ]
    while (random--) {
        // 随机获取城市中心点
        var city = cities[parseInt(Math.random() * cities.length)]
        var cityCenter = mapv.utilCityCenter.getCenterByCityName(city)
        // 随机对城市中心点进行偏移
        cityCenter.lng = cityCenter.lng - 2 + Math.random() * 4
        cityCenter.lat = cityCenter.lat - 2 + Math.random() * 4
        data.push({
            geometry: {
                type: 'Point',
                coordinates: [cityCenter.lng, cityCenter.lat]
            },
            properties: {
                sales: Math.random() * 100
            }
        })
    }
    data = data.filter(_ => _.properties.sales > 50)
    return data
}
​
// 绘制数据源
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: '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)'
        }
    })
    // 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. 将 pointLayer 对象加入 View 种
    view.addLayer(pointLayer)
    // 5. 将 data 数据与 point 对象绑定
    pointLayer.setData(data)
}

 

最终效果