Skip to content

Commit a84dbad

Browse files
liqian7liqian7
committed
openlayers 新增房价数据echarts可视化范例 review by zhurc
1 parent 4f70180 commit a84dbad

File tree

5 files changed

+197
-11
lines changed

5 files changed

+197
-11
lines changed

‎examples/locales/zh-CN/resources.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1072,10 +1072,10 @@ window.resources = {
10721072
"text_pathAnimation":"路径动画",
10731073
"text_echartsEarthquake_title":"2005到2016年地震发生情况",
10741074
"text_echartsEarthquake_sub_title":"单位：次数",
1075-
"text_quarter_1":"第一季度",
1076-
"text_quarter_2":"第二季度",
1077-
"text_quarter_3":"第三季度",
1078-
"text_quarter_4":"第四季度",
1075+
"text_quarter_1":"一季度",
1076+
"text_quarter_2":"二季度",
1077+
"text_quarter_3":"三季度",
1078+
"text_quarter_4":"四季度",
10791079
"text_mapvLianjia_title":"2018年2月北京房价信息",
10801080
"text_mapvLianjia_tooltip":"价格(每平米)：",
10811081

‎examples/openlayers/config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -628,6 +628,11 @@ var exampleConfig = {
628628
thumbnail: "ol_echartsEarthquake.png",
629629
fileName: "echartsEarthquake"
630630

631+
},{
632+
name: "北京房价信息",
633+
name_en: "Beijing house prices(2018.2)",
634+
thumbnail: "ol_echartsLianjia.png",
635+
fileName: "echartsLianjia"
631636
}
632637
]
633638
},

‎examples/openlayers/echartsEarthquake.html

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
view: new ol.View({
3939
center: [96, 36],
4040
zoom: 5,
41+
minZoom: 5,
4142
projection: 'EPSG:4326'
4243
}),
4344
layers: [new ol.layer.Tile({
@@ -49,13 +50,18 @@
4950
})]
5051
});
5152

