地理信息系统（GIS）系列——Portal for ArcGIS

àì夳堔傛蜴生んèń 2023-01-10 13:30 249阅读 0赞

### 1、Portal ###

Portal 是一个基于 Web 的应用，它能提供个性化，单点登陆，不同源的内容聚合，和信息系统的表示层集中。聚合是整合不同 Web 页面源数据的过程。为了提供用户定制的内容，Portal 可能包含复杂的个性化特征。为不同用户创建内容的 Portal 页，可能包含不同的 Portlet 集。

##### Portal 的基本架构 #####

Portal Web 应用处理客户请求，找回用户当前页中的 Portlet，然后调用 Portlet 容器，重新获取各个 Portlet 的内容。Portlet 容器提供Portlet 的运行时环境，并通过 Portlet API 调用 Portlet。Portal 通过 Portlet Invoker API 调用 Portlet 容器。Portlet 容器通过 Portlet Provider SPI（Service Provide Interface）获取 Portal 信息。

##### 基本的 Portal 页面组件 #####

Portal 页面本身代表一个完整的标记文档，并且聚集了一些 Portlet 窗口。除 Portlet 外，页面可能还包含导航区和标志区（Navigation Area and Banners）。一个 Portlet 窗口包含一个标题栏、装饰和Portlet 产生的内容。装饰可以包括改变 Portlet 窗口状态和模式的按钮。

##### Portlet #####

Portlet 是基于 Java 的 Web 组件，处理 request 并产生动态内容。Portlet 产生的内容称为片段，即一段遵守中心规则的标记（比如HTML，XHTML，WML（无线标记语言）），多个片段可以聚合成一个完整的文档。多个 Portlet 聚合在一起，组成 Portal 页。Portlet 容器控制 Portlet 的生命周期。  
Web 客户通过 Portal 实现的 request/response 范例与 Portlet 交互。通常，Portlet 中的动作会被 Portal 接受，从而用户与 Portlet 中的内容交互（比如点击 Portlet 中的链接，提交表单），提交到Portlet 的目标。  
对不同的用户，根据其配置，同一个 Portlet 会产生不同的内容。

##### Portlet 容器 #####

Portlet 容器提供它们需求的运行时环境并运行 Portlet。它包含Portlets 并控制它们的生命周期。容器提供 Portlet 参数的持久存储机制，它接受来自 Portal 的 request，并在其持有的 Portlet 上执行 request。容器不负责 Portlet 产生内容的聚合，Portal 自己处理内容聚合。

### 2、Portal for ArcGIS ###

地理信息门户系统，新一代WEBGIS开发模式，一个综合性的GIS门户。

##### Portal for ArcGIS 特点 #####

*  组织和管理内容
 *  即拿即用的制图工具和应用模板
 *  以地图为核心协调
 *  属于arcgis for server 的高级扩展

##### Portal for ArcGIS 主要功能 #####

*  管理用户自己的地理信息资源
 *  可以实现GIS服务的注册和托管
 *  可以访问统一的地理地图，GIS工具和分析服务
 *  在线创建地图和web应用
 *  分享地图和web应用
 *  基于 Webmap 实现日常工作协调办公
 *  支持office环境制图

##### Portal for ArcGIS 定位 #####

*  GIS 工作平台  
    丰富的地图资源：底图按需定制，Online 在线资源  
    在线制图：可视化、编辑、符号化、窗体、统计分析、数据过滤  
    快速创建应用：即拿即用的模板，丰富的 API  
    简单易用：与其他系统集成
 *  内容管理平台  
    内容整合：Webmap 新载体，以地图为中心的内容管理系统，内容注册，服务托管，多元化，可以管理地图资源和地图工具  
    规范管理：基于目录组织，大量资源管理更加高效，详细的资源描述，操作简单  
    高效查询：智能搜素，快速检索地图、应用、模板、工具等，结果详细，包含标签、评级、评论等，快速定位，直接打开另存、分享
 *  协同共享平台  
    快速内容发布：让所有人可以制作地图  
    高级灵活群组管理及共享策略：谁创建谁共享，访问策略控制  
    随时随地共享访问：WebGIS 无处不在

##### Portal for ArcGIS 理念 #####

*  Portal for ArcGIS是私有云门户

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center]

##### Portal for ArcGIS 组成 #####

*  网站：使用Portal网站，企业成员可以搜索分享地图和应用等一系列资源
 *  Sharing services：是一款后台软件，管理Poratal中的项目、服务、web地图、群组和其他功能
 *  Identity store：Portal用户需要登录来合适是否被授权访问网站内容  
    管理工具。Portal网站包括管理工具，对用户、群组的内容资源进行管理
 *  Web Mapping APIs：Portal 使开发人员能够通过 ESRI 的 web Mapping APIs（javascript等）创建、共享web地图应用和代码实例

##### Portal for ArcGIS 资源类型 #####

