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)
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