cesium(笔记-2)

运行环境 | cesium 1.58 | webstorm 2018.2.2 | windows 10 pro

Cesium应用程序另一个关键元素是Imagery(图层)。瓦片图集合根据不同的投影方式映射到虚拟的三维数字地球表面。依赖于相机指向地表的方向和距离,Cesium会去请求和渲染不同层级的图层详细信息。
多种图层能够被添加、移除、排序和适应到Cesium中。
Cesium提供了一系列方法用于处理图层,比如颜色自适应,图层叠加融合

支持的图层格式:

1.wms
2.TMS
3.WMTS (with time dynamic imagery)
4.ArcGIS
5.Bing Maps
6.Google Earth
7.Mapbox
8.OpenStreetMap

基本图层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider : Cesium.createWorldImagery({
style : Cesium.IonWorldImageryStyle.AERIAL_WITH_LABELS
}),
baseLayerPicker : false
});

var layers = viewer.scene.imageryLayers;
var blackMarble = layers.addImageryProvider(new Cesium.IonImageryProvider({ assetId: 3812 }));

blackMarble.alpha = 0.5;

blackMarble.brightness = 2.0;

layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
url : '../images/Cesium_Logo_overlay.png',
rectangle : Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75)
}));

自适应图层

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
var viewer = new Cesium.Viewer('cesiumContainer');
var imageryLayers = viewer.imageryLayers;

// The viewModel tracks the state of our mini application.
var viewModel = {
brightness: 0,
contrast: 0,
hue: 0,
saturation: 0,
gamma: 0
};
// Convert the viewModel members into knockout observables.
Cesium.knockout.track(viewModel);

// Bind the viewModel to the DOM elements of the UI that call for it.
var toolbar = document.getElementById('toolbar');
Cesium.knockout.applyBindings(viewModel, toolbar);

// Make the active imagery layer a subscriber of the viewModel.
function subscribeLayerParameter(name) {
Cesium.knockout.getObservable(viewModel, name).subscribe(
function(newValue) {
if (imageryLayers.length > 0) {
var layer = imageryLayers.get(0);
layer[name] = newValue;
}
}
);
}
subscribeLayerParameter('brightness');
subscribeLayerParameter('contrast');
subscribeLayerParameter('hue');
subscribeLayerParameter('saturation');
subscribeLayerParameter('gamma');

// Make the viewModel react to base layer changes.
function updateViewModel() {
if (imageryLayers.length > 0) {
var layer = imageryLayers.get(0);
viewModel.brightness = layer.brightness;
viewModel.contrast = layer.contrast;
viewModel.hue = layer.hue;
viewModel.saturation = layer.saturation;
viewModel.gamma = layer.gamma;
}
}
imageryLayers.layerAdded.addEventListener(updateViewModel);
imageryLayers.layerRemoved.addEventListener(updateViewModel);
imageryLayers.layerMoved.addEventListener(updateViewModel);
updateViewModel();

控制调整图层顺序

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
var viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker : false
});
var imageryLayers = viewer.imageryLayers;

var viewModel = {
layers : [],
baseLayers : [],
upLayer : null,
downLayer : null,
selectedLayer : null,
isSelectableLayer : function(layer) {
return this.baseLayers.indexOf(layer) >= 0;
},
raise : function(layer, index) {
imageryLayers.raise(layer);
viewModel.upLayer = layer;
viewModel.downLayer = viewModel.layers[Math.max(0, index - 1)];
updateLayerList();
window.setTimeout(function() {
viewModel.upLayer = viewModel.downLayer = null;
}, 10);
},
lower : function(layer, index) {
imageryLayers.lower(layer);
viewModel.upLayer = viewModel.layers[Math.min(viewModel.layers.length - 1, index + 1)];
viewModel.downLayer = layer;
updateLayerList();
window.setTimeout(function() {
viewModel.upLayer = viewModel.downLayer = null;
}, 10);
},
canRaise : function(layerIndex) {
return layerIndex > 0;
},
canLower : function(layerIndex) {
return layerIndex >= 0 && layerIndex < imageryLayers.length - 1;
}
};
var baseLayers = viewModel.baseLayers;

