保存 web 场景
此示例演示如何通过创建新项目或覆盖已从 GeoScene Portal 项目加载的现有项目将 WebScene 保存到 GeoScene Portal 项目。
保存到一个新项目
创建一个新的空 WebScene 实例和一个应该保存 WebScene 的门户实例。 加载门户将触发用户身份验证，如果成功，项目将保存到给定的门户。
Load a basic webscene
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!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 | Sample | GeoScene API for JavaScript 4.22</title>
<link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css" />
<script src="https://js.geoscene.cn/4.23/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#sidebarDiv {
width: 240px;
padding: 10px;
height: 200px;
}
#overlayDiv {
z-index: 1;
position: absolute;
margin: auto auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 280px;
height: 180px;
padding: 10px;
background-color: white;
border: 1px solid grey;
visibility: hidden;
}
input[type="text"] {
width: 100%;
}
</style>
<script>
require([
"geoscene/views/SceneView",
"geoscene/WebScene",
"geoscene/widgets/BasemapGallery",
"geoscene/widgets/Expand"
], (SceneView, WebScene, BasemapGallery, Expand) => {
/************************************************************
* Creates a new WebScene instance. A WebScene can reference
* a PortalItem ID that represents a WebScene saved to
* arcgis.com or an on-premise portal.
*
* To load a WebScene from an on-premise portal, set the portal
* url with geosceneConfig.portalUrl (see above).
************************************************************/
const scene = new WebScene({
portalItem: {
// autocasts as new PortalItem()
id: "90e3c30bdbbe4886a94f75c2cdd7edce"
}
});
/************************************************************
* Set the WebScene instance to the map property in a
* SceneView.
************************************************************/
const view = new SceneView({
map: scene,
container: "viewDiv"
});
// add basemapGallery widgets
view.ui.add(
[
new Expand({
content: new BasemapGallery({
view: view
}),
view: view
})
],
"top-left"
);
view.when(() => {
// When the webscene and view resolve, display the webscene's
// new title in the Div
const title = document.getElementById("webSceneTitle");
const save = document.getElementById("saveWebScene");
save.disabled = false;
save.addEventListener("click", () => {
document.getElementById("saveWebScene").disabled = true;
document.getElementById("saveWebScene").classList.add("esri-button--secondary");
// item automatically casts to a PortalItem instance by saveAs
const item = {
title: title.value
};
// Update properties of the WebScene related to the view.
// This should be called just before saving a webscene.
scene.updateFrom(view).then(() => {
scene
.saveAs(item)
// Saved successfully
.then((item) => {
// link to the newly-created web scene item
const itemPageUrl = item.portal.url + "/home/item.html?id=" + item.id;
const link = '<a target="_blank" href="' + itemPageUrl + '">' + title.value + "</a>";
statusMessage("Save WebScene", "<br> Successfully saved as <i>" + link + "</i>");
})
// Save didn't work correctly
.catch((error) => {
statusMessage("Save WebScene", "<br> Error " + error);
});
});
});
const overlay = document.getElementById("overlayDiv");
const ok = overlay.getElementsByTagName("input")[0];
function statusMessage(head, info) {
document.getElementById("saveWebScene").classList.remove("esri-button--secondary");
document.getElementById("saveWebScene").disabled = false;
document.getElementById("head").innerHTML = head;
document.getElementById("info").innerHTML = info;
overlay.style.visibility = "visible";
}
ok.addEventListener("click", () => {
overlay.style.visibility = "hidden";
});
view.ui.add("sidebarDiv", "top-right");
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="sidebarDiv" class="geoscene-widget">
<h4 class="esri-heading">Save WebScene</h4>
<label class="esri-feature-form__label">Title</label>
<input id="webSceneTitle" type="text" class="esri-input" value="WebScene Saving Sample" /><br /><br />
<input id="saveWebScene" type="button" value="Save" disabled class="geoscene-button" />
</div>
<div id="overlayDiv" class="geoscene-widget">
<h4 class="esri-heading" id="head"></h4>
<label id="info"></label><br /><br />
<input type="button" value="OK" class="geoscene-button" />
</div>
</body>
</html>如果将场景添加到视图中，则只有在场景上更新视图属性后才能保存场景：
Save a webscene
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!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 | Sample | GeoScene API for JavaScript 4.22</title>
<link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css" />
<script src="https://js.geoscene.cn/4.23/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#sidebarDiv {
width: 240px;
padding: 10px;
height: 200px;
}
#overlayDiv {
z-index: 1;
position: absolute;
margin: auto auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 280px;
height: 180px;
padding: 10px;
background-color: white;
border: 1px solid grey;
visibility: hidden;
}
input[type="text"] {
width: 100%;
}
</style>
<script>
require([
"geoscene/views/SceneView",
"geoscene/WebScene",
"geoscene/widgets/BasemapGallery",
"geoscene/widgets/Expand"
], (SceneView, WebScene, BasemapGallery, Expand) => {
/************************************************************
* Creates a new WebScene instance. A WebScene can reference
* a PortalItem ID that represents a WebScene saved to
* arcgis.com or an on-premise portal.
*
* To load a WebScene from an on-premise portal, set the portal
* url with geosceneConfig.portalUrl (see above).
************************************************************/
const scene = new WebScene({
portalItem: {
// autocasts as new PortalItem()
id: "90e3c30bdbbe4886a94f75c2cdd7edce"
}
});
/************************************************************
* Set the WebScene instance to the map property in a
* SceneView.
************************************************************/
const view = new SceneView({
map: scene,
container: "viewDiv"
});
// add basemapGallery widgets
view.ui.add(
[
new Expand({
content: new BasemapGallery({
view: view
}),
view: view
})
],
"top-left"
);
view.when(() => {
// When the webscene and view resolve, display the webscene's
// new title in the Div
const title = document.getElementById("webSceneTitle");
const save = document.getElementById("saveWebScene");
save.disabled = false;
save.addEventListener("click", () => {
document.getElementById("saveWebScene").disabled = true;
document.getElementById("saveWebScene").classList.add("esri-button--secondary");
// item automatically casts to a PortalItem instance by saveAs
const item = {
title: title.value
};
// Update properties of the WebScene related to the view.
// This should be called just before saving a webscene.
scene.updateFrom(view).then(() => {
scene
.saveAs(item)
// Saved successfully
.then((item) => {
// link to the newly-created web scene item
const itemPageUrl = item.portal.url + "/home/item.html?id=" + item.id;
const link = '<a target="_blank" href="' + itemPageUrl + '">' + title.value + "</a>";
statusMessage("Save WebScene", "<br> Successfully saved as <i>" + link + "</i>");
})
// Save didn't work correctly
.catch((error) => {
statusMessage("Save WebScene", "<br> Error " + error);
});
});
});
const overlay = document.getElementById("overlayDiv");
const ok = overlay.getElementsByTagName("input")[0];
function statusMessage(head, info) {
document.getElementById("saveWebScene").classList.remove("esri-button--secondary");
document.getElementById("saveWebScene").disabled = false;
document.getElementById("head").innerHTML = head;
document.getElementById("info").innerHTML = info;
overlay.style.visibility = "visible";
}
ok.addEventListener("click", () => {
overlay.style.visibility = "hidden";
});
view.ui.add("sidebarDiv", "top-right");
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="sidebarDiv" class="geoscene-widget">
<h4 class="esri-heading">Save WebScene</h4>
<label class="esri-feature-form__label">Title</label>
<input id="webSceneTitle" type="text" class="esri-input" value="WebScene Saving Sample" /><br /><br />
<input id="saveWebScene" type="button" value="Save" disabled class="geoscene-button" />
</div>
<div id="overlayDiv" class="geoscene-widget">
<h4 class="esri-heading" id="head"></h4>
<label id="info"></label><br /><br />
<input type="button" value="OK" class="geoscene-button" />
</div>
</body>
</html>覆盖现有项
创建一个新的 WebScene 实例并在 WebScene 的 portalItem 属性中设置门户项目 ID。 加载门户将触发用户身份验证，如果成功，项目将保存到给定的门户。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/************************************************************
* Creates a new WebScene instance. A WebScene can reference
* a PortalItem ID that represents a WebScene saved to
* arcgis.com or an on-premise portal.
************************************************************/
const scene = new WebScene({
portalItem: {
id: "3a9976baef9240ab8645ee25c7e9c096"
}
});
/************************************************************
* Create a new Portal instance and request immediate user
* authentication.
************************************************************/
const portal = new Portal({
authMode: "immediate"
});
/************************************************************
* Loading of either the scene or the portal will trigger
* authentication and once both Promises are resolved, the
* Webscene will be saved thereby overwriting the previously
* loaded PortalItem with any changes that have occurred.
************************************************************/
scene.load().then(() => {
portal.load().then(() => {
scene.portalItem.title = "Modified WebScene";
scene.portalItem.portal = portal;
scene.save();
});
});
要使用从本地门户加载或保存项目，请在 geosceneConfig.portalUrl 中设置门户的 URL 。
请参阅 GeoScene 组织门户 ，了解用于 JavaScript 的 GeoScene API 如何使用门户项目。