Skip to content

Commit c93992e

Browse files
liqian7liqian7
committed
openlayers 新增链家房价数据可视化示例 review by zhurc
1 parent 5bbf6ce commit c93992e

File tree

6 files changed

+178
-1
lines changed

6 files changed

+178
-1
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -180,6 +180,8 @@
180180

181181
- 新增地震数据可视化示例
182182

183+
- 新增链家房价数据可视化示例
184+
183185
### for MapboxGL
184186

185187
- 新增几何要素批量空间分析示例

‎examples/locales/en-US/resources.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -454,6 +454,7 @@ window.resources = {
454454
"title_earthquakeHeatMapLayer":"Earthquake occurrences(2005-2016)(Classic)",
455455
"title_echartsEarthquake":"Earthquake occurrences(2005-2016)",
456456
"title_l_echartsEarthquake":"Earthquake heat map (2000-2015)",
457+
"title_mapvLianjia":"Beijing house prices of Lianjia",
457458

458459
"text_code": "Forward Match",
459460
"text_decode": "Reverse Match",
@@ -1075,6 +1076,8 @@ window.resources = {
10751076
"text_quarter_2":"Quarter 2",
10761077
"text_quarter_3":"Quarter 3",
10771078
"text_quarter_4":"Quarter 4",
1079+
"text_mapvLianjia_title":"Beijing house prices of Lianjia(2018.2)",
1080+
"text_mapvLianjia_tooltip":"Price(m²)：",
10781081

10791082
"btn_overlayAnalyst": "Start analysis",
10801083
"btn_terrainCurvatureCalculation": "Start calculation",

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -454,6 +454,7 @@ window.resources = {
454454
"title_earthquakeHeatMapLayer":"2005-2016地震次数(Classic)",
455455
"title_echartsEarthquake":"2005到2016年地震发生情况",
456456
"title_l_echartsEarthquake":"2000年到2015年地震热力图",
457+
"title_mapvLianjia":"链家北京房价信息",
457458

458459
"text_code": "正向匹配",
459460
"text_decode": "反向匹配",
@@ -1075,7 +1076,9 @@ window.resources = {
10751076
"text_quarter_2":"第二季度",
10761077
"text_quarter_3":"第三季度",
10771078
"text_quarter_4":"第四季度",
1078-
1079+
"text_mapvLianjia_title":"2018年2月北京房价信息",
1080+
"text_mapvLianjia_tooltip":"价格(每平米)：",
1081+
10791082
"btn_overlayAnalyst": "叠加分析",
10801083
"btn_terrainCurvatureCalculation": "地形曲率计算",
10811084
"btn_mathExpression": "栅格代数运算",

‎examples/openlayers/config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -679,6 +679,11 @@ var exampleConfig = {
679679
name_en: "simple line",
680680
thumbnail: "mapvPolylineSimple.png",
681681
fileName: "mapvPolylineSimple"
682+
}, {
683+
name: "北京房价信息",
684+
name_en: "Beijing house prices(2018.2)",
685+
thumbnail: "mapvLianjia.png",
686+
fileName: "mapvLianjia"
682687
}
683688
]
684689
},

‎examples/openlayers/img/mapvLianjia.png‎

23.9 KB
Loading

‎examples/openlayers/mapvLianjia.html‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
6+
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
7+
<script type="text/javascript" include="mapv" src="../../dist/include-openlayers.js"></script>
8+
<title data-i18n="resources.title_mapvLianjia"></title>
9+
<style>
10+
body {
11+
margin: 0;
12+
overflow: hidden;
13+
background: #fff;
14+
width: 100%;
15+
height: 100%;
16+
position: relative;
17+
}
18+
19+
#map {
20+
width: 100%;
21+
height: 100%;
22+
}
23+
24+
#popupContainer {
25+
background: rgba(9, 1, 54, 0.589);
26+
color: red;
27+
display: none;
28+
padding: 15px;
29+
color: white;
30+
font-size: 15px;
31+
font-weight: bolder;
32+
border-radius: 5px;
33+
box-shadow: 0px -1px 46px 0px rgba(0, 0, 0, 0.75);
34+
}
35+
36+
#price {
37+
font-weight: lighter;
38+
padding-right: 5px;
39+
}
40+
41+
#titleContainer {
42+
position: absolute;
43+
color: white;
44+
left: 0;
45+
top: 30px;
46+
text-align: center;
47+
width: 100%;
48+
}
49+
50+
#titleContainer>#title {
51+
letter-spacing: 0.1em;
52+
}
53+
</style>
54+
</head>
55+
56+
<body>
57+
<div id="map"></div>
58+
<div id="titleContainer">
59+
<h2 id="title" data-i18n="resources.text_mapvLianjia_title"></h2>
60+
</div>
61+
<div id="popupContainer">
62+
<table>
63+
<tr>
64+
<td data-i18n="resources.text_mapvLianjia_tooltip"></td>
65+
<td id="price"></td>
66+
</tr>
67+
</table>
68+
</div>
69+
<script type="text/javascript" include="jquery" src="../js/include-web.js"></script>
70+
<script type="text/javascript">
71+
// map
72+
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
73+
74+
var url = host + "/iserver/services/map-china400/rest/maps/ChinaDark";
75+
var queryUrl = "https://www.supermapol.com/iserver/services/map_201802beijingfangjia/rest/maps/2018年2月北京房价_链家小区参考价_蜂巢";
76+
77+
var map = new ol.Map({
78+
target: 'map',
79+
controls: ol.control.defaults({ attributionOptions: { collapsed: true } })
80+
.extend([new ol.supermap.control.Logo()]),
81+
view: new ol.View({
82+
center: [12956083.664865, 4872418.298275658],
83+
zoom: 10,
84+
projection: 'EPSG:3857'
85+
}),
86+
layers: [new ol.layer.Tile({
87+
source: new ol.source.TileSuperMapRest({
88+
url: url
89+
})
90+
})]
91+
});
92+
93+
// popup
94+
var popupContainer = document.getElementById('popupContainer');
95+
var popup = new ol.Overlay({
96+
element: document.getElementById('popupContainer'),
97+
offset: [15, -50]
98+
});
99+
map.addOverlay(popup);
100+
101+
var sqlParam = new SuperMap.QueryBySQLParameters({
102+
queryParams: {
103+
name: "lj_xq_500fc@BJ_201802LJ",
104+
attributeFilter: "SMID>0",
105+
},
106+
fromIndex: 0,
107+
toIndex: 10000,
108+
maxFeatures: 10000,
109+
});
110+
111+
new ol.supermap.QueryService(queryUrl).queryBySQL(sqlParam, function (data) {
112+
var features = data.result.recordsets[0].features.features;
113+
114+
//构造mapv数据
115+
var data = [], arr = [];
116+
for (var i = 0; i < features.length; i++) {
117+
118+
var feature = features[i];
119+
var average_price = feature.properties.average_price_1;
120+
121+
data.push({
122+
geometry: {
123+
type: 'Polygon',
124+
coordinates: feature.geometry.coordinates[0]
125+
},
126+
count: Math.floor(average_price / 10000),
127+
price: parseFloat(average_price).toFixed(2),
128+
});
129+
130+
};
131+
132+
var dataSet = new mapv.DataSet(data.concat());
133+
var mapvOptions = {
134+
max: 27,
135+
gradient: { // 显示的颜色渐变范围
136+
'0': 'rgba(0,0,255,0.7)',
137+
'0.6': 'rgba(255,0,0,0.7)'
138+
},
139+
draw: 'intensity',
140+
methods: {
141+
click: function (item) {
142+
if (item != null) {
143+
$("#price").text("￥" + item.price);
144+
popupContainer.style.display = "block";
145+
popup.setPosition(item.geometry.coordinates[0][0]);
146+
} else {
147+
popup.setPosition();
148+
};
149+
}
150+
}
151+
};
152+
153+
var options = {
154+
map: map, dataSet: dataSet, mapvOptions: mapvOptions
155+
};
156+
157+
map.addLayer(new ol.layer.Image({
158+
source: new ol.source.Mapv(options)
159+
}));
160+
});
161+
</script>
162+
</body>
163+
164+
</html>

0 commit comments

Comments
 (0)