###### 地图 ######

*  Web Map
 *  地图包.mpk
 *  ArcMap文档.mxd.msd
 *  ArcGlobe文档.3dd
 *  ArcScene文档.sxd
 *  ArcReader文档.pmf
 *  切片包.tpk
 *  ArcGIS Explorer文档.nmf

###### 数据图层 ######

*  要素层
 *  地图图层

###### 数据文件 ######

*  分隔的文本文件.csv .txt
 *  图层包.lpk
 *  ArcGIS Windows Mobile包.wmpk
 *  地图模板.zip
 *  桌面应用程序模板.zip
 *  代码实例.zip
 *  Workflow包.wpk

###### 应用程序 ######

*  Web 应用程序
 *  移动应用程序
 *  ArcGIS Desktop 加载项
 *  ArcGIS Explorer

###### 工具 ######

*  地图编码服务
 *  网络分析服务
 *  地理处理服务
 *  地理数据服务
 *  地理处理实例
 *  ArcGIS 几何服务
 *  打包定位器
 *  地理处理包

### 3、Web Mapping APIs ###

*  创建共享web地图应用和代码实例的API接口，对Portal云门户进行二次开发

##### Web Mapping APIs 主要 API 类 #####

*  Portal
 *  PortalComment
 *  PortalFolder
 *  PortalGroup
 *  PortalGroupMembers
 *  PortalItem
 *  PortalQueryParams
 *  PortalQueryResult
 *  PortalRating
 *  PortalUser

##### Portal #####

*  门户类是ArcGIS门户API,提供了一个从ArcGIS在线或ArcGIS门户构建应用程序的方式
 *  构造函数：

new Portal(url)

*  url：门户地址

###### Portal 属性 ######

*  access：组织的访问级别
 *  allSSL：通过SSL访问组织的门户资源
 *  basemapGalleryGroupQuery：查询底图
 *  bingKey：Bing键用于web地图使用必应地图
 *  canListApps：是否可以列出应用
 *  canListData：能否列出数据服务
 *  canListPreProvisionedItems：能否预览项目列表
 *  canSearchPublic：是否可以公共搜索
 *  canShareBingPublicBing：是否可以共享公共 Bing 搜索
 *  canSharePublic：是否可以公开共享
 *  canSignInArcGIS：是否可以登录 ArcGIS
 *  canSignInIDP：是否可以登录 IDP
 *  colorSetsGroupQuery：查询颜色集合
 *  commentsEnabled：是否允许评论
 *  created：创建日期
 *  culture：默认语言环境（语言和国家）的信息
 *  customBaseUrl：自定义门户基本URL
 *  defaultBasemap：默认底图
 *  defaultExtent Object：默认地图范围
 *  description：机构/门户的描述
 *  featuredGroups：要素组
 *  featuredGroupsId：要素组 id
 *  featuredItemsGroupQuery：查询要素项
 *  galleryTemplatesGroupQuery：查询模版组
 *  homePageFeaturedContent：主页特色内容
 *  homePageFeaturedContentCount：主页特色内容数量
 *  httpPort ：HTTP 端口
 *  httpsPort：HTTPS 端口
 *  id：拥有此门户的组织 ID
 *  ipCntryCode：国家代码调用IP（ArcGIS Online）
 *  isOrganization：门户是否是一个组织
 *  isPortal：是否是门户
 *  layerTemplatesGroupQuery：查询的层模板组
 *  maxTokenExpirationMinutes：最大 Token 过期时间
 *  modified：门户最后修改日期
 *  name：门户的名称
 *  portalHostname：门户主机的主机名
 *  portalMode：门户模式
 *  portalName：门户网站的名称
 *  portalProperties：门户属性
 *  portalThumbnail：门户的缩略图的URL
 *  portalUrl：门户URL
 *  region：门户所在地区
 *  rotatorPanels：旋转面板
 *  showHomePageDescription：在主页显示描述
 *  supportsHostedServices：是否支持托管服务
 *  supportsOAuth：是否支持认证
 *  symbolSetsGroupQuery：查询使用的符号集
 *  templatesGroupQuery：查询使用的模板集
 *  thumbnail：组织的缩略图
 *  thumbnailUrl：组织的缩略图的 URL（完整路径）
 *  units：单位
 *  url：门户 URL
 *  urlKey：URL 的 Key
 *  useStandardizedQuery：使用标准查询，即只有简单的 where 子句
 *  User：返回用户信息

###### Portal 方法 ######

*  getPortalUser()：返回 PortalUser 对象
 *  queryGroups(queryParams?)：查询门户集  
    queryItems(queryParams?)：查询门户项  
    signIn()：门户用户登录  
    signOut()：门户用户登出

###### Portal 事件 ######

*  error：错误事件
 *  load：加载事件

