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
168 lines (168 loc) · 8.7 KB
/
iPortalQueryMaps.html
File metadata and controls
168 lines (168 loc) · 8.7 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
<!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={
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={
currentPage:mapsCurrentPage,
pageSize:mapsPageSize,
};
queryMaps(queryParams);
$("#mapListPaging>.pagination>li").eq(mapsCurrentPage).children().addClass('active').parent().siblings().children().removeClass('active');
}
</script>
</body>
</html>