Skip to content

Commit 2f4eafa

Browse files
shuntershunter
committed
Merge pull request #1607 from AnalyticalGraphicsInc/baseLayerPicker-terrain
Extend BaseLayerPicker to support terrain
2 parents debca9f + 64c19bd commit 2f4eafa

15 files changed

+490
-195
lines changed

‎CHANGES.md

+9
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,15 @@ Beta Releases
2323
* `TilingScheme.extentToNativeRectangle` -> `TilingScheme.rectangleToNativeRectangle`
2424
* `TilingScheme.tileXYToNativeExtent` -> `TilingScheme.tileXYToNativeRectangle`
2525
* `TilingScheme.tileXYToExtent` -> `TilingScheme.tileXYToRectangle`
26+
* `BaseLayerPicker` has been extended to support terrain selection.
27+
* The `BaseLayerPicker` constructor function now takes the container element and an options object instead of a CentralBody and ImageryLayerCollection.
28+
* The `BaseLayerPickerViewModel` constructor function now takes an options object instead of a CentralBody and ImageryLayerCollection.
29+
* `ImageryProviderViewModel` -> `ProviderViewModel`
30+
* `BaseLayerPickerViewModel.selectedName` -> `BaseLayerPickerViewModel.buttonTooltip`
31+
* `BaseLayerPickerViewModel.selectedIconUrl` -> `BaseLayerPickerViewModel.buttonImageUrl`
32+
* `BaseLayerPickerViewModel.selectedItem` -> `BaseLayerPickerViewModel.selectedImagery`
33+
* `BaseLayerPickerViewModel.imageryLayers`has been removed and replaced with `BaseLayerPickerViewModel.centralBody`
34+
* See [#1607](https://github.com/AnalyticalGraphicsInc/cesium/pull/1607) for full details.
2635
* `TimeIntervalCollection.clear` renamed to `TimeIntervalColection.removeAll`
2736
* `Context` is now private
2837
* Removed `Scene.context`: replaced by adding `drawingBufferWidth`, `drawingBufferHeight`, `maximumAliasedLineWidth` properties and `createTextureAtlas` function to `Scene`.

‎Source/Widgets/BaseLayerPicker/BaseLayerPicker.css

+16-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
position: absolute;
2929
top: auto;
3030
right: 0;
31-
width: 240px;
31+
width: 320px;
3232
max-height: 500px;
3333
margin-top: 5px;
3434
background-color: rgba(38, 38, 38, 0.75);
@@ -40,6 +40,21 @@
4040
user-select: none;
4141
}
4242