<!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
        <title>Grid Layout</title>
    
        <link rel="stylesheet" href="css/grid960.css">
        <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">     
        <script>var dojoConfig = { parseOnLoad: true };</script>
        <script src="http://js.arcgis.com/3.14/"></script>
        <script> dojo.require('esri.arcgis.Portal'); // 注册门户类 dojo.require("esri.IdentityManager"); // 身份管理器 dojo.require("dojox.lang.aspect"); // 外貌 var displayOptions = { // 显示选项 templateUrl: 'http://www.arcgis.com/apps/OnePane/basicviewer/profile.html', themeName: 'gray', // 样式 numItemsPerPage: 6, // 每页的项目 group: { // 组对象 "owner": "Kelly", "title": "Running Routes" }, portalUrl: 'http://www.arcgis.com' }; var portal; var group; var nextQueryParams; var queryParams; function init() { // 创建门户对象 portal = new esri.arcgis.Portal(displayOptions.portalUrl); // 绑定加载事件 dojo.connect(portal, 'onLoad', loadPortal); // 对门户执行一个查询返回一个延迟,当解决returnsPortalQueryResult包含一个数组ofPortalItem // 对象输入查询相匹配的结果 // 或文本数据可以通过项目数据资源。查看ArcGIS门户API其他文档项目的更多细节。 // 参数一门户，参数二为方法， // 参数三定义为一个对象,或一个函数,它返回这样的对象,或一个数组之前的项目 // 建议对象可以定义成员函数: afterReturning（在这之后返回） afterThrowing(在这之后抛出) dojox.lang.aspect.advise(portal, "queryItems", { { // cc为延迟（Deferred）对象 afterReturning: function (cc) // then添加新的回调延迟函数,result为PortalQueryResult对象，详细信息查询的结果 cc.then(function (result) { // 下一组结果的查询参数 nextQueryParams = result.nextQueryParams; // 第一组结果的查询参数 queryParams = result.queryParams; }); } }); } function loadPortal() { // 查询参数 var params = { q: 'title: ' + displayOptions.group.title + ' AND owner:' + displayOptions.group.owner }; // 根据参数，查询门户资源内容 portal.queryGroups(params).then(function (groups) { // 根据参数，延缓推出查询内容 // 获得群组信息，包含缩略图的url groups.results.返回结果 // 设置组的信息 if (groups.results.length > 0) { // 获取群组下的一个组对象 // 第一个对象 group = groups.results[0]; // 组织的缩略图的url(完整路径) if (group.thumbnailUrl) { dojo.create('img', { // 组织的缩略图的url(完整路径) src: group.thumbnailUrl, width: 64, height: 64, // 标题 alt: group.title // 绑定缩略图标签 }, dojo.byId('groupThumbnail')); } // 组标题 dojo.byId('groupTitle').innerHTML =group.title; // 组片段描述 dojo.byId('sidebar').innerHTML = group.snippet; // 检索从组织和显示web地图和应用程序 var params = { q: ' type: Web Map', // 页码 num: displayOptions.numItemsPerPage }; // 查询组内的资源 // 执行更新方法 group.queryItems(params).then(updateGrid); } }); } // 查询组内项目资源展现出来 function updateGrid(queryResponse) { // 更新画廊下一页项目 var galleryList = dojo.byId('galleryList'); // 空画廊删除现有的项目 dojo.empty(galleryList); // 导航按钮 (queryResponse.results.length < 6) ? esri.hide(dojo.byId('next')) : esri.show(dojo.byId('next')); (queryResponse.queryParams.start > 1) ? esri.show(dojo.byId('prev')) : esri.hide(dojo.byId('prev')); // 建立每个项目缩略图将显示缩略图,点击网络地图模板或web应用程序 var frag = document.createDocumentFragment(); dojo.forEach(queryResponse.results, function (item) { if (item.id) { var url = (item.type === 'Web Map') ? displayOptions.templateUrl + '?webmap=' + item.id + '&theme=' + displayOptions.themeName ://服务路径 item.url; var li = dojo.create('li', { }, frag); var a = dojo.create('a', { href: url, target: '_blank', innerHTML: '<div class="tooltip"><p>' + item.snippet + '</p></div><img src="' + item.thumbnailUrl + '"/><div>' + item.title + '</div>' }, li); } }); dojo.place(frag, galleryList); } function getNext() { if (nextQueryParams.start > -1) { group.queryItems(nextQueryParams).then(updateGrid); } } function getPrevious() { // we aren't at the beginning keep querying. if (nextQueryParams.start !== 1) { var params = queryParams; params.start = params.start - params.num; group.queryItems(params).then(updateGrid); } } dojo.ready(init); </script>
      </head>
      
      <body>
        <div id='header'>
          <div class='container_16'>
            <div class='grid_2'>
              <span id='groupThumbnail'></span>
            </div>
            <div class='grid_14'>
              <h1 id='groupTitle'></h1>
            </div>
          </div>
        </div>
        <div id='mainContent'>
          <div class='container_16'>
            <div class="grid_3">
              <div id='sidebar'></div>
            </div>
            <div class="grid_13">
              <a id='prev' style='left:-8px;' class="large leftbutton gray navButton" href='javascript:getPrevious();'>◄ Prev</a>
              <ul id='galleryList' class='gallery'></ul>
              <a id='next' style='right:20px;' class="large rightbutton gray navButton" href='javascript:getNext();'>Next ►</a>
            </div>
          </div>
        </div>
      </body>
    
    </html>

