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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy