Skip to content

Commit 1132350

Browse files
yaoxiaoni1yaoxiaoni1
committed
新增leaflet echarts链家格网图可视化范例 review by zhurc
1 parent d15c902 commit 1132350

File tree

8 files changed

+173
-10
lines changed

8 files changed

+173
-10
lines changed

‎examples/leaflet/config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -666,6 +666,11 @@ var exampleConfig = {
666666
name_en: "2008 to 2017 years of earthquake statistics",
667667
thumbnail: "l_echartsEarthquake.png",
668668
fileName: "echartsEarthquake"
669+
}, {
670+
name: "2018年2月北京房价",
671+
name_en: "Beijing house prices of Lianjia(2018.2)",
672+
thumbnail: "l_echartsLianjiaGridLayer.png",
673+
fileName: "echartsGridMapLayer"
669674
}, {
670675
name: "2百万点数据绘制北京道路网络图",
671676
name_en: "Use lines to draw 2 millions Beijing streets",

‎examples/leaflet/echartsGridMapLayer.html

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title data-i18n="resources.title_lianjia"></title>
6+
<script type="text/javascript" src="../js/include-web.js"></script>
7+
<style>
8+
body {
9+
margin: 0;
10+
overflow: hidden;
11+
background: #fff;
12+
width: 100%;
13+
height: 100%;
14+
position: absolute;
15+
top: 0;
16+
}
17+
#map {
18+
margin: 0 auto;
19+
width: 100%;
20+
height: 100%
21+
}
22+
23+
#titleContainer {
24+
width: 100%;
25+
position: absolute;
26+
top: 30px;
27+
color: white;
28+
z-index: 999;
29+
font-size: 20px;
30+
font-weight: bold;
31+
text-align: center;
32+
}
33+
34+
#titleContainer > #title {
35+
letter-spacing: 0.1em;
36+
}
37+
</style>
38+
</head>
39+
<body>
40+
<div id="map"></div>
41+
<div id="titleContainer">
42+
<h2 id="title" data-i18n="resources.text_lianjia_title"></h2>
43+
</div>
44+
<script type="text/javascript" include="echarts" src="../../dist/include-leaflet.js"></script>
45+
<script>
46+
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
47+
var baseurl = host + "/iserver/services/map-china400/rest/maps/ChinaDark";
48+
var dataUrl = "https://www.supermapol.com/iserver/services/map_201802beijingfangjia/rest/maps/2018年2月北京房价_链家小区参考价_格网";
49+
var map = L.map('map', {
50+
center: [39.88076184888246, 116.42898559570312],
51+
zoom: 11,
52+
maxZoom: 18,
53+
minZoom: 6
54+
});
55+
L.supermap.tiledMapLayer(baseurl).addTo(map);
56+
query();
57+
58+
function query() {
59+
var param = new SuperMap.QueryBySQLParameters({
60+
queryParams: {
61+
name: "lj_xq_500gw@BJ_201802LJ",
62+
attributeFilter: "SMID > 0"
63+
},
64+
fromIndex: 0,
65+
toIndex: 10000,
66+
maxFeatures: 10000
67+
});
68+
L.supermap.queryService(dataUrl).queryBySQL(param, function (serviceResult) {
69+
var result = serviceResult.result;
70+
var features = result.recordsets[0].features.features;
71+
//构造数据
72+
var data = [];
73+
for (var i = 0; i < features.length; i++) {
74+
var pointLeftTop = coordsTo4326(features[i].geometry.coordinates[0][0][0]);
75+
var pointRightBottom = coordsTo4326(features[i].geometry.coordinates[0][0][2]);
76+
var value = parseFloat((features[i].properties.average_price_1 / 10000).toFixed(2));
77+
data.push(pointLeftTop.concat(value).concat(pointRightBottom));
78+
}
79+
var COLORS = ['#e0dffb', '#8c88ef', '#5954e8', '#221cd2', '#17138d', '#0c0a48', '#030314', 'red'];
80+
var option = {
81+
tooltip: {},
82+
visualMap: {
83+
type: 'piecewise',
84+
inverse: true,
85+
top: 110,
86+
left: 10,
87+
pieces: [{
88+
gt: 0, lte: 2, color: COLORS[0]
89+
}, {
90+
gt: 2, lte: 4, color: COLORS[1]
91+
}, {
92+
gt: 4, lte: 6, color: COLORS[2]
93+
}, {
94+
gt: 6, lte: 8, color: COLORS[3]
95+
}, {
96+
gt: 8, lte: 10, color: COLORS[4]
97+
}, {
98+
gt: 10, lte: 15, color: COLORS[5]
99+
}, {
100+
gt: 15, lte: 20, color: COLORS[8]
101+
}, {
102+
gt: 20, lte: 28, color: COLORS[9]
103+
}],
104+
borderColor: '#ccc',
105+
borderWidth: 2,
106+
backgroundColor: '#eee',
107+
dimension: 2,
108+
inRange: {
109+
color: COLORS,
110+
opacity: 0.7
111+
}
112+
},
113+
series: [{
114+
type: 'custom',
115+
coordinateSystem: "leaflet",
116+
data: data,
117+
renderItem: renderItem,
118+
animation: false,
119+
itemStyle: {
120+
emphasis: {
121+
color: 'pink'
122+
}
123+
},
124+
encode: {
125+
tooltip: 2
126+
}
127+
}]
128+
};
129+
// 自定义渲染
130+
function renderItem(params, api) {
131+
pointLeftTop =map.latLngToContainerPoint(new L.LatLng(api.value(1),api.value(0)));
132+
133+
pointRightBottom = map.latLngToContainerPoint(new L.LatLng(api.value(4),api.value(3)));
134+
135+
return {
136+
type: 'rect',
137+
shape: {
138+
x: pointLeftTop.x,
139+
y: pointLeftTop.y,
140+
width: pointLeftTop.x - pointRightBottom.x,
141+
height: pointLeftTop.y - pointRightBottom.y
142+
},
143+
style: api.style({
144+
stroke: 'rgba(0,0,0,0.1)'
145+
}),
146+
styleEmphasis: api.styleEmphasis()
147+
};
148+
}
149+
function coordsTo4326(coords) {
150+
var lngLat = L.CRS.EPSG3857.unproject(L.point(coords));
151+
return [lngLat.lng, lngLat.lat];
152+
}
153+
L.supermap.echartsLayer(option).addTo(map);
154+
});
155+
}
156+
</script>
157+
</body>
158+
</html>

