Mapv地圖可視化工具庫

Mapv地圖可視化工具庫

源碼： https://github.com/huiyan-fe/mapv

官網地址: http://mapv.baidu.com/

Mapv 是一款基于百度地圖的大數據可視化開源庫，可以用來展示大量的點、線、面的數據，每種數據也有不同的展示類型，如直接打點、熱力圖、網格、聚合等方式展示數據。

更多文檔信息請查看 wiki

示例

訪問更多 示例地址

示例代碼

創建mapv對象

// 第一步創建mapv示例
var mapv = new Mapv({
    map: map  // 百度地圖的map實例
});

創建點數據圖層

// 創建一個圖層
var layer = new Mapv.Layer({
    zIndex: 3, // 圖層的層級
    mapv: mapv, // 對應的mapv
    dataType: 'point', // 數據類型，point:點數據類型,polyline:線數據類型,polygon:面數據類型
    //數據，格式如下
    data: [
        {
            lng: 116.46507, // 經度
            lat: 39.929101, // 緯度
            count: 1 // 當前點的權重值
        },
        {
            lng: 116.43507,
            lat: 39.909101,
            count: 2
        }
    ],
    drawType: 'simple', // 渲染數據方式, simple:普通的打點, [更多查看類參考](https://github.com/huiyan-fe/mapv/wiki/%E7%B1%BB%E5%8F%82%E8%80%83)
    // 渲染數據參數
    drawOptions: {
        fillStyle: "rgba(255, 255, 50, 1)",  // 填充顏色
        strokeStyle: "rgba(50, 50, 255, 0.8)", // 描邊顏色，不傳就不描邊
        lineWidth: 5, // 描邊寬度
        radius: 5, // 半徑大小
        unit: 'px' // 半徑對應的單位，px:默認值，屏幕像素單位,m:米,對應地圖上的大約距離,18級別時候1像素大約代表1米
    }
});

創建線數據圖層

var layer = new Mapv.Layer({
    mapv: mapv,
    dataType: 'polyline',
    data: [
        {
            geo: [
                [116.39507, 39.879101],
                [116.49507, 39.889101],
                [116.46507, 39.929101],
                [116.43507, 39.909101]
            ],
            count: 10
        }
    ],
    drawType: 'simple',
    zIndex: 5,
    animation: true,
    drawOptions: {
        lineWidth: 2,
        strokeStyle: "rgba(0, 0, 255, 1)"
    },
    animationOptions: {
        radius: 10
    }
});

創建面數據圖層

var layer = new Mapv.Layer({
    zIndex: 3,
    mapv: mapv,
    dataType: 'polygon',
    data: [
        {
            geo: [
                [116.39507, 39.879101],
                [116.49507, 39.889101],
                [116.46507, 39.929101],
                [116.43507, 39.909101]
            ],
            count: 10
        }
    ],
    drawType: 'simple',
    drawOptions: {
        lineWidth: 8,
        strokeStyle: "rgba(255, 255, 0, 1)",
        fillStyle: "rgba(255, 0, 0, 0.8)"
    }
});

編輯器

mavp 提供了可視化編輯器，通過編輯器，你可以方便的編輯，分享你的數據