地理信息系统（GIS）系列—

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是私有云门户

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"><!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--><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 = trueparser.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};});// 创建 GridgroupGrid = 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 || '';// 创建 divreturn 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"><!--[if !IE]> --><link rel="stylesheet" href="css/fileupload.css"><!-- <![endif]--><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/fakepathname = 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", "${*}");// 定义返回结果为featureLayervar 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">&nbsp;</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"><!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--><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() {// 创建portalportal = 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) {// 判断结果是否为0if (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 providedvar 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="data: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>