Cesium.knockout.track(viewModel);

function setupLayers() {
// Create all the base layers that this example will support.
// These base layers aren't really special. It's possible to have multiple of them
// enabled at once, just like the other layers, but it doesn't make much sense because
// all of these layers cover the entire globe and are opaque.
addBaseLayerOption(
'Bing Maps Aerial',
undefined); // the current base layer
addBaseLayerOption(
'Bing Maps Road',
new Cesium.BingMapsImageryProvider({
url : 'https://dev.virtualearth.net',
mapStyle : Cesium.BingMapsStyle.ROAD
}));
addBaseLayerOption(
'ArcGIS World Street Maps',
new Cesium.ArcGisMapServerImageryProvider({
url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
}));
addBaseLayerOption(
'OpenStreetMaps',
new Cesium.OpenStreetMapImageryProvider());
addBaseLayerOption(
'Stamen Maps',
new Cesium.OpenStreetMapImageryProvider({
url : 'https://stamen-tiles.a.ssl.fastly.net/watercolor/',
fileExtension : 'jpg',
credit : 'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.'
}));
addBaseLayerOption(
'Natural Earth II (local)',
new Cesium.TileMapServiceImageryProvider({
url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
}));
addBaseLayerOption(
'USGS Shaded Relief (via WMTS)',
new Cesium.WebMapTileServiceImageryProvider({
url : 'http://basemap.nationalmap.gov/arcgis/rest/services/USGSShadedReliefOnly/MapServer/WMTS',
layer : 'USGSShadedReliefOnly',
style : 'default',
format : 'image/jpeg',
tileMatrixSetID : 'default028mm',
maximumLevel : 19,
credit : 'U. S. Geological Survey'
}));

// Create the additional layers
addAdditionalLayerOption(
'United States GOES Infrared',
new Cesium.WebMapServiceImageryProvider({
url : 'https://mesonet.agron.iastate.edu/cgi-bin/wms/goes/conus_ir.cgi?',
layers : 'goes_conus_ir',
credit : 'Infrared data courtesy Iowa Environmental Mesonet',
parameters : {
transparent : 'true',
format : 'image/png'
}
}));
addAdditionalLayerOption(
'United States Weather Radar',
new Cesium.WebMapServiceImageryProvider({
url : 'https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi?',
layers : 'nexrad-n0r',
credit : 'Radar data courtesy Iowa Environmental Mesonet',
parameters : {
transparent : 'true',
format : 'image/png'
}
}));
addAdditionalLayerOption(
'TileMapService Image',
new Cesium.TileMapServiceImageryProvider({
url : '../images/cesium_maptiler/Cesium_Logo_Color'
}),
0.2);
addAdditionalLayerOption(
'Single Image',
new Cesium.SingleTileImageryProvider({
url : '../images/Cesium_Logo_overlay.png',
rectangle : Cesium.Rectangle.fromDegrees(-115.0, 38.0, -107, 39.75)
}),
1.0);
addAdditionalLayerOption(
'Grid',
new Cesium.GridImageryProvider(), 1.0, false);
addAdditionalLayerOption(
'Tile Coordinates',
new Cesium.TileCoordinatesImageryProvider(), 1.0, false);
}

function addBaseLayerOption(name, imageryProvider) {
var layer;
if (typeof imageryProvider === 'undefined') {
layer = imageryLayers.get(0);
viewModel.selectedLayer = layer;
} else {
layer = new Cesium.ImageryLayer(imageryProvider);
}

layer.name = name;
baseLayers.push(layer);
}

function addAdditionalLayerOption(name, imageryProvider, alpha, show) {
var layer = imageryLayers.addImageryProvider(imageryProvider);
layer.alpha = Cesium.defaultValue(alpha, 0.5);
layer.show = Cesium.defaultValue(show, true);
layer.name = name;
Cesium.knockout.track(layer, ['alpha', 'show', 'name']);
}

function updateLayerList() {
var numLayers = imageryLayers.length;
viewModel.layers.splice(0, viewModel.layers.length);
for (var i = numLayers - 1; i >= 0; --i) {
viewModel.layers.push(imageryLayers.get(i));
}
}