53+
5254
var echartslayer = new ol3Echarts(null, {
5355
hideOnMoving: true,
5456
hideOnZooming: true
5557
});
5658
echartslayer.appendTo(map);
57-
59+
60+
echartslayer.showLoading();
5861
$.get('../data/chinaEarthquake.csv', function (csvstr) {
62+
63+
echartslayer.hideLoading();
64+
5965
var result = Papa.parse(csvstr, { skipEmptyLines: true, header: true }).data;
6066

6167
// 热力图数据
@@ -161,8 +167,7 @@
161167
},
162168
grid: {
163169
left: 50,
164-
top: 575,
165-
bottom: 70,
170+
bottom: '10%',
166171
width: '30%',
167172
height: '30%',
168173
textStyle: {
@@ -272,10 +277,10 @@
272277
radius: '30%',
273278
center: ['15%', '25%'],
274279
data: [
275-
{ value: echartsChartData[0] + echartsChartData[1] + echartsChartData[2], name: resources.text_quarter_1 + "(01-03)" },
276-
{ value: echartsChartData[3] + echartsChartData[4] + echartsChartData[5], name: resources.text_quarter_2 + "(04-06)" },
277-
{ value: echartsChartData[6] + echartsChartData[7] + echartsChartData[8], name: resources.text_quarter_3 + "(07-09)" },
278-
{ value: echartsChartData[9] + echartsChartData[10] + echartsChartData[11], name: resources.text_quarter_4 + "(10-12)" }
280+
{ value: echartsChartData[0] + echartsChartData[1] + echartsChartData[2], name: resources.text_quarter_1 },
281+
{ value: echartsChartData[3] + echartsChartData[4] + echartsChartData[5], name: resources.text_quarter_2 },
282+
{ value: echartsChartData[6] + echartsChartData[7] + echartsChartData[8], name: resources.text_quarter_3 },
283+
{ value: echartsChartData[9] + echartsChartData[10] + echartsChartData[11], name: resources.text_quarter_4 }
279284
].sort(function (a, b) {
280285
return a.value - b.value
281286
}),

‎examples/openlayers/echartsLianjia.html

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
7+
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
8+
<script type="text/javascript" include="echarts,ol3-echarts" src="../../dist/include-openlayers.js"></script>
9+
<title data-i18n="resources.title_mapvLianjia"></title>
10+
<style>
11+
body {
12+
margin: 0;
13+
overflow: hidden;
14+
background: #fff;
15+
width: 100%;
16+
height: 100%
17+
}
18+
19+
#map {
20+
position: absolute;
21+
width: 100%;
22+
height: 100%;
23+
border: 1px solid #3473b7;
24+
}
25+
26+
#titleContainer {
27+
position: absolute;
28+
color: white;
29+
left: 0;
30+
top: 30px;
31+
text-align: center;
32+
width: 100%;
33+
}
34+
35+
#titleContainer>#title {
36+
letter-spacing: 0.1em;
37+
}
38+
</style>
39+
</head>
40+
41+
<body>
42+
<div id="map"></div>
43+
<div id="titleContainer">
44+
<h2 id="title" data-i18n="resources.text_mapvLianjia_title"></h2>
45+
</div>
46+
<script type="text/javascript" include="jquery" src="../js/include-web.js"></script>
47+
<script>
48+
49+
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
50+
51+
var url = host + "/iserver/services/map-china400/rest/maps/ChinaDark";
52+
var queryUrl = "https://www.supermapol.com/iserver/services/map_201802beijingfangjia/rest/maps/2018年2月北京房价_链家小区参考价_格网";
53+
54+
var map = new ol.Map({
55+
target: 'map',
56+
controls: ol.control.defaults({ attributionOptions: { collapsed: true } })
57+
.extend([new ol.supermap.control.Logo()]),
58+
view: new ol.View({
59+
center: [12954583.524137927, 4860747.532344677],
60+
zoom: 10,
61+
projection: 'EPSG:3857'
62+
}),
63+
layers: [new ol.layer.Tile({
64+
source: new ol.source.TileSuperMapRest({
65+
url: url
66+
})
67+
})]
68+
});
69+
70+
var echartslayer = new ol3Echarts(null, {
71+
hideOnMoving: true,
72+
hideOnZooming: true
73+
});
74+
echartslayer.appendTo(map);
75+
76+
echartslayer.showLoading();
77+
var sqlParam = new SuperMap.QueryBySQLParameters({
78+
queryParams: {
79+
name: "lj_xq_500gw@BJ_201802LJ",
80+
attributeFilter: "SMID>0",
81+
},
82+
fromIndex: 0,
83+
toIndex: 10000,
84+
maxFeatures: 10000,
85+
});
86+
87+
new ol.supermap.QueryService(queryUrl).queryBySQL(sqlParam, function (data) {
88+
echartslayer.hideLoading();
89+
var features = data.result.recordsets[0].features.features;
90+
91+
var data = [];//由矩形左上角点&权重值&矩形右下角点组成
92+
for (var i = 0; i < features.length; i++) {
93+
var pointLeftTop = features[i].geometry.coordinates[0][0][0];
94+
var pointRightBottom = features[i].geometry.coordinates[0][0][2];
95+
var value = parseFloat((features[i].properties.average_price_1 / 10000).toFixed(2))
96+
data.push(pointLeftTop.concat(value).concat(pointRightBottom));
97+
}
98+
var COLORS = ['#e0dffb', '#8c88ef', '#5954e8', '#221cd2', '#17138d', '#0c0a48', '#030314', 'red'];
99+
var option = {
100+
tooltip: {},
101+
visualMap: {
102+
type: 'piecewise',
103+
inverse: true,
104+
top: 110,
105+
left: 10,
106+
pieces: [{
107+
gt: 0, lte: 2, color: COLORS[0]
108+
}, {
109+
gt: 2, lte: 4, color: COLORS[1]
110+
}, {
111+
gt: 4, lte: 6, color: COLORS[2]
112+
}, {
113+
gt: 6, lte: 8, color: COLORS[3]
114+
}, {
115+
gt: 8, lte: 10, color: COLORS[4]
116+
}, {
117+
gt: 10, lte: 15, color: COLORS[5]
118+
}, {
119+
gt: 15, lte: 20, color: COLORS[8]
120+
}, {
121+
gt: 20, lte: 28, color: COLORS[9]
122+
}],
123+
borderColor: '#ccc',
124+
borderWidth: 2,
125+
backgroundColor: '#eee',
126+
dimension: 2,
127+
inRange: {
128+
color: COLORS,
129+
opacity: 0.7
130+
}
131+
},
132+
133+
series: [{
134+
type: 'custom',
135+
coordinateSystem: "openlayers",
136+
data: data,
137+
renderItem: renderItem,
138+
animation: false,
139+
itemStyle: {
140+
emphasis: {
141+
color: 'pink'
142+
}
143+
},
144+
encode: {
145+
tooltip: 2
146+
}
147+
}]
148+
};
149+
echartslayer.setChartOptions(option);
150+
// 自定义渲染
151+
function renderItem(params, api) {
152+
var pointLeftTop = [api.value(0), api.value(1)];
153+
pointLeftTop = map.getPixelFromCoordinate(pointLeftTop);
154+
155+
var pointRightBottom = [api.value(3), api.value(4)];
156+
pointRightBottom = map.getPixelFromCoordinate(pointRightBottom);
157+
158+
return {
159+
type: 'rect',
160+
shape: {
161+
x: pointLeftTop[0],
162+
y: pointLeftTop[1],
163+
width: pointLeftTop[0] - pointRightBottom[0],
164+
height: pointLeftTop[1] - pointRightBottom[1]
165+
},
166+
style: api.style({
167+
stroke: 'rgba(0,0,0,0.1)'
168+
}),
169+
styleEmphasis: api.styleEmphasis()
170+
};
171+
}
172+
});
173+
</script>
174+
</body>
175+
176+
</html>

‎examples/openlayers/img/ol_echartsLianjia.png

16.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