ImageryTileLayer 简介
此示例显示如何将 ImageryTileLayer 的实例添加到 MapView 中的 地图 。本例中的 ImageryTileLayer 包含世界切片高程数据。在图层上设置 destination-in 复合 混合模式 。这个混合模式掩盖了背景图层(在本例中是世界图像切片图层)的内容，这两个图层的内容重叠。其他所有内容都从结果中删除。混合的结果显示了世界上的高海拔地区。
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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Intro to ImageryTileLayer | 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%;
}
#rendererDiv {
padding: 10px;
width: 240px;
}
.slider {
height: 40px;
width: 100%;
background-color: transparent;
}
</style>
<script>
require([
"geoscene/Map",
"geoscene/views/MapView",
"geoscene/layers/GroupLayer",
"geoscene/layers/ImageryTileLayer",
"geoscene/layers/TileLayer",
"geoscene/renderers/RasterStretchRenderer",
"geoscene/widgets/Slider",
"geoscene/widgets/BasemapToggle",
"geoscene/widgets/LayerList"
], (
Map,
MapView,
GroupLayer, ImageryTileLayer, TileLayer,
RasterStretchRenderer,
Slider,
BasemapToggle, LayerList
) => (async () => {
// initial stretch type for the rasterStretchRenderer
let stretchType = "min-max";
const url =
"https://elevation3d.geoscene.cn/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer";
// create a ImageryTileLayer from tiled elevation service
const layer = new ImageryTileLayer({
url: url,
title: "World Elevation ImageryTileLayer",
blendMode: "destination-in"
});
await layer.load();
layer.renderer = {
type: "raster-stretch",
stretchType: "min-max",
statistics: [layer.rasterInfo.statistics[0]],
numberOfStandardDeviations: 1,
colorRamp: {
type: "algorithmic",
fromColor: [0,0,0,0],
toColor: [0,0,0,1]
}
};
// Create a group layer containing the imagery tile layer and a tile layer
// this group layer is used to isolate the destination-in blendMode from the
// rest of the map.
const groupLayer = new GroupLayer({
title: "Group Layer",
layers: [
new TileLayer({
url: "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer",
listMode: "hide-children"
}),
layer
]
});
const map = new Map({
basemap: "gray-vector",
layers: [ groupLayer ]
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 4,
center: [84, 31],
constraints: {
snapToZoom: false
}
});
view.ui.add(new LayerList({
view,
listItemCreatedFunction(event) {
if (event.item.layer === layer) {
document.getElementById("rendererDiv").style.display = "block";
event.item.panel = {
content: document.getElementById("rendererDiv"),
open: true,
className: "esri-icon-maps"
}
}
if (event.item.layer === groupLayer) {
event.item.open = true;
}
}
}), "top-right")
// This function is called when the layer view is loaded
// or when user changes the renderer settings from the UI
function updateRenderer() {
// clone the layer renderer
// layer's renderer needs to be cloned if it changes at runtime
const renderer = layer.renderer.clone();
renderer.colorRamp = {
type: "algorithmic",
fromColor: [0,0,0,0],
toColor: [0,0,0,1]
}
const bandStat = layer.rasterInfo.statistics[0];
renderer.stretchType = stretchType;
switch (stretchType) {
case "min-max":
renderer.statistics = [
{
min: valueSlider.values[0],
max: valueSlider.values[1],
avg: bandStat.avg,
stdev: bandStat.stddev
}
];
break;
case "standard-deviation":
renderer.numberOfStandardDeviations = valueSlider.values[0];
renderer.statistics = [bandStat];
break;
}
// apply the cloned renderer back to the layer's renderer
// changes will be immediate
layer.renderer = renderer;
}
const sliderLabel = document.getElementById("sliderLabel");
const stretchTypeSelect = document.getElementById("stretchType");
// listen to change event on stretchType dropdown
stretchTypeSelect.addEventListener("change", function () {
stretchType = stretchTypeSelect.value;
changeSliderValues(stretchType);
});
// This function is called when user selects a stretch type
// from the dropdown. It sets up raster stretch renderer
// parameters corresponding to the selected stretch renderer
function changeSliderValues(stretchType) {
sliderLabel.innerHTML = `${stretchType} value:`;
switch (stretchType) {
case "min-max":
// code block
valueSlider.max = 5000;
valueSlider.min = 0;
valueSlider.steps = 10;
valueSlider.values = [120, 3068];
break;
case "standard-deviation":
valueSlider.min = 1;
valueSlider.max = 3;
valueSlider.steps = 1;
valueSlider.values = [1];
break;
}
updateRenderer();
}
// set up a new slider to change numeric values
// corresponding to the stretch renderer parameters
const valueSlider = new Slider({
container: "value-slider",
min: 0,
max: 5000,
values: [120, 3068],
steps: 10,
snapOnClickEnabled: false,
visibleElements: {
labels: true,
rangeLabels: true
}
});
valueSlider.on(["thumb-change", "thumb-drag"], updateRenderer);
view.ui.add(new BasemapToggle({
view,
nextBasemap: "geoscene-blue"
}),
"bottom-left");
window.toggleBlendMode = (event) => {
layer.blendMode = event.target.checked ? "destination-in" : "normal";
}
})());
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="rendererDiv" class="geoscene-widget">
<h3 class="esri-widget__heading">Stretch Rendering Parameters</h3>
<label class="esri-feature-form__label">Select stretch type</label>
<select id="stretchType" class="esri-input esri-select">
<option value="min-max" selected>min-max</option>
<option value="standard-deviation">standard deviation</option>
</select>
<br />
<label id="sliderLabel" class="esri-feature-form__label">min-max value:</label>
<div id="value-slider" class="slider"></div>
<input type="checkbox" checked onclick="toggleBlendMode(event)" />
<label>Toggle blendMode</label>
</div>
</body>
</html>然后添加一个 GroupLayer 和 World Imagery TileLayer ，将 ImageryTileLayer 上的混合效果与地图的其他部分隔离开来。
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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Intro to ImageryTileLayer | 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%;
}
#rendererDiv {
padding: 10px;
width: 240px;
}
.slider {
height: 40px;
width: 100%;
background-color: transparent;
}
</style>
<script>
require([
"geoscene/Map",
"geoscene/views/MapView",
"geoscene/layers/GroupLayer",
"geoscene/layers/ImageryTileLayer",
"geoscene/layers/TileLayer",
"geoscene/renderers/RasterStretchRenderer",
"geoscene/widgets/Slider",
"geoscene/widgets/BasemapToggle",
"geoscene/widgets/LayerList"
], (
Map,
MapView,
GroupLayer, ImageryTileLayer, TileLayer,
RasterStretchRenderer,
Slider,
BasemapToggle, LayerList
) => (async () => {
// initial stretch type for the rasterStretchRenderer
let stretchType = "min-max";
const url =
"https://elevation3d.geoscene.cn/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer";
// create a ImageryTileLayer from tiled elevation service
const layer = new ImageryTileLayer({
url: url,
title: "World Elevation ImageryTileLayer",
blendMode: "destination-in"
});
await layer.load();
layer.renderer = {
type: "raster-stretch",
stretchType: "min-max",
statistics: [layer.rasterInfo.statistics[0]],
numberOfStandardDeviations: 1,
colorRamp: {
type: "algorithmic",
fromColor: [0,0,0,0],
toColor: [0,0,0,1]
}
};
// Create a group layer containing the imagery tile layer and a tile layer
// this group layer is used to isolate the destination-in blendMode from the
// rest of the map.
const groupLayer = new GroupLayer({
title: "Group Layer",
layers: [
new TileLayer({
url: "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer",
listMode: "hide-children"
}),
layer
]
});
const map = new Map({
basemap: "gray-vector",
layers: [ groupLayer ]
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 4,
center: [84, 31],
constraints: {
snapToZoom: false
}
});
view.ui.add(new LayerList({
view,
listItemCreatedFunction(event) {
if (event.item.layer === layer) {
document.getElementById("rendererDiv").style.display = "block";
event.item.panel = {
content: document.getElementById("rendererDiv"),
open: true,
className: "esri-icon-maps"
}
}
if (event.item.layer === groupLayer) {
event.item.open = true;
}
}
}), "top-right")
// This function is called when the layer view is loaded
// or when user changes the renderer settings from the UI
function updateRenderer() {
// clone the layer renderer
// layer's renderer needs to be cloned if it changes at runtime
const renderer = layer.renderer.clone();
renderer.colorRamp = {
type: "algorithmic",
fromColor: [0,0,0,0],
toColor: [0,0,0,1]
}
const bandStat = layer.rasterInfo.statistics[0];
renderer.stretchType = stretchType;
switch (stretchType) {
case "min-max":
renderer.statistics = [
{
min: valueSlider.values[0],
max: valueSlider.values[1],
avg: bandStat.avg,
stdev: bandStat.stddev
}
];
break;
case "standard-deviation":
renderer.numberOfStandardDeviations = valueSlider.values[0];
renderer.statistics = [bandStat];
break;
}
// apply the cloned renderer back to the layer's renderer
// changes will be immediate
layer.renderer = renderer;
}
const sliderLabel = document.getElementById("sliderLabel");
const stretchTypeSelect = document.getElementById("stretchType");
// listen to change event on stretchType dropdown
stretchTypeSelect.addEventListener("change", function () {
stretchType = stretchTypeSelect.value;
changeSliderValues(stretchType);
});
// This function is called when user selects a stretch type
// from the dropdown. It sets up raster stretch renderer
// parameters corresponding to the selected stretch renderer
function changeSliderValues(stretchType) {
sliderLabel.innerHTML = `${stretchType} value:`;
switch (stretchType) {
case "min-max":
// code block
valueSlider.max = 5000;
valueSlider.min = 0;
valueSlider.steps = 10;
valueSlider.values = [120, 3068];
break;
case "standard-deviation":
valueSlider.min = 1;
valueSlider.max = 3;
valueSlider.steps = 1;
valueSlider.values = [1];
break;
}
updateRenderer();
}
// set up a new slider to change numeric values
// corresponding to the stretch renderer parameters
const valueSlider = new Slider({
container: "value-slider",
min: 0,
max: 5000,
values: [120, 3068],
steps: 10,
snapOnClickEnabled: false,
visibleElements: {
labels: true,
rangeLabels: true
}
});
valueSlider.on(["thumb-change", "thumb-drag"], updateRenderer);
view.ui.add(new BasemapToggle({
view,
nextBasemap: "geoscene-blue"
}),
"bottom-left");
window.toggleBlendMode = (event) => {
layer.blendMode = event.target.checked ? "destination-in" : "normal";
}
})());
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="rendererDiv" class="geoscene-widget">
<h3 class="esri-widget__heading">Stretch Rendering Parameters</h3>
<label class="esri-feature-form__label">Select stretch type</label>
<select id="stretchType" class="esri-input esri-select">
<option value="min-max" selected>min-max</option>
<option value="standard-deviation">standard deviation</option>
</select>
<br />
<label id="sliderLabel" class="esri-feature-form__label">min-max value:</label>
<div id="value-slider" class="slider"></div>
<input type="checkbox" checked onclick="toggleBlendMode(event)" />
<label>Toggle blendMode</label>
</div>
</body>
</html>该示例还展示了如何通过更改在图像切片图层上设置的 RasterStretchRenderer 的参数来利用客户端渲染。用户可以在运行时更新 RasterStretchRenderer 参数，并立即看到变化。要更改渲染器属性，您必须首先克隆渲染器，然后更改属性，然后将新的渲染器设置回图层上。每当用户通过与用户界面交互而更改渲染器属性时，示例中的 updateRenderer 函数就会被调用。
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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Intro to ImageryTileLayer | 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%;
}
#rendererDiv {
padding: 10px;
width: 240px;
}
.slider {
height: 40px;
width: 100%;
background-color: transparent;
}
</style>
<script>
require([
"geoscene/Map",
"geoscene/views/MapView",
"geoscene/layers/GroupLayer",
"geoscene/layers/ImageryTileLayer",
"geoscene/layers/TileLayer",
"geoscene/renderers/RasterStretchRenderer",
"geoscene/widgets/Slider",
"geoscene/widgets/BasemapToggle",
"geoscene/widgets/LayerList"
], (
Map,
MapView,
GroupLayer, ImageryTileLayer, TileLayer,
RasterStretchRenderer,
Slider,
BasemapToggle, LayerList
) => (async () => {
// initial stretch type for the rasterStretchRenderer
let stretchType = "min-max";
const url =
"https://elevation3d.geoscene.cn/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer";
// create a ImageryTileLayer from tiled elevation service
const layer = new ImageryTileLayer({
url: url,
title: "World Elevation ImageryTileLayer",
blendMode: "destination-in"
});
await layer.load();
layer.renderer = {
type: "raster-stretch",
stretchType: "min-max",
statistics: [layer.rasterInfo.statistics[0]],
numberOfStandardDeviations: 1,
colorRamp: {
type: "algorithmic",
fromColor: [0,0,0,0],
toColor: [0,0,0,1]
}
};
// Create a group layer containing the imagery tile layer and a tile layer
// this group layer is used to isolate the destination-in blendMode from the
// rest of the map.
const groupLayer = new GroupLayer({
title: "Group Layer",
layers: [
new TileLayer({
url: "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer",
listMode: "hide-children"
}),
layer
]
});
const map = new Map({
basemap: "gray-vector",
layers: [ groupLayer ]
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 4,
center: [84, 31],
constraints: {
snapToZoom: false
}
});
view.ui.add(new LayerList({
view,
listItemCreatedFunction(event) {
if (event.item.layer === layer) {
document.getElementById("rendererDiv").style.display = "block";
event.item.panel = {
content: document.getElementById("rendererDiv"),
open: true,
className: "esri-icon-maps"
}
}
if (event.item.layer === groupLayer) {
event.item.open = true;
}
}
}), "top-right")
// This function is called when the layer view is loaded
// or when user changes the renderer settings from the UI
function updateRenderer() {
// clone the layer renderer
// layer's renderer needs to be cloned if it changes at runtime
const renderer = layer.renderer.clone();
renderer.colorRamp = {
type: "algorithmic",
fromColor: [0,0,0,0],
toColor: [0,0,0,1]
}
const bandStat = layer.rasterInfo.statistics[0];
renderer.stretchType = stretchType;
switch (stretchType) {
case "min-max":
renderer.statistics = [
{
min: valueSlider.values[0],
max: valueSlider.values[1],
avg: bandStat.avg,
stdev: bandStat.stddev
}
];
break;
case "standard-deviation":
renderer.numberOfStandardDeviations = valueSlider.values[0];
renderer.statistics = [bandStat];
break;
}
// apply the cloned renderer back to the layer's renderer
// changes will be immediate
layer.renderer = renderer;
}
const sliderLabel = document.getElementById("sliderLabel");
const stretchTypeSelect = document.getElementById("stretchType");
// listen to change event on stretchType dropdown
stretchTypeSelect.addEventListener("change", function () {
stretchType = stretchTypeSelect.value;
changeSliderValues(stretchType);
});
// This function is called when user selects a stretch type
// from the dropdown. It sets up raster stretch renderer
// parameters corresponding to the selected stretch renderer
function changeSliderValues(stretchType) {
sliderLabel.innerHTML = `${stretchType} value:`;
switch (stretchType) {
case "min-max":
// code block
valueSlider.max = 5000;
valueSlider.min = 0;
valueSlider.steps = 10;
valueSlider.values = [120, 3068];
break;
case "standard-deviation":
valueSlider.min = 1;
valueSlider.max = 3;
valueSlider.steps = 1;
valueSlider.values = [1];
break;
}
updateRenderer();
}
// set up a new slider to change numeric values
// corresponding to the stretch renderer parameters
const valueSlider = new Slider({
container: "value-slider",
min: 0,
max: 5000,
values: [120, 3068],
steps: 10,
snapOnClickEnabled: false,
visibleElements: {
labels: true,
rangeLabels: true
}
});
valueSlider.on(["thumb-change", "thumb-drag"], updateRenderer);
view.ui.add(new BasemapToggle({
view,
nextBasemap: "geoscene-blue"
}),
"bottom-left");
window.toggleBlendMode = (event) => {
layer.blendMode = event.target.checked ? "destination-in" : "normal";
}
})());
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="rendererDiv" class="geoscene-widget">
<h3 class="esri-widget__heading">Stretch Rendering Parameters</h3>
<label class="esri-feature-form__label">Select stretch type</label>
<select id="stretchType" class="esri-input esri-select">
<option value="min-max" selected>min-max</option>
<option value="standard-deviation">standard deviation</option>
</select>
<br />
<label id="sliderLabel" class="esri-feature-form__label">min-max value:</label>
<div id="value-slider" class="slider"></div>
<input type="checkbox" checked onclick="toggleBlendMode(event)" />
<label>Toggle blendMode</label>
</div>
</body>
</html>