Skip to content

Commit 5c5c378

Browse files
zhurczhurc
committed
对接MapV图层，并增加蜂巢图和大数据量点图层示例
1 parent b5794c0 commit 5c5c378

File tree

12 files changed

+1583
-692
lines changed

12 files changed

+1583
-692
lines changed

‎build/deps.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -235,6 +235,12 @@ var deps = {
235235
'./src/leaflet/overlay/RangeThemeLayer.js',
236236
'./src/leaflet/overlay/RankSymbolThemeLayer.js'
237237
]
238+
},
239+
"MapV": {
240+
"name": "MapV",
241+
"src": [
242+
'./src/leaflet/overlay/MapVLayer.js'
243+
]
238244
}
239245
}
240246
},

‎build/webpack.config.leaflet.js‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,18 @@ module.exports = {
1414
},
1515
externals: {
1616
'echarts': 'echarts',
17-
'leaflet': 'L'
17+
'leaflet': 'L',
18+
'mapv': 'mapv'
1819
},
1920
module: {
20-
rules: [
21-
]
22-
},
21+
loaders: [{
22+
test: /MapVRenderer\.js/,
23+
exclude: /node_modules/,
24+
loader: 'babel-loader',
25+
query: {
26+
presets: ['es2015']
27+
}
28+
}]
29+
}
2330

2431
};

‎dist/iclient9-leaflet.js‎

Lines changed: 1041 additions & 682 deletions
Large diffs are not rendered by default.

‎examples/leaflet/config.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -378,6 +378,18 @@ var exampleConfig = {
378378
]
379379

