具有效果和混合模式的 AnimatedFlowRenderer
此示例演示如何使用带有图层效果和 blendModes 的 AnimatedFlowRenderer 来显示洋流和海面温度数据。
工作原理
通常，AnimatedFlowRenderer 仅以一种纯色显示其流线。要使用 AnimatedFlowRenderer 创建多变量可视化，您可以使用图层混合。在这个应用程序中，我们将混合一个洋流图层（由动画流渲染器可视化，它为我们提供流线）和一个海面温度图层（由 RasterStretchRenderer 可视化，它为我们提供颜色）。当初始化电流图层时，我们给它 destination-in blendMode，这样温度图层只在与电流图层重叠的地方绘制。
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>AnimatedFlowRenderer with effects and blending | Sample | GeoScene API for JavaScript 4.22</title>
<link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/dark/main.css" />
<script src="https://js.geoscene.cn/4.23/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background-color:#4c4c4c;
}
</style>
<script>
require([
"geoscene/Map",
"geoscene/views/MapView",
"geoscene/layers/ImageryTileLayer",
"geoscene/layers/TileLayer",
"geoscene/layers/GroupLayer",
"geoscene/rest/support/MultipartColorRamp",
"geoscene/rest/support/AlgorithmicColorRamp",
"geoscene/Color",
"geoscene/widgets/Legend",
"geoscene/widgets/Fullscreen"
], function (
Map,
MapView,
ImageryTileLayer,
TileLayer,
GroupLayer,
MultipartColorRamp,
AlgorithmicColorRamp,
Color,
Legend,
Fullscreen
) {
// serves as a basemap layer
const spilhausBasemap = new TileLayer({
url: "https://tiles.geoscene.cn/tiles/nGt4QxSblgDfeJn9/arcgis/rest/services/Spilhaus_Vibrant_Basemap/MapServer",
effect: "saturate(10%) brightness(0.3)" // dim brightness to create darker style basemap
});
const colorRamp = new MultipartColorRamp({
colorRamps: [
new AlgorithmicColorRamp({
fromColor: new Color([20, 100, 150, 255]),
toColor: new Color([70, 0, 150, 255])
}),
new AlgorithmicColorRamp({
fromColor: new Color([70, 0, 150, 255]),
toColor: new Color([170, 0, 120, 255])
}),
new AlgorithmicColorRamp({
fromColor: new Color([170, 0, 120, 255]),
toColor: new Color([230, 100, 60, 255])
}),
new AlgorithmicColorRamp({
fromColor: new Color([230, 100, 60, 255]),
toColor: new Color([255, 170, 0, 255])
}),
new AlgorithmicColorRamp({
fromColor: new Color([255, 170, 0, 255]),
toColor: new Color([255, 255, 0, 255])
}),
]
});
// sea surface temperature, visualized with raster stretch renderer
const temperatureLayer = new ImageryTileLayer({
url: "https://tiledimageservices.arcgis.com/jIL9msH9OI208GCb/arcgis/rest/services/HyCOM_Surface_Temperature___Spilhaus/ImageServer",
renderer: {
colorRamp,
"computeGamma": false,
"gamma": [1],
"useGamma": false,
"stretchType": "min-max",
"type": "raster-stretch"
}
});
// ocean currents, visualized with animated flow renderer
const currentsLayer = new ImageryTileLayer({
url: "https://tiledimageservices.arcgis.com/jIL9msH9OI208GCb/arcgis/rest/services/Spilhaus_UV_ocean_currents/ImageServer",
renderer: {
type: "animated-flow", // autocasts to AnimatedFlowRenderer
density: 1,
lineLength: 10, // max length of a streamline will be 10
lineWidth: "2px"
},
blendMode: "destination-in", // temperature layer will only display on top of this layer
});
const groupLayer = new GroupLayer({
effect: "bloom(2, 0.5px, 0.0)", // apply bloom effect to make the colors pop
layers: [temperatureLayer, currentsLayer]
});
const map = new Map({
basemap: {
baseLayers: [spilhausBasemap]
},
layers: [groupLayer]
});
const view = new MapView({
container: "viewDiv",
map: map,
scale: 40000000,
center: [-98, 39]
});
// add legend for temperature layer
const legend = new Legend({
view: view,
layerInfos: [{
layer: temperatureLayer,
title: "Sea surface temperature"
}]
});
view.ui.add(legend, "top-right");
// add fullscreen widget
fullscreen = new Fullscreen({
view: view
});
view.ui.add(fullscreen, "top-left");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>然后，我们将这两个层添加到 GroupLayer。我们将光晕图层效果应用于组图层，以使颜色在深色底图上发光。
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>AnimatedFlowRenderer with effects and blending | Sample | GeoScene API for JavaScript 4.22</title>
<link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/dark/main.css" />
<script src="https://js.geoscene.cn/4.23/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background-color:#4c4c4c;
}
</style>
<script>
require([
"geoscene/Map",
"geoscene/views/MapView",
"geoscene/layers/ImageryTileLayer",
"geoscene/layers/TileLayer",
"geoscene/layers/GroupLayer",
"geoscene/rest/support/MultipartColorRamp",
"geoscene/rest/support/AlgorithmicColorRamp",
"geoscene/Color",
"geoscene/widgets/Legend",
"geoscene/widgets/Fullscreen"
], function (
Map,
MapView,
ImageryTileLayer,
TileLayer,
GroupLayer,
MultipartColorRamp,
AlgorithmicColorRamp,
Color,
Legend,
Fullscreen
) {
// serves as a basemap layer
const spilhausBasemap = new TileLayer({
url: "https://tiles.geoscene.cn/tiles/nGt4QxSblgDfeJn9/arcgis/rest/services/Spilhaus_Vibrant_Basemap/MapServer",
effect: "saturate(10%) brightness(0.3)" // dim brightness to create darker style basemap
});
const colorRamp = new MultipartColorRamp({
colorRamps: [
new AlgorithmicColorRamp({
fromColor: new Color([20, 100, 150, 255]),
toColor: new Color([70, 0, 150, 255])
}),
new AlgorithmicColorRamp({
fromColor: new Color([70, 0, 150, 255]),
toColor: new Color([170, 0, 120, 255])
}),
new AlgorithmicColorRamp({
fromColor: new Color([170, 0, 120, 255]),
toColor: new Color([230, 100, 60, 255])
}),
new AlgorithmicColorRamp({
fromColor: new Color([230, 100, 60, 255]),
toColor: new Color([255, 170, 0, 255])
}),
new AlgorithmicColorRamp({
fromColor: new Color([255, 170, 0, 255]),
toColor: new Color([255, 255, 0, 255])
}),
]
});
// sea surface temperature, visualized with raster stretch renderer
const temperatureLayer = new ImageryTileLayer({
url: "https://tiledimageservices.arcgis.com/jIL9msH9OI208GCb/arcgis/rest/services/HyCOM_Surface_Temperature___Spilhaus/ImageServer",
renderer: {
colorRamp,
"computeGamma": false,
"gamma": [1],
"useGamma": false,
"stretchType": "min-max",
"type": "raster-stretch"
}
});
// ocean currents, visualized with animated flow renderer
const currentsLayer = new ImageryTileLayer({
url: "https://tiledimageservices.arcgis.com/jIL9msH9OI208GCb/arcgis/rest/services/Spilhaus_UV_ocean_currents/ImageServer",
renderer: {
type: "animated-flow", // autocasts to AnimatedFlowRenderer
density: 1,
lineLength: 10, // max length of a streamline will be 10
lineWidth: "2px"
},
blendMode: "destination-in", // temperature layer will only display on top of this layer
});
const groupLayer = new GroupLayer({
effect: "bloom(2, 0.5px, 0.0)", // apply bloom effect to make the colors pop
layers: [temperatureLayer, currentsLayer]
});
const map = new Map({
basemap: {
baseLayers: [spilhausBasemap]
},
layers: [groupLayer]
});
const view = new MapView({
container: "viewDiv",
map: map,
scale: 40000000,
center: [-98, 39]
});
// add legend for temperature layer
const legend = new Legend({
view: view,
layerInfos: [{
layer: temperatureLayer,
title: "Sea surface temperature"
}]
});
view.ui.add(legend, "top-right");
// add fullscreen widget
fullscreen = new Fullscreen({
view: view
});
view.ui.add(fullscreen, "top-left");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>