保存网络场景
这个示例演示了如何保存一个网络场景到 ArcGIS for Portal item （要么创建一个新的 item，要么覆盖一个已经存在的 item）。
保存网络场景很容易。只需要一个有效的 Portal 即可。
保存到一个新的 item
新建一个空的 WebScene 实例和 用来保存场景的 Portal 。加载 Portal 将会触发用户认证，如果成功则 item 会被保存到 Portal 中。
/************************************************************
* 新建一个空的 WebScene 实例
* 一个空的 WebScene 实例至少必须定义 basemap 属性
************************************************************/
var scene = new WebScene({
basemap: "topo"
});
/************************************************************
* 新建一个 Potal 实例并立刻请求用户认证
************************************************************/
var portal = new Portal({
authMode: "immediate"
});
/************************************************************
* 加载 Portal 将会触发用户认证，如果成功则 item 会被保存到 Portal 中
************************************************************/
portal.load().then(function(){
scene.saveAs({
title: "Empty WebScene",
portal: portal
});
});
覆盖一个已经存在的 item
新建一个 WebScene 实例并设置 Portal item ID 。加载 Portal 将会触发用户认证，如果成功则 item 会被保存到 Portal 中。
/************************************************************
* 新建一个 WebScene 实例. WebScene 应该引用 PortalItem ID
* 这个 ID 代表保存在 argcis.com 或者内置门户网中的 网络场景
************************************************************/
var scene = new WebScene({
portalItem: {
id: "3a9976baef9240ab8645ee25c7e9c096"
}
});
/************************************************************
* 新建一个 Portal 实例并立刻请求用户认证
************************************************************/
var portal = new Portal({
authMode: "immediate"
});
/************************************************************
* 加载 Portal 将会触发用户认证，如果成功则 item 会被保存到 Portal 中
************************************************************/
scene.load().then(function(){
portal.load().then(function(){
scene.portalItem.title = "Modified WebScene";
scene.portalItem.portal = portal;
scene.save();
});
})
程序完整源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Save a web scene - 4.5</title>
<link rel="stylesheet" href="https://raw.githubusercontent.com/Esri/calcite-bootstrap/gh-pages/styles/calcite-bootstrap.css">
<!-- 用于授权弹窗的主题-->
<link rel="stylesheet" href="https://js.arcgis.com/4.5/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
<script src="https://js.arcgis.com/4.5/"></script>
<script>
require([
"esri/identity/OAuthInfo",
"esri/identity/IdentityManager",
"esri/views/SceneView",
"esri/WebScene",
"dojo/dom",
"dojo/on",
"dojo/domReady!"
], function(
OAuthInfo, esriId, SceneView, WebScene, dom, on
) {
// 注册认证信息
var info = new OAuthInfo({
// Swap this ID out with a registered application ID
appId: "q244Lb8gDRgWQ8hM",
// 如果要使用自己的 Portal，你可以取消注释下一行代码
// portalUrl: "https://<host>:<port>/arcgis"
// 取消注释下一行，可以防止用户的登录状态与具有相同authNamespace值的同一域中的其他应用程序共享。
// authNamespace: "portal_oauth_inline",
popup: true
});
esriId.registerOAuthInfos([info]);
/************************************************************
* 创建 WebScene 实例
************************************************************/
var scene = new WebScene({
portalItem: {
id: "90e3c30bdbbe4886a94f75c2cdd7edce"
}
});
/************************************************************
* 新建 SceneView 实例
************************************************************/
var view = new SceneView({
map: scene,
container: "viewDiv",
padding: {
top: 40
}
});
view.then(function() {
// 场景加载完成时，显示标题
var sidebar = dom.byId("sidebarDiv");
var title = sidebar.getElementsByTagName("input")[0];
var save = sidebar.getElementsByTagName("input")[1];
title.value = "WebScene Saving Sample";
save.disabled = false;
var overlay = dom.byId("overlayDiv");
var ok = overlay.getElementsByTagName("input")[0];
function statusMessage(head, info) {
(overlay.getElementsByClassName("head")[0]).innerHTML = head;
(overlay.getElementsByClassName("info")[0]).innerHTML = info;
overlay.style.visibility = "visible";
}
on(ok, "click", function() {
overlay.style.visibility = "hidden";
});
on(save, "click", function() {
var item = {
title: title.value,
};
// 更新场景属性，这一句应该在保存场景之前调用
scene.updateFrom(view);
scene.saveAs(item)
// 保存成功
.then(function(item) {
// 链接到新建的 item
var itemPageUrl = item.portal.url +
"/home/item.html?id=" + item.id;
var link = "<a target=\"_blank\" href=\"" +
itemPageUrl + "\">" +
title.value + "</a>";
statusMessage("Save Webscene",
"Successfully saved as <i>" + link +
"</i>");
})
// 保存出错
.otherwise(function(err) {
statusMessage("Save Webscene", "Error " + err);
});
});
});
});
</script>
<style>
html,
body {
padding: 0;
margin: 0 !important;
height: 100%;
width: 100%;
}
#sidebarDiv {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 300px;
}
#overlayDiv {
z-index: 1;
position: absolute;
margin: auto auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 400px;
height: 230px;
padding: 10px;
background-color: white;
border: 1px solid grey;
visibility: hidden;
}
#viewDiv {
position: absolute;
right: 0;
left: 300px;
top: 0;
bottom: 0;
}
.head,
.info {
margin: 0 auto;
width: 100%;
padding: 20px;
}
.info {
font-size: 75%;
font-weight: 200;
}
input[type="button"] {
margin: 20px;
}
input[type="text"] {
width: 100%;
}
h6 {
margin: 0 !important;
}
</style>
</head>
<body class="claro">
<div id="sidebarDiv">
<label class="head">Save Webscene</label>
<label class="info">Title:
<input type="text">
</label>
<input type="button" value="Save" disabled>
</div>
<div id="overlayDiv">
<label class="head"></label>
<label class="info"></label>
<input type="button" value="Ok">
</div>
<div id="viewDiv"></div>
</body>
</html>
程序执行效果：
沙箱地址：https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=webscene-save
（完）