‎examples/leaflet/img/l_echartsLianjiaGridLayer.png

19.8 KB
Loading

‎examples/leaflet/mapvLianjiaData.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<meta charset="UTF-8">
5-
<title data-i18n="resources.title_mapvLianjia"></title>
5+
<title data-i18n="resources.title_lianjia"></title>
66
<script type="text/javascript" src="../js/include-web.js"></script>
77
<style>
88
body {
@@ -54,7 +54,7 @@
5454
<body>
5555
<div id="map"></div>
5656
<div id="titleContainer">
57-
<h2 id="title" data-i18n="resources.text_mapvLianjia_title"></h2>
57+
<h2 id="title" data-i18n="resources.text_lianjia_title"></h2>
5858
</div>
5959
<script type="text/javascript" include="mapv" src="../../dist/include-leaflet.js"></script>
6060
<script type="text/javascript">

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -455,7 +455,7 @@ window.resources = {
455455
"title_earthquakeHeatMapLayer": "Earthquake occurrences(2005-2016)(Classic)",
456456
"title_echartsEarthquake": "Earthquake occurrences(2005-2016)",
457457
"title_l_echartsEarthquake": "Earthquake heat map (2000-2015)",
458-
"title_mapvLianjia": "Beijing house prices of Lianjia",
458+
"title_lianjia": "Beijing house prices of Lianjia",
459459
"title_l_echartsEarthquake1": "2008 to 2017 years of earthquake statistics",
460460

461461

@@ -1079,7 +1079,7 @@ window.resources = {
10791079
"text_quarter_2": "Quarter 2",
10801080
"text_quarter_3": "Quarter 3",
10811081
"text_quarter_4": "Quarter 4",
1082-
"text_mapvLianjia_title": "Beijing house prices of Lianjia(2018.2)",
1082+
"text_lianjia_title": "Beijing house prices of Lianjia(2018.2)",
10831083
"text_mapvLianjia_tooltip": "Price(m²)：",
10841084
"text_l_echartsEarthquake": "The heatmap of earthquake data from 2008 to 2017",
10851085
"text_l_echartsEarthquake_x_coordinate": "month",

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -455,7 +455,7 @@ window.resources = {
455455
"title_earthquakeHeatMapLayer": "2005-2016地震次数(Classic)",
456456
"title_echartsEarthquake": "2005到2016年地震发生情况",
457457
"title_l_echartsEarthquake": "2000年到2015年地震热力图",
458-
"title_mapvLianjia": "链家北京房价信息",
458+
"title_lianjia": "链家北京房价信息",
459459
"title_mapvLianjia_Beijing_price": "2018年2月北京房价",
460460
"title_l_echartsEarthquake1": "2008到2017年地震情况统计",
461461

@@ -1080,7 +1080,7 @@ window.resources = {
10801080
"text_quarter_2": "二季度",
10811081
"text_quarter_3": "三季度",
10821082
"text_quarter_4": "四季度",
1083-
"text_mapvLianjia_title": "2018年2月北京房价信息",
1083+
"text_lianjia_title": "2018年2月北京房价信息",
10841084
"text_mapvLianjia_tooltip": "价格(每平米)：",
10851085
"text_l_echartsEarthquake": "2008年到2017年地震数据热力图",
10861086
"text_l_echartsEarthquake_x_coordinate": "月份",

‎examples/openlayers/echartsLianjia.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
77
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
88
<script type="text/javascript" include="echarts,ol3-echarts" src="../../dist/include-openlayers.js"></script>
9-
<title data-i18n="resources.title_mapvLianjia"></title>
9+
<title data-i18n="resources.title_lianjia"></title>
1010
<style>
1111
body {
1212
margin: 0;
@@ -41,7 +41,7 @@
4141
<body>
4242
<div id="map"></div>
4343
<div id="titleContainer">
44-
<h2 id="title" data-i18n="resources.text_mapvLianjia_title"></h2>
44+
<h2 id="title" data-i18n="resources.text_lianjia_title"></h2>
4545
</div>
4646
<script type="text/javascript" include="jquery" src="../js/include-web.js"></script>
4747
<script>

‎examples/openlayers/mapvLianjia.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
66
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
77
<script type="text/javascript" include="mapv" src="../../dist/include-openlayers.js"></script>
8-
<title data-i18n="resources.title_mapvLianjia"></title>
8+
<title data-i18n="resources.title_lianjia"></title>
99
<style>
1010
body {
1111
margin: 0;
@@ -56,7 +56,7 @@
5656
<body>
5757
<div id="map"></div>
5858
<div id="titleContainer">
59-
<h2 id="title" data-i18n="resources.text_mapvLianjia_title"></h2>
59+
<h2 id="title" data-i18n="resources.text_lianjia_title"></h2>
6060
</div>
6161
<div id="popupContainer">
6262
<table>

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