##### PortalComment #####

*  评论门户项目的细节

###### PortalComment 属性 ######

*  comment：评论文本
 *  created：创建日期和时间
 *  id：编号
 *  owner：创建评论的用户

##### PortalFolder #####

*  提供了信息文件夹用来组织在门户的内容。文件夹是唯一可见的用户和用于组织用户的内容空间中的内容

###### PortalFolder 属性 ######

*  created：文件夹创建的日期
 *  id：编号
 *  portal：门户
 *  title：标题
 *  url：文件夹路径

###### PortalFolder 方法 ######

*  getItems()：找到所有的项目文件夹

##### PortalGroup #####

*  门户组，一组代表一组资源

###### PortalGroup 属性 ######

*  created：该门户组创建的日期
 *  description：详细描述
 *  id：编号
 *  isInvitationOnly：只允许访问该组
 *  isViewOnly：只代表一个视图组，成员不可以共享项目
 *  modified：组最后的修改日期
 *  owner：组的所有者的用户名
 *  portal：该组织的门户
 *  snippet：一个简短的总结描述
 *  tags：用户定义的标记
 *  thumbnailUrl：使用的缩略图组的url
 *  title：标题
 *  url：路径

###### PortalGroup 方法 ######

*  getMembers()：获取当前的组成员
 *  queryItems(queryParams?)：执行查询返回组中的项

##### PortalGroupMembers #####

*  门户组成员，包含用户列表，所有者和组的管理员

###### 主要属性 ######

*  admins：一个数组，其中包含每个管理员的用户名
 *  owner：组的所有者的用户名
 *  users：一个数组，其中包含组中的每个用户的用户名

##### PortalQueryParams #####

*  定义查询参数

###### 主要属性 ######

*  num：查询参数的数量
 *  q：查询字符串
 *  sortField：排序字段
 *  start：第一个查询参数

##### PortalQueryResult #####

*  详细信息查询的结果

###### 主要属性 ######

*  nextQueryParams：下一组结果的查询参数
 *  queryParams：第一组结果的查询参数
 *  results：结果条目对象数组
 *  total：结果的总数

##### PortalRating #####

*  门户评级

###### 主要属性 ######

*  created：评级创建的时间
 *  rating：评级分数，在1到5之间

##### PortalItem #####

*  门户项

###### PortalItem 主要属性 ######

*  avgRating：平均评级
 *  created：项的创建日期
 *  culture：项的上下文信息
 *  description：项的详细描述
 *  extent：项的范围
 *  id：编号
 *  itemDataUrl：与项相关联的数据资源的url
 *  itemUrl：项的路径
 *  licenseInfo：许可证信息
 *  modified：项的最后修改日期
 *  name：项的名称
 *  numComments：项的评论数量
 *  numRatings：项的评级数量
 *  numViews：项视图
 *  owner：项的拥有者
 *  portal：包含项的门户
 *  size：项的大小
 *  snippet：项的描述
 *  spatialReference：项的空间参考
 *  tags：用户定义的标记描述项
 *  thumbnailUrl：用于项的缩略图的url
 *  title 项的标题
 *  type：这个项的 GIS 内容类型
 *  typeKeywords：项的类型关键词
 *  url：项的 URL
 *  userItemUrl：用户项的 URL

###### PortalItem 方法 ######

*  addComment(comment)：将注释添加到项
 *  addRating(rating)：添加项评级
 *  deleteComment(comment)：删除项评论
 *  deleteRating(rating)：删除项评级
 *  getComments()：获取项评论
 *  getRating()：返回项评级
 *  updateComment(comment)：更新项评论

##### PortalUser #####

*  门户网站的注册用户

###### PortalUser 主要属性 ######

*  created：用户的创建日期
 *  culture：用户的语言
 *  description：用户的详细描述
 *  email：用户邮件
 *  fullName：用户全名
 *  modified：用户修改的日期
 *  orgId：用户属于组织的 id
 *  portal：所属门户
 *  preferredView：用户的首选视图内容，网络或GIS
 *  region：用户所在的地区
 *  role：用户在组织中扮演的角色
 *  tags：描述用户定义的标记
 *  thumbnailUrl：用户缩略图的 URL
 *  userContentUrl：用户的 URL 的内容
 *  username：用户的用户名

###### PortalUser 主要方法 ######

