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 = 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">
<!--[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/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">
<!--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() {
// 创建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>