软件
产品
使用Esri Leaflet访问ArcGIS 企业版安全认证服务
通过ArcGIS Server发布的认证服务需要用户名和密码才能访问。认证过程中，凭证被用于交换令牌。要在Leaflet中添加一个安全认证服务，我们将使用L.esri.post请求服务器生成令牌。这是一个原始的生成Rest令牌的示例，通过文档了解更多。
以下是创建步骤：
<!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/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/></head><body> <!-- Load Leaflet script from CDN --> <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script> <!-- Load Esri Leaflet script from CDN --> <script src="https://unpkg.com/esri-leaflet@2.1.1/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来生成tokenfunction 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/leaflet@1.2.0/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/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script> <!-- Load Esri Leaflet script from CDN --> <script src="https://unpkg.com/esri-leaflet@2.1.1/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> 
免责声明：本文系网络转载或改编，未找到原创作者，版权归原作者所有。如涉及版权，请联系删
技术文档
热门文章
155-2731-8020