43+
.cesium-baseLayerPicker-sectionTitle {
44+
display: block;
45+
font-family: sans-serif;
46+
font-size: 16pt;
47+
text-align: left;
48+
color: #edffff;
49+
}
50+
51+
.cesium-baseLayerPicker-choices {
52+
display: block;
53+
position: relative;
54+
top: auto;
55+
right: 0;
56+
}
57+
4358
.cesium-baseLayerPicker-item {
4459
display: inline-block;
4560
vertical-align: top;

‎Source/Widgets/BaseLayerPicker/BaseLayerPicker.js

+83-41
Original file line numberDiff line numberDiff line change
@@ -23,23 +23,27 @@ define([
2323
* <br />BaseLayerPicker with its drop-panel open.
2424
* </span>
2525
* <br /><br />
26-
* The BaseLayerPicker is a single button widget that displays a panel of available imagery
27-
* providers. When an item is selected, the corresponding imagery layer is created and inserted
28-
* as the base layer of the imagery collection; removing the existing base. Each item in the
29-
* available providers list contains a name, a representative icon, and a tooltip to display more
30-
* information when hovered. The list is initially empty, and must be configured before use, as
31-
* illustrated in the below example.
26+
* The BaseLayerPicker is a single button widget that displays a panel of available imagery and
27+
* terrain providers. When imagery is selected, the corresponding imagery layer is created and inserted
28+
* as the base layer of the imagery collection; removing the existing base. When terrain is selected,
29+
* it replaces the current terrain provider. Each item in the available providers list contains a name,
30+
* a representative icon, and a tooltip to display more information when hovered. The list is initially
31+
* empty, and must be configured before use, as illustrated in the below example.
3232
*
3333
* @alias BaseLayerPicker
3434
* @constructor
3535
*
3636
* @param {Element} container The parent HTML container node for this widget.
37-
* @param {ImageryLayerCollection} imageryLayers The imagery layer collection to use.
37+
* @param {CentralBody} options.centralBody The CentralBody to use.
38+
* @param {ProviderViewModel[]} [options.imageryProviderViewModels=[]] The array of ProviderViewModel instances to use for imagery.
39+
* @param {ProviderViewModel} [options.selectedImageryProviderViewModel] The view model for the current base imagery layer, if not supplied the first available imagery layer is used.
40+
* @param {ProviderViewModel[]} [options.terrainProviderViewModels=[]] The array of ProviderViewModel instances to use for terrain.
41+
* @param {ProviderViewModel} [options.selectedTerrainProviderViewModel] The view model for the current base terrain layer, if not supplied the first available terrain layer is used.
3842
*
3943
* @exception {DeveloperError} Element with id "container" does not exist in the document.
4044
*
45+
* @see TerrainProvider
4146
* @see ImageryProvider
42-
* @see ImageryProviderViewModel
4347
* @see ImageryLayerCollection
4448
*
4549
* @example
@@ -49,8 +53,8 @@ define([
4953
*
5054
* //Create the list of available providers we would like the user to select from.
5155
* //This example uses 3, OpenStreetMap, The Black Marble, and a single, non-streaming world image.
52-
* var providerViewModels = [];
53-
* providerViewModels.push(new Cesium.ImageryProviderViewModel({
56+
* var imageryViewModels = [];
57+
* imageryViewModels.push(new Cesium.ProviderViewModel({
5458
* name : 'Open\u00adStreet\u00adMap',
5559
* iconUrl : Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/openStreetMap.png'),
5660
* tooltip : 'OpenStreetMap (OSM) is a collaborative project to create a free editable \
@@ -62,7 +66,7 @@ define([
6266
* }
6367
* }));
6468
*
65-
* providerViewModels.push(new Cesium.ImageryProviderViewModel({
69+
* imageryViewModels.push(new Cesium.ProviderViewModel({
6670
* name : 'Black Marble',
6771
* iconUrl : Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/blackMarble.png'),
6872
* tooltip : 'The lights of cities and villages trace the outlines of civilization \
@@ -76,7 +80,7 @@ define([
7680
* }
7781
* }));
7882
*
79-
* providerViewModels.push(new Cesium.ImageryProviderViewModel({
83+
* imageryViewModels.push(new Cesium.ProviderViewModel({
8084
* name : 'Natural Earth\u00a0II',
8185
* iconUrl : Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/naturalEarthII.png'),
8286
* tooltip : 'Natural Earth II, darkened for contrast.\nhttp://www.naturalearthdata.com/',
@@ -92,78 +96,116 @@ define([
9296
*
9397
* //Finally, create the baseLayerPicker widget using our view models.
9498
* var layers = cesiumWidget.centralBody.imageryLayers;
95-
* var baseLayerPicker = new Cesium.BaseLayerPicker('baseLayerPickerContainer', layers, providerViewModels);
99+
* var baseLayerPicker = new Cesium.BaseLayerPicker('baseLayerPickerContainer', layers, imageryViewModels);
96100
*
97101
* //Use the first item in the list as the current selection.
98-
* baseLayerPicker.viewModel.selectedItem = providerViewModels[0];
102+
* baseLayerPicker.viewModel.selectedItem = imageryViewModels[0];
99103
*/
100-
var BaseLayerPicker = function(container, imageryLayers, imageryProviderViewModels) {
104+
var BaseLayerPicker = function(container, options) {
101105
//>>includeStart('debug', pragmas.debug);
102106
if (!defined(container)) {
103107
throw new DeveloperError('container is required.');
104108
}
105-
if (!defined(imageryLayers)) {
106-
throw new DeveloperError('imageryLayers is required.');
107-
}
108109
//>>includeEnd('debug');
109110

110111
container = getElement(container);
111112

112-
var viewModel = new BaseLayerPickerViewModel(imageryLayers, imageryProviderViewModels);
113+
var viewModel = new BaseLayerPickerViewModel(options);
113114

114115
var element = document.createElement('button');
115116
element.type = 'button';
116117
element.className = 'cesium-button cesium-toolbar-button';
117118
element.setAttribute('data-bind', '\
118-
attr: { title: selectedName },\
119+
attr: { title: buttonTooltip },\
119120
click: toggleDropDown');
120121
container.appendChild(element);
121122

122123
var imgElement = document.createElement('img');
123124
imgElement.setAttribute('draggable', 'false');
124125
imgElement.className = 'cesium-baseLayerPicker-selected';
125126
imgElement.setAttribute('data-bind', '\
126-
attr: { src: selectedIconUrl }');
127+
attr: { src: buttonImageUrl }');
127128
element.appendChild(imgElement);
128129

129-
var choices = document.createElement('div');
130-
choices.className = 'cesium-baseLayerPicker-dropDown';
131-
choices.setAttribute('data-bind', '\
130+
var dropPanel = document.createElement('div');
131+
dropPanel.className = 'cesium-baseLayerPicker-dropDown';
132+
dropPanel.setAttribute('data-bind', '\
132133
css: { "cesium-baseLayerPicker-visible" : dropDownVisible,\
133-
"cesium-baseLayerPicker-hidden" : !dropDownVisible },\
134-
foreach: imageryProviderViewModels');
135-
container.appendChild(choices);
136-
137-
var provider = document.createElement('div');
138-
provider.className = 'cesium-baseLayerPicker-item';
139-
provider.setAttribute('data-bind', '\
140-
css: { "cesium-baseLayerPicker-selectedItem" : $data === $parent.selectedItem },\
134+
"cesium-baseLayerPicker-hidden" : !dropDownVisible }');
135+
container.appendChild(dropPanel);
136+
137+
var imageryTitle = document.createElement('div');
138+
imageryTitle.className = 'cesium-baseLayerPicker-sectionTitle';
139+
imageryTitle.setAttribute('data-bind', 'visible: imageryProviderViewModels.length > 0');
140+
imageryTitle.innerHTML = 'Imagery<hr>';
141+
dropPanel.appendChild(imageryTitle);
142+
143+
var imageryChoices = document.createElement('div');
144+
imageryChoices.className = 'cesium-baseLayerPicker-choices';
145+
imageryChoices.setAttribute('data-bind', 'foreach: imageryProviderViewModels');
146+
dropPanel.appendChild(imageryChoices);
147+
148+
var imageryProvider = document.createElement('div');
149+
imageryProvider.className = 'cesium-baseLayerPicker-item';
150+
imageryProvider.setAttribute('data-bind', '\
151+
css: { "cesium-baseLayerPicker-selectedItem" : $data === $parent.selectedImagery },\
141152
attr: { title: tooltip },\
142153
visible: creationCommand.canExecute,\
143-
click: function($data) { $parent.selectedItem = $data; }');
144-
choices.appendChild(provider);
154+
click: function($data) { $parent.selectedImagery = $data; }');
155+
imageryChoices.appendChild(imageryProvider);
145156

146157
var providerIcon = document.createElement('img');
147158
providerIcon.className = 'cesium-baseLayerPicker-itemIcon';
148159
providerIcon.setAttribute('data-bind', 'attr: { src: iconUrl }');
149160
providerIcon.setAttribute('draggable', 'false');
150-
provider.appendChild(providerIcon);
161+
imageryProvider.appendChild(providerIcon);
151162

152163
var providerLabel = document.createElement('div');
153164
providerLabel.className = 'cesium-baseLayerPicker-itemLabel';
154165
providerLabel.setAttribute('data-bind', 'text: name');
155-
provider.appendChild(providerLabel);
166+
imageryProvider.appendChild(providerLabel);
167+
168+
var terrainTitle = document.createElement('div');
169+
terrainTitle.className = 'cesium-baseLayerPicker-sectionTitle';
170+
terrainTitle.setAttribute('data-bind', 'visible: terrainProviderViewModels.length > 0');
171+
terrainTitle.innerHTML = 'Terrain<hr>';
172+
dropPanel.appendChild(terrainTitle);
173+
174+
var terrainChoices = document.createElement('div');
175+
terrainChoices.className = 'cesium-baseLayerPicker-choices';
176+
terrainChoices.setAttribute('data-bind', 'foreach: terrainProviderViewModels');
177+
dropPanel.appendChild(terrainChoices);
178+
179+
var terrainProvider = document.createElement('div');
180+
terrainProvider.className = 'cesium-baseLayerPicker-item';
181+
terrainProvider.setAttribute('data-bind', '\
182+
css: { "cesium-baseLayerPicker-selectedItem" : $data === $parent.selectedTerrain },\
183+
attr: { title: tooltip },\
184+
visible: creationCommand.canExecute,\
185+
click: function($data) { $parent.selectedTerrain = $data; }');
186+
terrainChoices.appendChild(terrainProvider);
187+
188+
var terrainProviderIcon = document.createElement('img');
189+
terrainProviderIcon.className = 'cesium-baseLayerPicker-itemIcon';
190+
terrainProviderIcon.setAttribute('data-bind', 'attr: { src: iconUrl }');
191+
terrainProviderIcon.setAttribute('draggable', 'false');
192+
terrainProvider.appendChild(terrainProviderIcon);
193+
194+
var terrainProviderLabel = document.createElement('div');
195+
terrainProviderLabel.className = 'cesium-baseLayerPicker-itemLabel';
196+
terrainProviderLabel.setAttribute('data-bind', 'text: name');
197+
terrainProvider.appendChild(terrainProviderLabel);
156198

157199
knockout.applyBindings(viewModel, element);
158-
knockout.applyBindings(viewModel, choices);
200+
knockout.applyBindings(viewModel, dropPanel);
159201

160202
this._viewModel = viewModel;
161203
this._container = container;
162204
this._element = element;
163-
this._choices = choices;
205+
this._dropPanel = dropPanel;
164206

165207
this._closeDropDown = function(e) {
166-
if (!(element.contains(e.target) || choices.contains(e.target))) {
208+
if (!(element.contains(e.target) || dropPanel.contains(e.target))) {
167209
viewModel.dropDownVisible = false;
168210
}
169211
};
@@ -215,9 +257,9 @@ click: function($data) { $parent.selectedItem = $data; }');
215257
document.removeEventListener('mousedown', this._closeDropDown, true);
216258
document.removeEventListener('touchstart', this._closeDropDown, true);
217259
knockout.cleanNode(this._element);
218-
knockout.cleanNode(this._choices);
260+
knockout.cleanNode(this._dropPanel);
219261
this._container.removeChild(this._element);
220-
this._container.removeChild(this._choices);
262+
this._container.removeChild(this._dropPanel);
221263
return destroyObject(this);
222264
};
223265

0 commit comments

Comments
 (0)