forked from SuperMap/iClient-JavaScript
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathiPortalQueryMaps.html
More file actions
263 lines (244 loc) · 9.54 KB
/
iPortalQueryMaps.html
File metadata and controls
263 lines (244 loc) · 9.54 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iPortal 地图列表</title>
<script type="text/javascript" include="bootstrap-css,jquery" src="../js/include-web.js"></script>
<script type="text/javascript" src="../../dist/include-openlayers.js"></script>
<style>* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
a {
text-decoration: none
}
ul, li {
list-style: none
}
.gallery-item {
margin-bottom: 30px;
}
.gallery-item-border {
border: 1px solid #dadada;
-webkit-box-shadow: 0px 2px 3px #dcdcdc;
box-shadow: 0px 2px 3px #dcdcdc;
background: white;
}
.thumbnail > img, .thumbnail a > img {
margin-right: auto;
margin-left: auto;
}
.gallery-item-img {
height: 170px !important;
width: 262px !important;
}
.mapDetails {
margin: 0px 0 12px 16px;
height: 21px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px !important;
color: #7c7c7c;
}
.mapUserDetails {
width: 100%;
border-top: 1px solid #E8E8E8;
font-size: 13px;
}
.textEllipsis {
display: inline-block;
padding-left: 10px;
padding-top: 12px;
padding-bottom: 12px;
vertical-align: top;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mapBottomList {
padding-left: 10px;
padding-top: 13px;
padding-bottom: 12px;
vertical-align: top;
float: right;
padding-right: 30px;
border-left: 1px solid #ececec;
}
.ip-toolbar-footer {
text-align: center
}
.pagination > li {
display: inline;
}
.pagination > li > a {
position: relative;
float: left;
padding: 8px 16px;
margin-left: -1px;
line-height: 1.42857143;
color: #737373;
text-decoration: none;
background-color: #fff;
border: 1px solid #ececec;
}
#mapListPaging > .pagination {
margin: 10px 15px;
}
#mapListPaging > .pagination > li > .disable {
pointer-events: none;
background-color: rgba(0, 0, 0, 0.1);
}
#mapListPaging > .pagination > li > .active {
background-color: #0083CB;
color: white;
}
</style>
</head>
<body style=" margin: 0;overflow: auto;background: #F2F2F2;width: 100%;height:100%;position: absolute;top: 0;">
<div class="container" style="margin-bottom: 100px">
<div class="page-header">
<h4>iPortal QueryMaps使用示例</h4>
</div>
<div class="col-md-10">
<div class="row">
<div class="col-md-12">
<!--所有Maps的承载DIV-->
<div class="row" id="mapList">
<!--单个Map数据的可视化承载DIV 添加在此位置中-->
</div>
<!--分页切换列表-->、
<div class="row" id="mapListFooter">
<div class="col-md-12">
<div class="ip-toolbar-footer" id="mapListPaging">
<ul class="pagination">
<li><a href="javascript:void(0)"><i class="glyphicon glyphicon-chevron-left"></i></a>
</li>
<li><a href="javascript:void(0)"><i class="glyphicon glyphicon-chevron-right"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
//iportal的URL地址 或根据情况添加自己的本地iportal地址：http://localhost:8091/iportal
var iPortalUrl = "http://support.supermap.com.cn:8092";
//默认请求的参数
var mapsCurrentPage = 1;//默认请求第一页
var mapsPageSize = 9;//每一页显示9条Map信息
//全局变量，承载请求后，一共有多少页数
var totalPages;
var queryParams = new SuperMap.iPortalMapsQueryParam({
currentPage: mapsCurrentPage,
pageSize: mapsPageSize,
});
//Maps查询初始化工作
var iPoortalMaps = new SuperMap.iPortal(iPortalUrl);
$(document).ready(function () {
//加载完DOM后，开始地图数据查询并添加
iPoortalMaps.load().then(function () {
queryMaps(queryParams);
});
//为分页列表项绑定事件
$('#mapListPaging>.pagination').delegate('.mapListChang', 'click', function (e) {
if (mapsCurrentPage != parseInt(e.currentTarget.text)) {
mapsCurrentPage = parseInt(e.currentTarget.text)
paginationClick(mapsCurrentPage);
}
});
//切换到上一页
$(".glyphicon-chevron-left").parent().click(function () {
mapsCurrentPage--;
paginationClick(mapsCurrentPage);
});
//切换到下一页
$(".glyphicon-chevron-right").parent().click(function () {
mapsCurrentPage++;
paginationClick(mapsCurrentPage);
});
});
// 查询iPortal中的地图
function queryMaps(queryParams) {
iPoortalMaps.queryMaps(queryParams).then(function (mapsData) {
//返回的结果集，需要查看可打开下行代码
// console.log(mapsData);
$("#mapList").children().remove();
//将结果集进行遍历，并添加到HTML中
$.each(mapsData.content, function (i) {
//解析时间戳，可根据需求自行处理
var createTime = new Date(parseInt(mapsData.content[i].createTime)).toLocaleString();
var mapDOM = $("<div class='col-md-4 gallery-item'>" +
"<div class='gallery-item-border'>" +
"<a href='JavaScript:void(0)' target='_blank' class='thumbnail' style='margin-bottom: 10px'>" +
"<img class='gallery-item-img' src='" + mapsData.content[i].thumbnail + "' alt=''>" +
"</a>" +
"<div>" +
"<p class='mapDetails'>" + mapsData.content[i].title + "</p>" +
"<p class='mapDetails'>" + '创建于：' + createTime + "<span class='mapTime'>" + "</span>" + "</p>" +
"<div class='mapUserDetails'>" +
"<div class='textEllipsis'>" +
"<span class='glyphicon glyphicon-user'>" + "</span>" + " " + mapsData.content[i].userName +
"</div>" +
"<div class='mapBottomList'>" +
"<span class='glyphicon glyphicon-eye-open'>" + "</span>" +
"<span style='text-align: center'>" + " " + mapsData.content[i].visitCount + "</span>" +
"</div>" +
"</div>" +
"</div>" +
"</div>" +
"</div>")
$("#mapList").append(mapDOM);
});
//初始化分页列表以及分页数目发生变化时执行一下
if (!totalPages || totalPages !== mapsData.totalPage) {
totalPages = mapsData.totalPage;
initPages(mapsData.totalPage);
}
})
};
// 初始化分页列表UI
function initPages(totalPage) {
for (var i = 0; i < totalPage; i++) {
if (i == (mapsCurrentPage - 1)) {
var mapListPaging = $("<li>" + "<a href='JavaScript:void(0)' class='mapListChang active' >" + (i + 1) + "</a>" + "</li>")
} else {
var mapListPaging = $("<li>" + "<a href='JavaScript:void(0)' class='mapListChang ' >" + (i + 1) + "</a>" + "</li>")
}
mapListPaging.insertBefore($("#mapListPaging>.pagination>li:last-child"))
}
//根据初始页面的设置，判断向前/后 翻页按钮是否需要禁止点击
if (mapsCurrentPage == 1) {
$(".glyphicon-chevron-left").parent().addClass('disable');
} else if (mapsCurrentPage == totalPage) {
$(".glyphicon-chevron-right").parent().addClass('disable');
}
};
//页面的点击事件，触发的function
function paginationClick(mapsCurrentPage) {
if (mapsCurrentPage == 1) {
$(".glyphicon-chevron-left").parent().addClass('disable');
$(".glyphicon-chevron-right").parent().removeClass('disable');
} else if (mapsCurrentPage == totalPages) {
$(".glyphicon-chevron-right").parent().addClass('disable');
$(".glyphicon-chevron-left").parent().removeClass('disable');
} else {
$(".glyphicon-chevron-left").parent().removeClass('disable');
$(".glyphicon-chevron-right").parent().removeClass('disable');
}
queryParams = new SuperMap.iPortalMapsQueryParam({
currentPage: mapsCurrentPage,
pageSize: mapsPageSize,
});
queryMaps(queryParams);
$("#mapListPaging>.pagination>li").eq(mapsCurrentPage).children().addClass('active').parent().siblings().children().removeClass('active');
}
</script>
</body>
</html>