setupLayers();
updateLayerList();

//Bind the viewModel to the DOM elements of the UI that call for it.
var toolbar = document.getElementById('toolbar');
Cesium.knockout.applyBindings(viewModel, toolbar);

Cesium.knockout.getObservable(viewModel, 'selectedLayer').subscribe(function(baseLayer) {
// Handle changes to the drop-down base layer selector.
var activeLayerIndex = 0;
var numLayers = viewModel.layers.length;
for (var i = 0; i < numLayers; ++i) {
if (viewModel.isSelectableLayer(viewModel.layers[i])) {
activeLayerIndex = i;
break;
}
}
var activeLayer = viewModel.layers[activeLayerIndex];
var show = activeLayer.show;
var alpha = activeLayer.alpha;
imageryLayers.remove(activeLayer, false);
imageryLayers.add(baseLayer, numLayers - activeLayerIndex - 1);
baseLayer.show = show;
baseLayer.alpha = alpha;
updateLayerList();
});
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
<style>
@import url(../templates/bucket.css);

#toolbar {
background: rgba(42, 42, 42, 0.8);
padding: 4px;
border-radius: 4px;
}

#toolbar input {
vertical-align: middle;
padding-top: 2px;
padding-bottom: 2px;
}

#toolbar table tr {
transform: translateY(0);
transition: transform 0.4s ease-out;
}

#toolbar table tr.up {
transform: translateY(33px);
transition: none;
}

#toolbar table tr.down {
transform: translateY(-33px);
transition: none;
}
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
<table>
<tbody data-bind="foreach: layers">
<tr data-bind="css: { up: $parent.upLayer === $data, down: $parent.downLayer === $data }">
<td><input type="checkbox" data-bind="checked: show"></td>
<td>
<span data-bind="text: name, visible: !$parent.isSelectableLayer($data)"></span>
<select data-bind="visible: $parent.isSelectableLayer($data), options: $parent.baseLayers, optionsText: 'name', value: $parent.selectedLayer"></select>
</td>
<td>
<input type="range" min="0" max="1" step="0.01" data-bind="value: alpha, valueUpdate: 'input'">
</td>
<td>
<button type="button" class="cesium-button" data-bind="click: function() { $parent.raise($data, $index()); }, visible: $parent.canRaise($index())">

</button>
</td>
<td>
<button type="button" class="cesium-button" data-bind="click: function() { $parent.lower($data, $index()); }, visible: $parent.canLower($index())">

</button>
</td>
</tr>
</tbody>
</table>
</div>

切割图层(卷帘)

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
var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
}),
baseLayerPicker : false,
infoBox : false
});

var layers = viewer.imageryLayers;
var earthAtNight = layers.addImageryProvider(new Cesium.IonImageryProvider({ assetId: 3812 }));
earthAtNight.splitDirection = Cesium.ImagerySplitDirection.LEFT; // Only show to the left of the slider.

// Sync the position of the slider with the split position
var slider = document.getElementById('slider');
viewer.scene.imagerySplitPosition = (slider.offsetLeft) / slider.parentElement.offsetWidth;

var handler = new Cesium.ScreenSpaceEventHandler(slider);

var moveActive = false;

function move(movement) {
if(!moveActive) {
return;
}

var relativeOffset = movement.endPosition.x ;
var splitPosition = (slider.offsetLeft + relativeOffset) / slider.parentElement.offsetWidth;
slider.style.left = 100.0 * splitPosition + '%';
viewer.scene.imagerySplitPosition = splitPosition;
}

handler.setInputAction(function() {
moveActive = true;
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
handler.setInputAction(function() {
moveActive = true;
}, Cesium.ScreenSpaceEventType.PINCH_START);

handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);

handler.setInputAction(function() {
moveActive = false;
}, Cesium.ScreenSpaceEventType.LEFT_UP);
handler.setInputAction(function() {
moveActive = false;
}, Cesium.ScreenSpaceEventType.PINCH_END);
本文结束感谢您的阅读,本文原创–支持原创
顺便打点赏吧~ 有问题请联系我--strivedeer@163.com