Skip to content

Commit 16e9ca8

Browse files
huangqhhuangqh
committed
openlayers示例增加查询portal地图列表的示例程序。
1 parent 0c1972f commit 16e9ca8

File tree

3 files changed

+179
-0
lines changed

3 files changed

+179
-0
lines changed

‎examples/openlayers/config.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -271,6 +271,14 @@ var exampleConfig = {
271271
thumbnail: "ol_iPortalWebMap.png",
272272
fileName: "iportalWebMap"
273273
}]
274+
},
275+
"ip_querymaps": {
276+
name: "地图列表",
277+
content: [{
278+
name: "地图列表",
279+
thumbnail: "ol_iPortalQueryMaps.png",
280+
fileName: "iPortalQueryMaps"
281+
}]
274282
}
275283
}
276284
},

‎examples/openlayers/iPortalQueryMaps.html‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>iPortal 地图列表</title>
6+
<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
7+
<link href="http://cdn.bootcss.com/openlayers/4.0.1/ol.css" rel="stylesheet">
8+
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
9+
<script src="http://cdn.bootcss.com/openlayers/4.0.1/ol-debug.js"></script>
10+
<script type="text/javascript" src="../../dist/iclient9-openlayers.min.js"></script>
11+
<style>*{margin: 0;padding: 0;box-sizing: border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
12+
a{text-decoration: none}
13+
ul,li{list-style: none}
14+
.gallery-item{margin-bottom: 30px;}
15+
.gallery-item-border{ border: 1px solid #dadada;-webkit-box-shadow: 0px 2px 3px #dcdcdc;box-shadow: 0px 2px 3px #dcdcdc;background:white;}
16+
.thumbnail>img, .thumbnail a>img{margin-right: auto;margin-left: auto;}
17+
.gallery-item-img{height: 170px !important;width: 262px !important;}
18+
.mapDetails{ margin: 0px 0 12px 16px; height: 21px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px !important; color: #7c7c7c;}
19+
.mapUserDetails{width: 100%;border-top: 1px solid #E8E8E8;font-size: 13px; }
20+
.textEllipsis{display: inline-block;padding-left: 10px; padding-top: 12px; padding-bottom: 12px; vertical-align: top;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
21+
.mapBottomList{ padding-left: 10px; padding-top: 13px; padding-bottom: 12px; vertical-align: top; float: right; padding-right: 30px; border-left: 1px solid #ececec; }
22+
.ip-toolbar-footer{ text-align: center}
23+
.pagination>li{ display: inline;}
24+
.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; }
25+
#mapListPaging>.pagination{ margin: 10px 15px;}
26+
#mapListPaging>.pagination>li>.disable{ pointer-events: none; background-color: rgba(0,0,0,0.1);}
27+
#mapListPaging>.pagination>li>.active{background-color: #0083CB;color: white;}
28+
</style>
29+
</head>
30+
<body style=" margin: 0;overflow: auto;background: #F2F2F2;width: 100%;height:100%;position: absolute;top: 0;">
31+
<div class="container" style="margin-bottom: 100px">
32+
<div class="page-header">
33+
<h4>iPortal QueryMaps使用示例</h4>
34+
</div>
35+
<div class="col-md-10">
36+
<div class="row">
37+
<div class="col-md-12">
38+
<!--所有Maps的承载DIV-->
39+
<div class="row" id="mapList">
40+
<!--单个Map数据的可视化承载DIV 添加在此位置中-->
41+
</div>
42+
<!--分页切换列表-->、
43+
<div class="row" id="mapListFooter">
44+
<div class="col-md-12">
45+
<div class="ip-toolbar-footer" id="mapListPaging">
46+
<ul class="pagination">
47+
<li><a href="javascript:void(0)"><i class="glyphicon glyphicon-chevron-left"></i></a></li>
48+
<li><a href="javascript:void(0)"><i class="glyphicon glyphicon-chevron-right"></i></a></li>
49+
</ul>
50+
</div>
51+
</div>
52+
</div>
53+
</div>
54+
</div>
55+
</div>
56+
</div>
57+
<script>
58+
//iportal的URL地址 或根据情况添加自己的本地iportal地址：http://localhost:8091/iportal
59+
var iPortalUrl="http://support.supermap.com.cn:8092";
60+
//默认请求的参数
61+
var mapsCurrentPage=1;//默认请求第一页
62+
var mapsPageSize=9;//每一页显示9条Map信息
63+
//全局变量，承载请求后，一共有多少页数
64+
var totalPages;
65+
var queryParams={
66+
currentPage:mapsCurrentPage,
67+
pageSize:mapsPageSize,
68+
};
69+
//Maps查询初始化工作
70+
var iPoortalMaps=new SuperMap.iPortal(iPortalUrl);
71+
$(document).ready(function () {
72+
//加载完DOM后，开始地图数据查询并添加
73+
iPoortalMaps.load().then(function () {
74+
queryMaps(queryParams);
75+
});
76+
//为分页列表项绑定事件
77+
$('#mapListPaging>.pagination').delegate('.mapListChang','click',function (e) {
78+
if(mapsCurrentPage!=parseInt(e.currentTarget.text)){
79+
mapsCurrentPage=parseInt(e.currentTarget.text)
80+
paginationClick(mapsCurrentPage);
81+
}
82+
});
83+
//切换到上一页
84+
$(".glyphicon-chevron-left").parent().click(function () {
85+
mapsCurrentPage--;
86+
paginationClick(mapsCurrentPage);
87+
});
88+
//切换到下一页
89+
$(".glyphicon-chevron-right").parent().click(function () {
90+
mapsCurrentPage++;
91+
paginationClick(mapsCurrentPage);
92+
});
93+
});
94+
// 查询iPortal中的地图
95+
function queryMaps(queryParams){
96+
iPoortalMaps.queryMaps(queryParams).then(function (mapsData) {
97+
//返回的结果集，需要查看可打开下行代码
98+
// console.log(mapsData);
99+
$("#mapList").children().remove();
100+
//将结果集进行遍历，并添加到HTML中
101+
$.each(mapsData.content,function (i) {
102+
//解析时间戳，可根据需求自行处理
103+
var createTime= new Date(parseInt(mapsData.content[i].createTime)).toLocaleString();
104+
var mapDOM=$("<div class='col-md-4 gallery-item'>" +
105+
"<div class='gallery-item-border'>"+
106+
"<a href='JavaScript:void(0)' target='_blank' class='thumbnail' style='margin-bottom: 10px'>"+
107+
"<img class='gallery-item-img' src='"+mapsData.content[i].thumbnail+"' alt=''>"+
108+
"</a>"+
109+
"<div>"+
110+
"<p class='mapDetails'>"+mapsData.content[i].title+"</p>"+
111+
"<p class='mapDetails'>"+'创建于：'+createTime+"<span class='mapTime'>"+"</span>"+"</p>"+
112+
"<div class='mapUserDetails'>"+
113+
"<div class='textEllipsis'>"+
114+
"<span class='glyphicon glyphicon-user'>"+"</span>"+"&nbsp;"+mapsData.content[i].userName+
115+
"</div>"+
116+
"<div class='mapBottomList'>"+
117+
"<span class='glyphicon glyphicon-eye-open'>"+"</span>"+
118+
"<span style='text-align: center'>"+"&nbsp;"+mapsData.content[i].visitCount+"</span>"+
119+
"</div>"+
120+
"</div>"+
121+
"</div>"+
122+
"</div>"+
123+
"</div>")
124+
$("#mapList").append(mapDOM);
125+
});
126+
//初始化分页列表以及分页数目发生变化时执行一下
127+
if(!totalPages || totalPages!==mapsData.totalPage){
128+
totalPages = mapsData.totalPage;
129+
initPages(mapsData.totalPage);
130+
}
131+
})
132+
};
133+
// 初始化分页列表UI
134+
function initPages(totalPage) {
135+
for(var i=0;i<totalPage;i++){
136+
if(i==(mapsCurrentPage-1)){
137+
var mapListPaging=$("<li>"+"<a href='JavaScript:void(0)' class='mapListChang active' >"+(i+1)+"</a>"+"</li>")
138+
}else{
139+
var mapListPaging=$("<li>"+"<a href='JavaScript:void(0)' class='mapListChang ' >"+(i+1)+"</a>"+"</li>")
140+
}
141+
mapListPaging.insertBefore( $("#mapListPaging>.pagination>li:last-child"))
142+
}
143+
//根据初始页面的设置，判断向前/后 翻页按钮是否需要禁止点击
144+
if(mapsCurrentPage==1){
145+
$(".glyphicon-chevron-left").parent().addClass('disable');
146+
}else if(mapsCurrentPage==totalPage){
147+
$(".glyphicon-chevron-right").parent().addClass('disable');
148+
}
149+
};
150+
//页面的点击事件，触发的function
151+
function paginationClick(mapsCurrentPage) {
152+
if(mapsCurrentPage==1){
153+
$(".glyphicon-chevron-left").parent().addClass('disable');
154+
$(".glyphicon-chevron-right").parent().removeClass('disable');
155+
}else if(mapsCurrentPage==totalPages){
156+
$(".glyphicon-chevron-right").parent().addClass('disable');
157+
$(".glyphicon-chevron-left").parent().removeClass('disable');
158+
}else{
159+
$(".glyphicon-chevron-left").parent().removeClass('disable');
160+
$(".glyphicon-chevron-right").parent().removeClass('disable');
161+
}
162+
queryParams={
163+
currentPage:mapsCurrentPage,
164+
pageSize:mapsPageSize,
165+
};
166+
queryMaps(queryParams);
167+
$("#mapListPaging>.pagination>li").eq(mapsCurrentPage).children().addClass('active').parent().siblings().children().removeClass('active');
168+
}
169+
</script>
170+
</body>
171+
</html>

‎examples/openlayers/img/ol_iPortalQueryMaps.png‎

23.8 KB
Loading

0 commit comments

Comments
 (0)