我的學習筆記——百度地圖散點圖

一、首先引入 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)
}

 

最終效果