*  getFolders()：门户用户所在的文件夹
 *  getGroupInvitations()：提供了访问门户用户的组邀请
 *  getGroups()：找到所有的团体门户用户访问权限
 *  getItem(itemId)：获得门户项目和文件夹信息输入项 id
 *  getItems(folderId)：检索指定的文件夹中的所有项目
 *  getNotifications()：获取门户用户的通知信息
 *  getTags()：获取用户访问标记

<!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>Group ID Finder</title>
        <link rel="stylesheet" href="//js.arcgis.com/3.14/dojo/resources/dojo.css">
        <link rel="stylesheet" href="//js.arcgis.com/3.14/dgrid/css/dgrid.css">
        <link rel="stylesheet" href="//js.arcgis.com/3.14/dgrid/css/skins/claro.css">
        <link rel="stylesheet" href="//js.arcgis.com/3.14/dijit/themes/claro/claro.css">
        <link rel="stylesheet" href="//js.arcgis.com/3.14/esri/css/esri.css">
        <link rel="stylesheet" href="css/layout.css">
    
        <script> // async is a new dojoConfig option. The default value of false will load all the Dojo base modules // here we set it to true to take advantage of the asynchronous nature of dojo and the the base modules // are not automatically loaded. // 利用dojo的异步性质和基本模块 var dojoConfig = { async: true }; </script>
        <script src="//js.arcgis.com/3.14/"></script>
        <script> // require function accepts an array of module ids and a function. The modules are provided as return variables passed as arguments to the function. This replaces the dojo.requires statements. require([ "dojo/parser", "dojo/ready", "dojo/dom", "dojo/dom-construct", "dojo/_base/array", "dijit/registry", "dojo/on", "esri/arcgis/Portal", "esri/config", "esri/lang", "dgrid/Grid", "dijit/layout/BorderContainer", "dijit/layout/ContentPane" ], function ( parser, ready, dom, domConstruct, array, registry, on, arcgisPortal, config, esriLang, Grid ) { var portal, portalUrl, groupGrid; ready(function () { // 在dojoConfig中 取代 parseOnLoad = true parser.parse(); config.defaults.io.proxyUrl = '../proxy/proxy.ashx'; portalUrl = document.location.protocol + '//www.arcgis.com'; // 创建门户 portal = new arcgisPortal.Portal(portalUrl); on(portal, 'load', function (p) { dom.byId('groupFinderSubmit').disabled = false; dom.byId('signIn').disabled = false; // 登录点击事件 on(dom.byId('signIn'), 'click', signIn); // 搜索时输入键被按下或单击按钮 on(dom.byId('groupFinderSubmit'), 'click', findArcGISGroup); // 操作内容框，按键事件 on(dom.byId('groupFinder'), 'keyup', function (e) { if (e.keyCode === 13) { findArcGISGroup(); } }); }); }); // 基于输入关键字搜索 function findArcGISGroup() { var keyword = dom.byId('groupFinder').value; var params = { q: keyword, // 排序字段 sortField: 'modified', // 倒序查找 sortOrder: 'desc', // 查找项数量 num: 20 }; portal.queryGroups(params).then(function (data) { // 查询显示 showGroupResults(data); }); } // 显示一个组列表相匹配的输入用户名 function showGroupResults(response) { // 明确的任何现有的结果 var data = []; if (groupGrid) { groupGrid.refresh(); } if (response.total > 0) { // 创建一个数组属性为每个组——我们将在一个dojo dgrid显示这些 data = array.map(response.results, function (group) { return { // 一个简短的总结描述 'snippet': group.snippet, 'title': group.title, 'url': group.url, 'thumbnail': group.thumbnailUrl || '',//缩略图 'id': group.id, // 组的所有者的用户名 'owner': group.owner }; }); // 创建 Grid groupGrid = new Grid({ columns: { // 缩略图 thumbnail: 'Group Icon', title: 'Group', // 一个简短的总结描述 snippet: 'Description', id: 'Group ID' }, // 渲染,相当于定义模板 renderRow: renderTable, showHeader: false }, "grid"); // 绑定数据 groupGrid.renderArray(data); } else { dom.byId('groupResults').innerHTML = '<h2>Group Results</h2><p>No groups were found. If the group is not public use the sign-in link to sign in and find private groups.</p>'; } } // 渲染表格 function renderTable(obj, options) { var template = '<div class="thumbnail"><img src=${thumbnail} width="50" height="50"/></div><a target="_blank" class="title" href=${url}>${title}</a><span class="owner"> (${owner} ) </span><div class="summary">${snippet} </div><textarea class="group=id" readonly="readonly" rows="1" cols="30">${id}</textarea>'; obj.url = portalUrl + '/home/group.html?groupid=id:' + obj.id; obj.thumbnail = obj.thumbnail || ''; // 创建 div return div = domConstruct.create("div", { innerHTML: esriLang.substitute(obj, template) }); } // 登录 function signIn() { var signInLink = dom.byId('signIn'); if (signInLink.innerHTML.indexOf('In') !== -1) { portal.signIn().then(function (loggedInUser) { signInLink.innerHTML = "Sign Out"; // 更新结果 findArcGISGroup(); // 错误返回 }, function (error) { signInLink.innerHTML = 'Sign In'; }); } else { portal.signOut().then(function (portalInfo) { signInLink.innerHTML = "Sign In"; findArcGISGroup(); }); } } }); </script>
      </head>
    
      <body class="claro">
        <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%;height:100%;margin:0;">
          <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
            <h1>ArcGIS Online Group ID Finder</h1>
            <a id="signIn" disabled='disabled'>Sign In</a>
            <p>Find group ids based on search term. Sign-in to search for private groups.</p>
            <input name="groupFinder" id="groupFinder" placeholder="username" value="esri" size="30" />
            <input name="groupFinderSubmit" disabled='disabled' type="submit" value="Submit" id="groupFinderSubmit" />
          </div>
          <div id='gridpane' data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
            <div id='grid'></div>
            <div id="groupResults"></div>
          </div>
        </div>
      </body>
    </html>

