Skip to content

Commit 7a3ce60

Browse files
yaoxiaoni1yaoxiaoni1
committed
leaflet echarts和mapv图层新增可视化范例 review by zhurc
1 parent 9f39ab9 commit 7a3ce60

File tree

8 files changed

+429
-3
lines changed

8 files changed

+429
-3
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,10 @@
174174

175175
- 修复 `05_findPathService.html` 例子显示错误的问题
176176

177+
- 新增地震数据可视化示例
178+
179+
- 新增链家房价数据可视化示例
180+
177181

178182
### for OpenLayers
179183

‎examples/leaflet/config.js‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -539,12 +539,12 @@ var exampleConfig = {
539539
name_en: "NY taxi car point",
540540
thumbnail: "l_heatmap_nyc.png",
541541
fileName: "12_heatMap_NY"
542-
},{
542+
}, {
543543
name: "随机点(Classic)",
544544
name_en: "random points (Classic)",
545545
thumbnail: "l_heatMapLayer.png",
546546
fileName: "heatMapLayer"
547-
},{
547+
}, {
548548
name: "2000年到2015年地震热力图(Classic)",
549549
name_en: "Earthquake heat map (2000-2015)",
550550
thumbnail: "l_earthquakeHeatMap.png",
@@ -672,6 +672,12 @@ var exampleConfig = {
672672
name_en: "binning on Map",
673673
thumbnail: "l_echartsCellMap.png",
674674
fileName: "echartsCellMap"
675+
},
676+
{
677+
name: "2008到20017年地震情况统计",
678+
name_en: "2008 to 20017 years of earthquake statistics",
679+
thumbnail: "l_echartsEarthquake.png",
680+
fileName: "echartsEarthquake"
675681
}
676682
]
677683

