BaiduMapChart调用说明：

1. BaiduMapChart依赖库：

依赖库：

jquery.min.js, bootstrap.min.js, underscore-min.js, crossfilter.js, d3.min.js, dc.js, queue.js, leaflet.js,

leaflet-heat.js, leaflet-baidu.js, baiduMapAPI-2.0-min.js

百度地图chart下载：BaiduMapChart

2. 创建：

代码示例：

var mapChart = dc.BaiduMapChart("#map");

3. 调用：

代码示例：

mapChart
	.width(900)
	.height(600)
	.dimension(allDim)
	.center([31.207391, 121.608203])
	.maptyppe('bluish')
	.zoom(11);

4. api说明：

函数dimension（）

参数为crossfilter中的dimension变量。

函数center（）

传入数据格式为[纬度，经度]，定义地图中心点的坐标。

函数zoom（）

传入一个数字，作用是调整地图缩放比例。（在leaflet-baidu.js中规定范围为[3,19]）

函数maptype（）

传入数据应该为字符串，规定默认加载地图格式，目前包括：normal，satellite，road，cnormal，light，dark，redalert，googlelite，grassgreen，midnight，pink，darkgreen，bluish，grayscale，hardedge共15种。

不同模式地图展示示例如下：


normal模式	satellite模式	bluish模式

完整代码：

 
xxxxxxxxxx
131
1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <title>BaiduMapChart example</title>
5
  <link rel="stylesheet" href="/static/lib/css//bootstrap.min.css">
6
  <link rel="stylesheet" href="/static/lib/css/keen-dashboards.css">
7
  <link rel="stylesheet" href="/static/lib/css/dc.min.css">
8
  <link rel="stylesheet" href="/static/lib/css/leaflet.css">
9
  <link rel="stylesheet" href="/static/css/custom.css">
10
</head>
11
<body class="application">
12
13
  <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
14
    <div class="container-fluid">
15
      <div class="navbar-header">
16
        <a class="navbar-brand" href="./">BaiduMapChart example</a>
17
      </div>
18
    </div>
19
  </div>
20
21
  <div class="container-fluid">
22
    <div class="row">
23
      <div class="col-sm-6">
24
        <div class="row">
25
          <!-- Time Chart -->
26
          <div class="col-sm-12">
27
            <div class="chart-wrapper">
28
              <div class="chart-title">
29
                Number of Events
30
              </div>
31
              <div class="chart-stage">
32
                <div id="time-chart"></div>
33
              </div>
34
            </div>
35
          </div>
36
        </div>
37
      <!--</div>-->
38
      <!--<div class="col-sm-4">-->
39
        <div class="row">
40
          <!-- Map -->
41
          <div class="col-sm-32">
42
            <div class="chart-wrapper">
43
              <div class="chart-title">
44
                Map
45
              </div>
46
              <div class="chart-stage">
47
                <div id="map" ></div>
48
              </div>
49
            </div>
50
          </div>
51
          <!-- Map -->
52
        </div>
53
      </div>
54
    </div>
55
56
  </div>
57
58
  <hr>
59
  <p class="small text-muted">Built with &#9829; by <a href="https://upcjs.github.io">upcjs.github.io</a></p>
60
61
  <script src="/static/lib/js/jquery.min.js"></script>
62
  <script src="/static/lib/js/bootstrap.min.js"></script>
63
  <script src="/static/lib/js/underscore-min.js"></script>
64
  <script src="/static/lib/js/crossfilter.js"></script>
65
  <script src="/static/lib/js/d3.min.js"></script>
66
  <script src="/static/lib/js/dc.js"></script>
67
  <script src="/static/lib/js/queue.js"></script>
68
  <script src="/static/lib/js/leaflet.js"></script>
69
  <script src="/static/lib/js/leaflet-heat.js"></script>
70
  <script src="/static/lib/js/leaflet-baidu.js"></script>
71
  <script src="/static/lib/js/baiduMapAPI-2.0-min.js"></script>
72
  <script src="/static/upcjs/BaiduMapChart.js" type='text/javascript'></script>
73
<script>
74
 queue()
75
    .defer(d3.json, "./data.json")
76
    .await(makeGraphs);
77
78
function makeGraphs(error, recordsJson) {
79
    var records = recordsJson;
80
    var dateFormat = d3.time.format("%Y-%m-%d %H:%M:%S");
81
82
    records.forEach(function(d) {
83
        d["timestamp"] = dateFormat.parse(d["timestamp"]);
84
        d["timestamp"].setMinutes(0);
85
        d["timestamp"].setSeconds(0);
86
        d["longitude"] = +d["longitude"];
87
        d["latitude"] = +d["latitude"];
88
    });
89
90
    //Create a Crossfilter instance
91
    var ndx = crossfilter(records);
92
93
    //Define Dimensions
94
    var dateDim = ndx.dimension(function(d) { return d["timestamp"]; });
95
    var locationdDim = ndx.dimension(function(d) { return d["location"]; });
96
    var allDim = ndx.dimension(function(d) {return d;});
97
98
    //Group Data
99
    var numRecordsByDate = dateDim.group();
100
101
    //Define values (to be used in charts)
102
    var minDate = dateDim.bottom(1)[0]["timestamp"];
103
    var maxDate = dateDim.top(1)[0]["timestamp"];
104
    //Charts
105
    var timeChart = dc.barChart("#time-chart");
106
    var mapChart = dc.BaiduMapChart("#map");
107
108
    mapChart
109
        .width(900)
110
        .height(600)
111
        .dimension(allDim)
112
        .center([31.207391, 121.608203])
113
        .maptyppe('bluish')
114
        .zoom(11);
115
116
    timeChart
117
        .width(900)
118
        .height(80)
119
        .margins({top: 10, right: 50, bottom: 20, left: 20})
120
        .dimension(dateDim)
121
        .group(numRecordsByDate)
122
        .transitionDuration(500)
123
        .x(d3.time.scale().domain([minDate, maxDate]))
124
        .elasticY(true)
125
        .yAxis().ticks(4);
126
127
    dc.renderAll();
128
};
129
</script>
130
</body>
131
</html>

完整代码示例

致谢：

在地图调用过程中使用到了leaflet插件

调用百度地图还需要百度地图的api

感谢Tiven制作的leaflet百度地图

版权：中国石油大学华东可视分析小组

联系人：李昕邮箱：lix@upc.edu.cn