### 4、在线添加地图数据 ###

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
        <title>Add Shapefile</title>
    
        <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
        <link rel="stylesheet" href="css/app.css">
        
        <link rel="stylesheet" href="css/fileupload.css">
        
        <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">    
        <script src="http://js.arcgis.com/3.14/"></script>
        <script> var map; require([ "esri/config", "esri/InfoTemplate", "esri/map", "esri/request", "esri/geometry/scaleUtils", "esri/layers/FeatureLayer", "esri/renderers/SimpleRenderer", "esri/symbols/PictureMarkerSymbol", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "dojo/dom", "dojo/json", "dojo/on", "dojo/parser", "dojo/sniff", "dojo/_base/array", "esri/Color", "dojo/_base/lang", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function ( esriConfig, InfoTemplate, Map, request, scaleUtils, FeatureLayer, SimpleRenderer, PictureMarkerSymbol, SimpleFillSymbol, SimpleLineSymbol, dom, JSON, on, parser, sniff, arrayUtils, Color, lang ) { parser.parse(); var portalUrl = "http://www.arcgis.com";//定义门户路径 esriConfig.defaults.io.proxyUrl = "/proxy/"; // 上传事件绑定，change事件 on(dom.byId("uploadForm"), "change", function (event) { // 转换为小写 var fileName = event.target.value.toLowerCase(); // sniff这个模块集()标记基于当前浏览器 // 在IE中提取文件的完整路径，文件名 if (sniff("ie")) { // "\"分组 var arr = fileName.split("\\"); // 获取文件名 fileName = arr[arr.length - 1]; } // 判断是否为.zip文件，如果是，则添加文件 if (fileName.indexOf(".zip") !== -1) { generateFeatureCollection(fileName); } // 如果不是，提示信息 else { dom.byId('upload-status').innerHTML = '<p style="color:red">Add shapefile as .zip file</p>'; } }); map = new Map("mapCanvas", { basemap: "gray", center: [-41.647, 36.41], zoom: 3, slider: false }); // 添加文件 function generateFeatureCollection(fileName) { // 根据“.”分组 var name = fileName.split("."); // 如果是路径 c:\fakepath - 需要移除 // 看到这个链接以获得更多信息: http://davidwalsh.name/fakepath name = name[0].replace("c:\\fakepath\\", ""); // 加载提示信息 dom.byId('upload-status').innerHTML = '<b>Loading… </b>' + name; // 定义输入参数 var params = { 'name': name, 'targetSR': map.spatialReference, 'maxRecordCount': 1000, // 输入文件大小限制 'enforceInputFileSizeLimit': true, // Json 文件输出大小限制 'enforceOutputJsonSizeLimit': true }; // generalize features for display Here we generalize at 1:40,000 which is approx 10 meters // 当使用 web 墨卡托这应该工作得很好 // 获取地图范围 var extent = scaleUtils.getExtentForScale(map, 40000); // 获取分辨率 var resolution = extent.getWidth() / map.width; params.generalize = true; params.maxAllowableOffset = resolution; // 精度 params.reducePrecision = true; // 小数点后的位数 params.numberOfDigitsAfterDecimal = 0; var myContent = { // 文件类型为shp文件 'filetype': 'shapefile', 'publishParameters': JSON.stringify(params), // 返回一个JSON对象的序列化，格式为 JSON 'f': 'json', 'callback.html': 'textarea' }; //使用其余的生成操作来生成一个压缩shapefile功能集合 // 发送一个请求使用默认当前平台 request({ url: portalUrl + '/sharing/rest/content/features/generate', content: myContent, form: dom.byId('uploadForm'), handleAs: 'json', // 返回一个函数,它只会在给定的范围内执行 load: lang.hitch(this, function (response) { if (response.error) { errorHandler(response.error); return; } // 图层名称 var layerName = response.featureCollection.layers[0].layerDefinition.name; dom.byId('upload-status').innerHTML = '<b>Loaded: </b>' + layerName; // 加载文件 addShapefileToMap(response.featureCollection); }), error: lang.hitch(this, errorHandler) }); } // 错误信息 function errorHandler(error) { dom.byId('upload-status').innerHTML = "<p style='color:red'>" + error.message + "</p>"; } // 添加文件 function addShapefileToMap(featureCollection) { // add the shapefile to the map and zoom to the feature collection extent // If you want to persist the feature collection when you reload browser you could store the collection in // local storage by serializing the layer using featureLayer.toJson() see the 'Feature Collection in Local Storage' sample // for an example of how to work with local storage. var fullExtent; var layers = []; // 遍历图层 arrayUtils.forEach(featureCollection.layers, function (layer) { // 设置信息模板，显示所有内容 var infoTemplate = new InfoTemplate("Details", "${*}"); // 定义返回结果为featureLayer var featureLayer = new FeatureLayer(layer, { infoTemplate: infoTemplate }); // 绑定单机时间，显示项目信息 featureLayer.on('click', function (event) { map.infoWindow.setFeatures([event.graphic]); }); // change default symbol if desired. Comment this out and the layer will draw with the default symbology // 改变图层渲染 changeRenderer(featureLayer); fullExtent = fullExtent ? fullExtent.union(featureLayer.fullExtent) : featureLayer.fullExtent; // featureLayer 添加到图层数组 layers.push(featureLayer); }); // 添加到地图 map.addLayers(layers); // 定位到新添加的地图范围 map.setExtent(fullExtent.expand(1.25), true); dom.byId('upload-status').innerHTML = ""; } function changeRenderer(layer) { // 改变默认的符号特征多边形和集合点 var symbol = null; switch (layer.geometryType) { case 'esriGeometryPoint': symbol = new PictureMarkerSymbol({ 'angle': 0, 'xoffset': 0, 'yoffset': 0, 'type': 'esriPMS', 'url': 'http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png', 'contentType': 'image/png', 'width': 20, 'height': 20 }); break; case 'esriGeometryPolygon': symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([112, 112, 112]), 1), new Color([136, 136, 136, 0.25])); break; } if (symbol) { // 设置渲染适配器 layer.setRenderer(new SimpleRenderer(symbol)); } } }); </script>
      </head>
      
      <body class="claro">
        <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
          <div data-dojo-type="dijit/layout/ContentPane" id="rightPane" data-dojo-props="region:'right'">
            <div style='padding-left:4px;'>
              <p>
                Add a zipped shapefile to the map.</p><p>Visit the
                <a target='_blank' href="http://doc.arcgis.com/en/arcgis-online/reference/shapefiles.htm">Shapefiles</a> help topic for information and limitations.</p>
                  <form enctype="multipart/form-data" method="post" id="uploadForm">
                  <div class="field">
                      <label class="file-upload">
                          <span><strong>Add File</strong></span>
                          <input type="file" name="file" id="inFile" />
                      </label>
                  </div>
                  </form>
                  <span class="file-upload-status" style="opacity:1;" id="upload-status"></span>
                  <div id="fileInfo"> </div>
            </div>
        </div>
        <div id="mapCanvas" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
      </div>
    </body>
    
    </html>

### 5、Web Map Viewer（地图服务列表视图） ###

<!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      
      <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
      <title>Web Map Viewer</title>
    
      <link rel="stylesheet" href="http://jsapi.thinkgis.cn/esri/css/esri.css">
      <link rel='stylesheet' href='css1/layout.css'>
      <script>var dojoConfig = { parseOnLoad: true };</script>
      <script src="http://jsapi.thinkgis.cn/init.js"></script>
      <script> dojo.require('esri.arcgis.Portal'); dojo.require('esri.arcgis.utils'); dojo.require("esri.map"); dojo.require('esri.dijit.Attribution'); var portal, items; var webmaps = [], map, currentMap = 0; // var i18n; function init() { // 创建portal portal = new esri.arcgis.Portal('http://www.arcgis.com'); // portal加载事件 dojo.connect(portal, 'onLoad', loadPortal); } function loadPortal() { // 查询条件 var params = { q: 'title:Community Basemaps AND owner:esri' }; // 群组查询 portal.queryGroups(params) // 执行函数 .then(function (response) { // 判断结果是否为0 if (response.results.length > 0) { var group = response.results[0]; var queryParams = { q: 'type:"Web Map" -type:"Web Mapping Application"', num: 10 }; // 组内项查询 group.queryItems(queryParams) .then(function (response) { if (response.results.length > 0) { items = response.results; // 创建地图 createMap(items[0]); // 创建缩略图画廊 createThumbs(items); } else { console.log('This group does not contain any public web maps to display.'); // 隐藏 esri.hide(dojo.byId('loadingImg')); } }); } else { // 隐藏 esri.hide(dojo.byId('loadingImg')); } }); } // 创建地图 function createMap(item) { var mapDeferred = esri.arcgis.utils.createMap(item.id, dojo.create('div', { id: item.id }, dojo.byId('mainMap')), { mapOptions: { showAttribution: true, slider: false } }); // 设置地图信息 mapDeferred.then(function (response) { map = response.map; map.id = item.id; map.title = item.title; map.owner = item.owner; map.snippet = item.snippet; webmaps[currentMap] = map; // 更新地图 updateDetails(map); // 隐藏地图 esri.hide(dojo.byId('loadingImg')); }, function (error) { if (map) { map.destroy(); dojo.destroy(map.container); getNext(); } }); } // 创建缩略图 function createThumbs(items) { // 创建文档 var frag = document.createDocumentFragment(); dojo.forEach(items, function (item, index) { if (item.id) { // use default image if one is not provided var thumbnail = item.thumbnailUrl || 'https://static.arcgis.com/images/desktopapp.png'; var li = dojo.create('li', { innerHTML: '<img src="' + thumbnail + '"/><p class="ellipsis">' + item.title + '</p>' }, frag); // 添加项目样式 dojo.addClass(li, 'grid_2 gallery_grid'); } // 单击显示隐藏地图 dojo.connect(li, 'onclick', function () { //close the thumbnail panel hideMap(); esri.hide(dojo.byId('thumbnailContainer')); currentMap = index; // 显示地图 showMap(); }); }); // 替换 dojo.place(frag, 'thumbnailList'); } function showMap() { // animate the display of the next map to fade-in // increment the map count div // 根据索引创建地图 var myMap = webmaps[currentMap]; if (myMap && myMap.id) { var node = dojo.byId(myMap.id); esri.show(node); updateDetails(myMap); // 淡入 var anim = dojo.fadeIn({ node: node }); anim.play(); } else { // create the map esri.show(dojo.byId('loadingImg')); createMap(items[currentMap]); } } // 更新细节 function updateDetails(item) { dojo.byId('mapTitle') .innerHTML = item.title; dojo.byId('mapOwner') .innerHTML = item.snippet; dojo.byId('mapCount') .innerHTML = dojo.string.substitute( "Map ${page} of ${total}", { page: (currentMap + 1), total: items.length }); } // 淡出前面的地图 function hideMap() { // Fade out the previous map var node = dojo.byId(webmaps[currentMap].id); esri.hide(node); dojo.byId('mapTitle').innerHTML = ''; dojo.byId('mapOwner').innerHTML = ''; dojo.byId('mapCount').innerHTML = ''; // 淡出动画 var anim = dojo.fadeOut({ node: node }); anim.play(); } function getNext() { // hide the existing map hideMap(); (currentMap >= -1 && currentMap < (items.length - 1)) ? currentMap += 1 : currentMap = 0; showMap(); } function getPrevious() { hideMap(); (currentMap <= items.length && currentMap > 0) ? currentMap -= 1 : currentMap = items.length - 1; showMap(); } // 切换画廊 function toggleGallery() { var tc = dojo.byId('thumbnailContainer'); tc.style.display === 'none' ? esri.show(tc) : esri.hide(tc); } dojo.ready(init); </script>
    </head>
    
    <body>
    	<div class='container_12'>
    		<div id='mapSection' class='grid_12 rounded'>
      			<div id='mainMap' >
     				<div id='thumbnailContainer' class='gallery-thumbs-container' style='display:none;'>
    					<div id='thumbnailList' class='container_12 gallery-thumbs-list'></div>
    	 			</div>
         			<img id="loadingImg" alt="" src="images/loading.gif" style="position:absolute; right:50%; top:50%; z-index:100;display:none;"/>                
        			<div class="gallery-nav">
            			<div class="gallery-nav-right" onclick='getNext();'></div>
            			<div class="gallery-nav-left" onclick='getPrevious();'></div>
        			</div>
      			</div>
      		</div>
      
      		<div class='clear' ></div>   
      		<div id='detailsSection' class='grid_12 rounded'>
      			<div class='grid_9 alpha'>
        			<div class='pod' style='padding-left:10px;'>
          				<div id='mapTitle' class='title' ></div>
          				<div class='subtitle' id='mapOwner'></div>
        			</div>
      			</div>
    
      			<div class='grid_3 omega'>
        			<div class='pod'>
          				<div id='mapCount' class='subtitle'></div>
        			</div>
      			</div>
          		<div>
             		<div id='thumbs' class='gallery-thumb' onclick='toggleGallery();'></div>
      			</div> 
      		</div>
    
    	</div>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/bc02231cadd94ebda67834eed2249202.png