@@ -729,6 +735,11 @@ var exampleConfig = {
729735
name_en: "village of beijing",
730736
thumbnail: "l_mapvLayer_polygonBuildings.png",
731737
fileName: "mapVLayerPolygonBuildings"
738+
}, {
739+
name: "2018年2月北京房价",
740+
name_en: "Beijing house prices of Lianjia(2018.2)",
741+
thumbnail: "l_mapvLianjia.png",
742+
fileName: "mapvLianjiaData"
732743
}]
733744
},
734745
"D3": {

‎examples/leaflet/echartsEarthquake.html‎

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title data-i18n="resiurces.title_l_echartsEarthquake1"></title>
6+
<script type="text/javascript" include="papaparse,jquery" src="../js/include-web.js"></script>
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%"></div>
10+
<script type="text/javascript" include="echarts" src="../../dist/include-leaflet.js"></script>
11+
<script type="text/javascript">
12+
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
13+
var map, url = host + "/iserver/services/map-china400/rest/maps/ChinaDark";
14+
map = L.map('map', {
15+
center: [32.67, 109.06],
16+
maxZoom: 18,
17+
minZoom:3,
18+
zoom: 4
19+
});
20+
var heatMapLayer;
21+
L.supermap.tiledMapLayer(url).addTo(map);
22+
addFeature();
23+
24+
function addFeature() {
25+
$.get("../data/chinaEarthquake.csv", function (response) {
26+
var dataObj = Papa.parse(response, {skipEmptyLines: true, header: true});
27+
var data = dataObj.data;
28+
//热力图点
29+
var heatMapPoints = {};
30+
//柱状图的点
31+
var barPoints = {};
32+
for (var i = 0; i < data.length; i++) {
33+
var date = new Date(data[i].date);
34+
var month = date.getMonth() + 1;
35+
var year = date.getFullYear();
36+
var point = [parseFloat(data[i].X), parseFloat(data[i].Y), parseFloat(data[i].level)];
37+
if (year > 2007 && year < 2018) {
38+
39+
//构造热力图数据
40+
if (!heatMapPoints[year]) {
41+
heatMapPoints[year] = [point];
42+
} else {
43+
heatMapPoints[year].push(point);
44+
}
45+
//构造柱状图数据
46+
barPoints[year] = barPoints[year] ? barPoints[year] : {};
47+
if (!barPoints[year][month]) {
48+
barPoints[year][month] = 1;
49+
} else {
50+
++barPoints[year][month];
51+
}
52+
}
53+
}
54+
var option = {
55+
baseOption: {
56+
animationDurationUpdate: 1000,
57+
animationEasingUpdate: 'quinticInOut',
58+
timeline: {
59+
axisType: 'category',
60+
orient: 'vertical',
61+
autoPlay: true,
62+
inverse: true,
63+
playInterval: 3000,
64+
left: null,
65+
right: 30,
66+
top: 20,
67+
bottom: 40,
68+
width: 55,
69+
height: null,
70+
label: {
71+
normal: {textStyle: {color: '#ddd'}},
72+
emphasis: {textStyle: {color: '#fff'}}
73+
},
74+
symbol: 'none',
75+
lineStyle: {color: '#fff'},
76+
checkpointStyle: {color: '#bbb', borderColor: '#777', borderWidth: 2},
77+
controlStyle: {
78+
showNextBtn: false,
79+
showPrevBtn: false,
80+
normal: {color: '#666', borderColor: '#666'},
81+
emphasis: {color: '#aaa', borderColor: '#aaa'}
82+
},
83+
data: ['2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017']
84+
},
85+
title: {
86+
subtext: resources.text_echartsEarthquake_sub_title,
87+
}
88+
},
89+
//options的设置
90+
options: []
91+
};
92+
for (var key in heatMapPoints) {
93+
var barData = [
94+
barPoints[key][1], barPoints[key][2], barPoints[key][3],
95+
barPoints[key][4], barPoints[key][5], barPoints[key][6], barPoints[key][7],
96+
barPoints[key][8], barPoints[key][9], barPoints[key][10], barPoints[key][11], barPoints[key][12]
97+
];
98+
option.options.push({
99+
//热力图的配置
100+
title: {
101+
text: resources.text_l_echartsEarthquake,
102+
left: 'center',
103+
top: 30,
104+
textStyle: {
105+
color: '#fff'
106+
}
107+
},
108+
visualMap: {
109+
show: false,
110+
min: 0,
111+
max: 5,
112+
seriesIndex: 0,
113+
calculable: true,
114+
inRange: {
115+
color: ['blue', 'green', 'yellow', 'red']
116+
}
117+
},
118+
grid: {
119+
left: 50,
120+
bottom: '10%',
121+
width: '30%',
122+
height: '30%',
123+
textStyle: {
124+
color: "#fff"
125+
},
126+
},
127+
tooltip: {
128+
trigger: "item",
129+
textStyle: {
130+
fontSize: 12
131+
},
132+
formatter: "{b0}:{c0}"
133+
},
134+
//bar的x,y坐标
135+
xAxis: [{
136+
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
137+
axisLabel: {color: '#fff'},
138+
axisLine: {lineStyle: {color: "#fff"}},
139+
name: resources.text_l_echartsEarthquake_x_coordinate
140+
}],
141+
yAxis: [{
142+
type: 'value',
143+
splitLine: {show: false},
144+
axisLabel: {color: '#fff'},
145+
axisLine: {lineStyle: {color: "#fff"}},
146+
name: resources.text_echartsEarthquake_sub_title
147+
}],
148+
series: [
149+
//heatmap
150+
{
151+
type: 'heatmap',
152+
coordinateSystem: "leaflet",
153+
data: heatMapPoints[key],
154+
pointSize: 10,
155+
blurSize: 15
156+
},
157+
//bar
158+
{
159+
type: 'bar',
160+
label: {show: true,
161+
position:'top',
162+
color:'#fff'
163+
},
164+
itemStyle: {
165+
normal: {
166+
color: new echarts.graphic.LinearGradient(
167+
0, 0, 0, 1,
168+
[
169+
{offset: 0, color: 'red'},
170+
{offset: 0.5, color: 'yellow'},
171+
{offset: 1, color: 'red'}
172+
]
173+
),
174+
barBorderRadius: 15
175+
},
176+
emphasis: {
177+
color: new echarts.graphic.LinearGradient(
178+
0, 0, 0, 1,
179+
[
180+
{offset: 0, color: 'red'},
181+
{offset: 0.7, color: 'yellow'},
182+
{offset: 1, color: 'red'}
183+
]
184+
)
185+
}
186+
},
187+
barWidth: 20,
188+
barGap: 5,
189+
data: barData
190+
},
191+
//pie的显示
192+
{
193+
type: 'pie',
194+
radius: ['8%', '20%'],
195+
center: ['10%', '25%'],
196+
data: [
197+
{value: barData[0] + barData[1] + barData[2], name: resources.text_quarter_1},
198+
{value: barData[3] + barData[4] + barData[5], name: resources.text_quarter_2},
199+
{value: barData[6] + barData[7] + barData[8], name: resources.text_quarter_3},
200+
{value: barData[9] + barData[10] + barData[11], name: resources.text_quarter_4},
201+
].sort(function (a, b) { return a.value - b.value; }),
202+
roseType: 'angle',
203+
label: {
204+
normal: {
205+
textStyle: {
206+
color: 'rgba(255, 255, 255, 0.7)'
207+
}
208+
}
209+
},
210+
labelLine: {
211+
normal: {
212+
lineStyle: {
213+
color: 'rgba(255, 255, 255, 0.7)'
214+
},
215+
smooth: 0.2,
216+
length: 10,
217+
length2: 20
218+
}
219+
},
220+
itemStyle: {
221+
normal: {
222+
color: 'orange',
223+
shadowBlur: 200,
224+
shadowColor: 'rgba(0, 0, 0, 0.5)'
225+
}
226+
},
227+
animationType: 'scale',
228+
animationEasing: 'elasticOut',
229+
animationDelay: function (idx) {
230+
return Math.random() * 200;
231+
}
232+
}
233+
]
234+
})
235+
}
236+
heatMapLayer = L.supermap.echartsLayer(option).addTo(map);
237+
});
238+
}
239+
</script>
240+
</body>
241+
</html>

‎examples/leaflet/img/l_echartsEarthquake.png‎

17.2 KB
Loading

‎examples/leaflet/img/l_mapvLianjia.png‎

22.7 KB
Loading

0 commit comments

Comments
 (0)