使用Esri Leaflet访问ArcGIS 企业版安全认证服务
引言
通过ArcGIS Server发布的认证服务需要用户名和密码才能访问。认证过程中，凭证被用于交换令牌。要在Leaflet中添加一个安全认证服务，我们将使用L.esri.post请求服务器生成令牌。这是一个原始的生成Rest令牌的示例，通过文档了解更多。
以下是创建步骤：
- 创建一个空的HTML文件，加载Leaflet、Esri Leaflet脚本库。
- 为地图创建DOM节点，还有执行请求token的表单。
- 创建响应函数，绑定表单提交事件。
创建HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Esri Leaflet Authenticated Services</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<!-- Load Leaflet stylesheet from CDN -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
crossorigin=""/>
</head>
<body>
<!-- Load Leaflet script from CDN -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
crossorigin=""></script>
<!-- Load Esri Leaflet script from CDN -->
<script src="https://unpkg.com/[email protected]/dist/esri-leaflet.js"
integrity="sha512-ECQqaYZke9cSdqlFG08zSkudgrdF6I1d8ViSa7I3VIszJyVqw4ng1G8sehEXlumdMnFYfzY0tMgdQa4WCs9IUw=="
crossorigin=""></script>
</body>
</html>添加地图容器和表单
<form id="securedServicesForm">
<div class="form-component">
<label for="username">User Name</label>
<!-- 输入用户名 -->
<input type="text" id="username" />
</div>
<div class="form-component">
<label for="password">Password</label>
<!-- 输入密码 -->
<input type="password" id="password">
</div>
<!-- 提交按钮，用于绑定响应事件 -->
<button id="formSubmit" type="submit">Add Service</button>
</form>大部分的ArcGIS Server实例，生成token的链接一般为 “服务器域名/arcgis/tokens/GenerateToken”，当然，根据安装目录的不同，该URL会有一些差别。
我们需要定义一些规划来控制我们元素的样式，使用现成的.css框架会比较简单。Esri Calcite Maps使用Bootstrap包含Esri Leaflet的示例。下面就是表单在地图上的样子。
添加地图对象、添加服务到地图
创建执行提交表单的函数
function serverAuth(server, username, password, callback) {
L.esri.post(server, {
username: username,
password: password,
f: 'json',
expiration: 86400,
client: 'referer',
referer: window.location.origin
}, callback);
}// 用于从文本输入框获得值，然后提交Post请求到ArcGIS Server来生成token
function addServicesFromServer(e) {
// 表单提交时阻止页面刷新
e.preventDefault();
// 获得表单值
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
// 从服务器生成token，回调函数中获得服务
serverAuth(tokenUrl, username, password, function(error, response) {
//添加地图服务
var dl = L.esri.dynamicMapLayer({
url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Wildfire_secure_ac/MapServer',
opacity: 1, //透明度
token: response.token //token值
}).addTo(map);
});
}
// 表单的提交按钮
var submitBtn = document.getElementById('formSubmit');
// 绑定按钮的点击事件
submitBtn.addEventListener('click', addServicesFromServer);完整的HTML为，注意本例中的用户名和密码都为user1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Esri Leaflet Authenticated Services</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<!-- Load Leaflet stylesheet from CDN -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
crossorigin=""/>
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.form-container {
position: absolute;
top: 15px;
right: 15px;
padding: 25px;
border: 2px solid #333;
background: #fff;
font-size: 1.15em;
z-index: 1000;
}
.form-component {
margin-bottom: 15px;
}
</style>
</head>
<body>
<!-- container for map -->
<section id="map">
<!-- form to add in secured service -->
<section class="form-container">
<form id="securedServicesForm">
<div class="form-component">
<label for="username">User Name</label>
<input type="text" id="username" />
</div>
<div class="form-component">
<label for="password">Password</label>
<input type="password" id="password">
</div>
<button id="formSubmit" type="submit">Add Services</button>
</form>
</section>
</section>
<!-- Load Leaflet script from CDN -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
crossorigin=""></script>
<!-- Load Esri Leaflet script from CDN -->
<script src="https://unpkg.com/[email protected]/dist/esri-leaflet.js"
integrity="sha512-ECQqaYZke9cSdqlFG08zSkudgrdF6I1d8ViSa7I3VIszJyVqw4ng1G8sehEXlumdMnFYfzY0tMgdQa4WCs9IUw=="
crossorigin=""></script>
<!-- script to create map and load secured services -->
<script>
'use strict';
// submit element of form
var submitBtn = document.getElementById('formSubmit');
// add event listener to form
submitBtn.addEventListener('click', addServicesFromServer);
// create map and set zoom level and center coordinates
var map = L.map('map').setView([34.089, -116.865], 9);
// set basemap to Esri Streets
var esriStreets = L.esri.basemapLayer('Streets').addTo(map);
var tokenUrl = 'https://sampleserver6.arcgisonline.com/arcgis/tokens/generateToken';
// 提交请求
function serverAuth(server, username, password, callback) {
L.esri.post(server, {
username: username,
password: password,
f: 'json',
expiration: 86400,
client: 'referer',
referer: window.location.origin
}, callback);
}
// function to run when form submitted
function addServicesFromServer(e) {
// prevent page from refreshing
e.preventDefault();
// get values from form
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
// generate token from server and add service from callback function
serverAuth(tokenUrl,username,password,function(error, response) {
// add layer to map
var dl = L.esri.dynamicMapLayer({
url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Wildfire_secure_ac/MapServer',
opacity: 1,
token: response.token
}).addTo(map);
}); // end serverAuth call
} // end addServicesFromServer call
</script>
</body>
</html>