Mapv：基于百度地圖的大數據可視化開源庫

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)"
  }
});

項目主頁：http://www.baiduhome.net/lib/view/home/1440993490409