380380
},
381+
"MapV": {
382+
name: "MapV",
383+
content: [{
384+
name: "蜂巢图",
385+
thumbnail: "l_mapVLayer_honeycomb.png",
386+
fileName: "mapVLayerHoneycomb"
387+
},{
388+
name: "纽约出租车上车点",
389+
thumbnail: "l_mapVLayer_point.png",
390+
fileName: "mapVLayerPoint"
391+
}]
392+
},
381393
"tileVectorLayer": {
382394
name: "矢量瓦片",
383395
content: [
@@ -495,7 +507,6 @@ var exampleConfig = {
495507
}
496508
}
497509
}
498-
499510
};
500511
/**
501512
*key值：为exampleConfig配置的key值或者fileName值

‎examples/leaflet/img/l_mapVLayer_honeycomb.png‎

122 KB
Loading

‎examples/leaflet/img/l_mapVLayer_point.png‎

157 KB
Loading

‎examples/leaflet/mapVLayerHoneycomb.html‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>MapV 蜂巢图</title>
6+
<link rel="stylesheet" href="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.css">
7+
</head>
8+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
9+
<div id="map" style="margin:0 auto;width: 100%;height: 100%;border: 1px solid #dddddd"></div>
10+
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
11+
<script type="text/javascript" src="http://cdn.bootcss.com/leaflet/1.0.3/leaflet-src.js"></script>
12+
<script type="text/javascript" src="http://mapv.baidu.com/build/mapv.js"></script>
13+
<script type="text/javascript" src="../../dist/iclient9-leaflet.js"></script>
14+
<script type="text/javascript">
15+
16+
var mbAttr = 'Imagery © <a href="http://mapbox.com">Mapbox</a>',
17+
token = "pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw",
18+
mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + token;
19+
20+
var map = L.map('map', {
21+
center: [32, 109],
22+
zoom: 4,
23+
});
24+
25+
var baseLayer = L.tileLayer(mbUrl, {id: 'mapbox.dark', attribution: mbAttr}).addTo(map);
26+
baseLayer.once('load', function () {
27+
loadData();
28+
});
29+
30+
function loadData() {
31+
var randomCount = 1000;
32+
33+
var data = [];
34+
35+
var citys = ["北京", "天津", "上海", "重庆", "石家庄", "太原", "呼和浩特", "哈尔滨", "长春", "沈阳", "济南",
36+
"南京", "合肥", "杭州", "南昌", "福州", "郑州", "武汉", "长沙", "广州", "南宁", "西安", "银川", "兰州",
37+
"西宁", "乌鲁木齐", "成都", "贵阳", "昆明", "拉萨", "海口"];
38+
39+
// 构造数据
40+
while (randomCount--) {
41+
var cityCenter = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);
42+
data.push({
43+
geometry: {
44+
type: 'Point',
45+
coordinates: [cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4]
46+
},
47+
count: 30 * Math.random()
48+
});
49+
}
50+
51+
var dataSet = new mapv.DataSet(data);
52+
53+
var options = {
54+
fillStyle: 'rgba(55, 50, 250, 0.8)',
55+
shadowColor: 'rgba(255, 250, 50, 1)',
56+
shadowBlur: 20,
57+
max: 100,
58+
size: 50,
59+
label: {
60+
show: true,
61+
fillStyle: 'white',
62+
},
63+
globalAlpha: 0.5,
64+
gradient: {0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"},
65+
draw: 'honeycomb'
66+
};
67+
68+
//创建MapV图层
69+
L.supermap.mapVLayer(dataSet, options).addTo(map);
70+
}
71+
72+
</script>
73+
74+
</body>
75+
</html>

‎examples/leaflet/mapVLayerPoint.html‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>MapV 出租车上车点</title>
6+
<link rel="stylesheet" href="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.css">
7+
<style type="text/css">
8+
#loading {
9+
position: absolute;
10+
top: 50%;
11+
left: 50%;
12+
z-index: 800;
13+
margin-left: -130px;
14+
text-align: center;
15+
margin-top: -50px;
16+
width: 290px;
17+
padding: 10px;
18+
background: rgba(0, 0, 0, 0.5);
19+
color: whitesmoke;
20+
font-size: 16px;
21+
}
22+
23+
</style>
24+
</head>
25+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
26+
<div id="map" style="margin:0 auto;width: 100%;height: 100%;border: 1px solid #dddddd"></div>
27+
<div id="loading">纽约出租车145万上车点数据加载中...</div>
28+
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
29+
<script type="text/javascript" src="http://cdn.bootcss.com/leaflet/1.0.3/leaflet-src.js"></script>
30+
<script type="text/javascript" src="http://mapv.baidu.com/build/mapv.js"></script>
31+
<script type="text/javascript" src="http://cdn.bootcss.com/dat-gui/0.6.5/dat.gui.js"></script>
32+
<script type="text/javascript" src="../../dist/iclient9-leaflet.js"></script>
33+
<script type="text/javascript">
34+
35+
var mbAttr = '数据来源<a target="_blank" href="http://www.nyc.gov/html/tlc/html/about/trip_record_data.shtml">NYC Taxi</a>|' +
36+
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
37+
token = "pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw",
38+
mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + token;
39+
40+
41+
var map = L.map('map', {
42+
center: [40.66231, -73.99086],
43+
zoom: 11,
44+
});
45+
46+
L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr}).addTo(map);
47+
loadData();
48+
function loadData() {
49+
50+
$.get('../data/nyc-taxi.csv', function (csvstr) {
51+
52+
var options = {
53+
size: 1.5,
54+
context: 'webgl',
55+
fillStyle: 'rgba(238, 68, 68, 0.8)',
56+
draw: 'simple'
57+
};
58+
59+
var dataSet = mapv.csv.getDataSet(csvstr);
60+
dataSet.initGeometry();
61+
62+
var layer = L.supermap.mapVLayer(dataSet, options);
63+
64+
layer.on('loaded', function () {
65+
$('#loading').hide();
66+
initDatGUI(layer, options)
67+
});
68+
layer.addTo(map);
69+
70+
});
71+
72+
//设置菜单
73+
function initDatGUI(layer, options) {
74+
var gui = new dat.GUI();
75+
var configDiv = L.DomUtil.create('div');
76+
configDiv.appendChild(gui.domElement);
77+
gui.add(options, 'size', 0.1, 10).onFinishChange(finished);
78+
gui.addColor(options, 'fillStyle').onChange(finished);
79+
80+
function finished() {
81+
layer.update({
82+
options: options
83+
});
84+
}
85+
86+
var configControl = L.control({position: 'topright'});
87+
configControl.onAdd = function () {
88+
return configDiv;
89+
};
90+
configControl.addTo(map);
91+
}
92+
}
93+
</script>
94+
</body>
95+
</html>

‎package.json‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@
2929
"browserify-istanbul": "^2.0.0",
3030
"commander": "^2.9.0",
3131
"css-loader": "^0.26.1",
32-
"echarts ": "3.5.4",
32+
"echarts": "3.5.4",
33+
"mapv": "2.0.14",
3334
"extract-text-webpack-plugin": "^2.1.0",
3435
"file-loader": "^0.10.0",
3536
"imports-loader": "^0.7.0",
@@ -47,7 +48,10 @@
4748
"shelljs": "^0.7.6",
4849
"style-loader": "^0.13.1",
4950
"watchify": "^3.9.0",
50-
"webpack": "^2.4.1"
51+
"webpack": "^2.4.1",
52+
"babel-core": "^6.24.1",
53+
"babel-loader": "^7.0.0",
54+
"babel-preset-es2015": "^6.24.1"
5155
},
5256
"dependencies": {
5357
"proj4": "2.4.3",

0 commit comments

Comments
 (0)