使用 iClient for leaflet 9D(2019) API 浏览 iPortal 地图 |
SuperMap iClient JavaScript 9D(2019) 提供了浏览 SuperMap iPortal 中地图的 API，帮助您在自己的 Web 页面中快速创建一幅 iPortal 的地图。
下面提供了两个示例，帮助您了解如何使用 iClient for Leaflet 9D(2019) 浏览 iPortal 的地图。
在使用 iClient for leaflet 9D(2019) 入门中，我们已经清楚了解了如何使用 SuperMap iClient for leaflet 9D(2019) 来构建一个简单的地图应用，访问 SuperMap iServer 的地图。在本示例中，我们重点介绍一下如何浏览 SuperMap iPortal 中的公开地图。
从如下开源社区获取 SuperMap iClient Javascript 9D(2019) 源码：
码云：https://git.oschina.net/isupermap/iClient9
在本地磁盘任意位置新建文件夹并自定义该文件夹，本示例命名为“MyFirst”；在 "MyFirst”文件夹下用文本编辑工具（如 NotePad++）新建一个“iPortal_MapViewer.html”的 html 页面，注意将该 html 页面保存为 UTF-8 编码格式，并添加入以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SuperMap iPortal
Map</title>
<link rel="stylesheet"
href="libs/leaflet/leaflet.css">
</head>
<body style=" margin: 0;overflow: hidden;background:
#fff;width: 100%;height:95%;position: absolute;top: 0;">
<label>输入iPortal地址：<input id="urlInput"
type="text" placeholder="http://<service>:<port>/iportal"/></label>
<br/>
<label>输入MapID：<input id="mapidInput"
type="text" placeholder="1"/></label>
<br/>
<button onclick="selectMap()">打开地图</button>
<div id="map" style="margin:0 auto;width:
100%;height: 100%"></div>
<script type="text/javascript" src="libs/leaflet/leaflet.js"></script>
<script type="text/javascript" src="dist/iclient9-leaflet.min.js"></script>
<script>
function selectMap(){
var mapId = document.getElementById("mapidInput").value;
var mapUrl = document.getElementById("urlInput").value;
if(mapId && mapUrl){
L.supermap.webmap(mapId, {server: mapUrl});
}else{
alert("请输入iPortal地图地址以及地图ID");
}
}
</script>
</body>
</html>
将第一步得到的 libs 和 dist 文件夹拷贝到“MyFirst”文件夹下，也可以放在其他位置，这时需要在第二步的代码中修改引用脚本的相对路径。
将“MyFirst”文件夹拷贝到 %SuperMap iPortal_HOME%/webapps 目录下，启动 SuperMap iPortal，在浏览器地址栏中输入：http://192.168.120.40:8090/MyFirst/iPortal_MapViewer.html，将示例“iPortal_MapViewer.html”发布出来。
您也可以将“MyFirst”文件夹拷贝到其他中间件（例如：Tomcat）或者 SuperMap iServer 或者其他 iPortal（非该地图所在的 iPortal）中进行发布，此时需要启动此中间件，然后在浏览器地址栏中输入：http://ip:port/MyFirst/iPortal_MapViewer.html（“ip”和“port”为中间件的 ip 和 端口号），将示例“iPortal_MapViewer.html”发布出来。
在打开的网页中输入 iPortal 地址（需与地址栏中的 IP 保持一致，即：如果地址栏中输入的是 IP，此处应输入 IP；如果地址栏中输入的是 localhost，此处也应输入 localhost），例如：http://192.168.120.40:8090/iportal，然后输入地图 id，例如：7，点击”打开地图“按钮，即可浏览 iPortal 的公开地图。
SuperMap iPortal 中的地图是有访问权限控制的，针对非公开的地图，首先需要具有该地图访问权限的用户登录 iPortal 后才能访问。下面我们提供一个简单的示例，需要先登录 iPortal ，登录成功后，输入地图 id，点击”出图“按钮，即可浏览 iPortal 中有访问权限控制的地图。
在示例1的基础上，我们在“MyFirst”文件夹下用文本编辑工具（如 NotePad++）新建一个“iPortalSecurity.html”的 html 页面，注意将该 html 页面保存为 UTF-8 编码格式，并添加入以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<link rel="stylesheet" href="libs/leaflet/leaflet.css">
<script type="text/javascript" src="libs/leaflet/leaflet.js"></script>
<script type="text/javascript" src="dist/iclient9-leaflet.min.js"></script>
<style>
.form-group,input {
width: 360px;
}
</style>
</head>
<body style=" margin: 0;overflow: auto;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div class="container">
<div class="page-header">
<h4></h4>
</div>
<div class="row">
<table class="table table-bordered col-md-6">
<thead>
</thead>
<tbody>
<!--登录-->
<tr>
<td>
<div class="col-md-10 col-md-offset-1">
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<label for="loginUrl_iportal" class="col-md-2 control-label">iPortal服务地址</label>
<div class="col-md-8">
<input type="text" class="form-control" id="loginUrl_iportal"
placeholder="服务域名/IP+端口">
</div>
</div>
<div class="form-group">
<label for="username_iportal" class="col-md-2 control-label">用户名</label>
<div class="col-md-8">
<input type="text" class="form-control" id="username_login">
</div>
</div>
<div class="form-group">
<label for="password_iportal" class="col-md-2 control-label">密码</label>
<div class="col-md-8">
<input type="password" class="form-control" id="password_login">
</div>
</div>
<div class="form-group">
<div class="col-md-12 text-center">
<button type="button" class="btn btn-success" onclick="loginPortal()">登录</button>
</div>
</div>
<div>
<div>
<label for="MapId">地图ID</label>
<div class="col-md-8">
<input type="text" id="MapId">
</div>
</div>
<div>
<button type="button" onclick="initMap()" title="请登录成功后再点击出图">出图</button>
</div>
</div>
</fieldset>
</form>
</div>
</td>
</tr>
</tbody>
</table>
<div id="map" style="height:600px;"></div>
</div>
</div>
<script>
/*登录*/
function loginPortal() {
var loginUrl = document.getElementById("loginUrl_iportal").value;
var userName = document.getElementById('username_login').value;
var password = document.getElementById('password_login').value;
if (!checkUrl(loginUrl))
{
return;
}
SuperMap.SecurityManager.loginiPortal(loginUrl, userName, password).then(function (result) {
if(result.succeed)
window.alert("登录成功")
});
}
/*登录 end*/
/*出图*/
function initMap() {
var mapUrl = document.getElementById("loginUrl_iportal").value;
var mapId = document.getElementById("MapId").value;
if(mapId && mapUrl){
L.supermap.webmap(mapId, {server: mapUrl});
}else{
alert("请先登录并输入地图ID后再试");
}
}
function checkUrl(url)
{
if (url
=== "") {
alert("请填写URL");
return false;
}
return true;
}
</script>
</body>
</html>
在示例1中，我们已经在“MyFirst”文件夹中引用了资源文件，并将“MyFirst”文件夹拷贝到了 %SuperMap iPortal_HOME%/webapps 目录下。
您也可以将“MyFirst”文件夹拷贝到其他中间件（例如：Tomcat）或者 SuperMap iServer 或者其他 iPortal（非该地图所在的 iPortal）中发布登录 iPortal 的示例服务。
启动 SuperMap iPortal（如果示例是部署在其他中间件，此时需要启动此中间件），在浏览器地址栏中输入：http://192.168.120.40:8090/MyFirst/iPortalSecurity.html （如果是其他中间件，此处中的 ip+端口号应为中间件的），将示例“iPortalSecurity.html”发布出来，在打开的网页中输入 iPortal 地址（需与地址栏中的 IP 保持一致，即：如果地址栏中输入的是 IP，此处应输入 IP；如果地址栏中输入的是 localhost，此处也应输入 localhost），例如：http://192.168.120.40:8090/iportal，然后输入有权限访问地图的 iPortal 用户账号和密码，点击“登录”按钮，会提示“登录成功”，如下图所示：
登录成功后，输入地图 ID，点击“出图”，即可浏览有权限访问控制的地图。如下图所示：
