cesium
Version:
CesiumJS is a JavaScript library for creating 3D globes and 2D maps in a web browser without a plugin.
276 lines (247 loc) • 11 kB
JavaScript
import defaultValue from '../../Core/defaultValue.js';
import defined from '../../Core/defined.js';
import DeveloperError from '../../Core/DeveloperError.js';
import EllipsoidTerrainProvider from '../../Core/EllipsoidTerrainProvider.js';
import knockout from '../../ThirdParty/knockout.js';
import createCommand from '../createCommand.js';
/**
* The view model for {@link BaseLayerPicker}.
* @alias BaseLayerPickerViewModel
* @constructor
*
* @param {Object} options Object with the following properties:
* @param {Globe} options.globe The Globe to use.
* @param {ProviderViewModel[]} [options.imageryProviderViewModels=[]] The array of ProviderViewModel instances to use for imagery.
* @param {ProviderViewModel} [options.selectedImageryProviderViewModel] The view model for the current base imagery layer, if not supplied the first available imagery layer is used.
* @param {ProviderViewModel[]} [options.terrainProviderViewModels=[]] The array of ProviderViewModel instances to use for terrain.
* @param {ProviderViewModel} [options.selectedTerrainProviderViewModel] The view model for the current base terrain layer, if not supplied the first available terrain layer is used.
*
* @exception {DeveloperError} imageryProviderViewModels must be an array.
* @exception {DeveloperError} terrainProviderViewModels must be an array.
*/
function BaseLayerPickerViewModel(options) {
options = defaultValue(options, defaultValue.EMPTY_OBJECT);
var globe = options.globe;
var imageryProviderViewModels = defaultValue(options.imageryProviderViewModels, []);
var terrainProviderViewModels = defaultValue(options.terrainProviderViewModels, []);
//>>includeStart('debug', pragmas.debug);
if (!defined(globe)) {
throw new DeveloperError('globe is required');
}
//>>includeEnd('debug');
this._globe = globe;
/**
* Gets or sets an array of ProviderViewModel instances available for imagery selection.
* This property is observable.
* @type {ProviderViewModel[]}
*/
this.imageryProviderViewModels = imageryProviderViewModels.slice(0);
/**
* Gets or sets an array of ProviderViewModel instances available for terrain selection.
* This property is observable.
* @type {ProviderViewModel[]}
*/
this.terrainProviderViewModels = terrainProviderViewModels.slice(0);
/**
* Gets or sets whether the imagery selection drop-down is currently visible.
* @type {Boolean}
* @default false
*/
this.dropDownVisible = false;
knockout.track(this, ['imageryProviderViewModels', 'terrainProviderViewModels', 'dropDownVisible']);
var imageryObservable = knockout.getObservable(this, 'imageryProviderViewModels');
var imageryProviders = knockout.pureComputed(function() {
var providers = imageryObservable();
var categories = {};
var i;
for (i = 0; i < providers.length; i++) {
var provider = providers[i];
var category = provider.category;
if (defined(categories[category])) {
categories[category].push(provider);
} else {
categories[category] = [provider];
}
}
var allCategoryNames = Object.keys(categories);
var result = [];
for (i = 0; i < allCategoryNames.length; i++) {
var name = allCategoryNames[i];
result.push({
name: name,
providers: categories[name]
});
}
return result;
});
this._imageryProviders = imageryProviders;
var terrainObservable = knockout.getObservable(this, 'terrainProviderViewModels');
var terrainProviders = knockout.pureComputed(function() {
var providers = terrainObservable();
var categories = {};
var i;
for (i = 0; i < providers.length; i++) {
var provider = providers[i];
var category = provider.category;
if (defined(categories[category])) {
categories[category].push(provider);
} else {
categories[category] = [provider];
}
}
var allCategoryNames = Object.keys(categories);
var result = [];
for (i = 0; i < allCategoryNames.length; i++) {
var name = allCategoryNames[i];
result.push({
name: name,
providers: categories[name]
});
}
return result;
});
this._terrainProviders = terrainProviders;
/**
* Gets the button tooltip. This property is observable.
* @type {String}
*/
this.buttonTooltip = undefined;
knockout.defineProperty(this, 'buttonTooltip', function() {
var selectedImagery = this.selectedImagery;
var selectedTerrain = this.selectedTerrain;
var imageryTip = defined(selectedImagery) ? selectedImagery.name : undefined;
var terrainTip = defined(selectedTerrain) ? selectedTerrain.name : undefined;
if (defined(imageryTip) && defined(terrainTip)) {
return imageryTip + '\n' + terrainTip;
} else if (defined(imageryTip)) {
return imageryTip;
}
return terrainTip;
});
/**
* Gets the button background image. This property is observable.
* @type {String}
*/
this.buttonImageUrl = undefined;
knockout.defineProperty(this, 'buttonImageUrl', function() {
var selectedImagery = this.selectedImagery;
if (defined(selectedImagery)) {
return selectedImagery.iconUrl;
}
});
/**
* Gets or sets the currently selected imagery. This property is observable.
* @type {ProviderViewModel}
* @default undefined
*/
this.selectedImagery = undefined;
var selectedImageryViewModel = knockout.observable();
this._currentImageryProviders = [];
knockout.defineProperty(this, 'selectedImagery', {
get : function() {
return selectedImageryViewModel();
},
set : function(value) {
if (selectedImageryViewModel() === value) {
this.dropDownVisible = false;
return;
}
var i;
var currentImageryProviders = this._currentImageryProviders;
var currentImageryProvidersLength = currentImageryProviders.length;
var imageryLayers = this._globe.imageryLayers;
var hadExistingBaseLayer = false;
for (i = 0; i < currentImageryProvidersLength; i++) {
var layersLength = imageryLayers.length;
for ( var x = 0; x < layersLength; x++) {
var layer = imageryLayers.get(x);
if (layer.imageryProvider === currentImageryProviders[i]) {
imageryLayers.remove(layer);
hadExistingBaseLayer = true;
break;
}
}
}
if (defined(value)) {
var newProviders = value.creationCommand();
if (Array.isArray(newProviders)) {
var newProvidersLength = newProviders.length;
for (i = newProvidersLength - 1; i >= 0; i--) {
imageryLayers.addImageryProvider(newProviders[i], 0);
}
this._currentImageryProviders = newProviders.slice(0);
} else {
this._currentImageryProviders = [newProviders];
if (hadExistingBaseLayer) {
imageryLayers.addImageryProvider(newProviders, 0);
} else {
var baseLayer = imageryLayers.get(0);
if (defined(baseLayer)) {
imageryLayers.remove(baseLayer);
}
imageryLayers.addImageryProvider(newProviders, 0);
}
}
}
selectedImageryViewModel(value);
this.dropDownVisible = false;
}
});
/**
* Gets or sets the currently selected terrain. This property is observable.
* @type {ProviderViewModel}
* @default undefined
*/
this.selectedTerrain = undefined;
var selectedTerrainViewModel = knockout.observable();
knockout.defineProperty(this, 'selectedTerrain', {
get : function() {
return selectedTerrainViewModel();
},
set : function(value) {
if (selectedTerrainViewModel() === value) {
this.dropDownVisible = false;
return;
}
var newProvider;
if (defined(value)) {
newProvider = value.creationCommand();
}
this._globe.depthTestAgainstTerrain = !(newProvider instanceof EllipsoidTerrainProvider);
this._globe.terrainProvider = newProvider;
selectedTerrainViewModel(value);
this.dropDownVisible = false;
}
});
var that = this;
this._toggleDropDown = createCommand(function() {
that.dropDownVisible = !that.dropDownVisible;
});
this.selectedImagery = defaultValue(options.selectedImageryProviderViewModel, imageryProviderViewModels[0]);
this.selectedTerrain = defaultValue(options.selectedTerrainProviderViewModel, terrainProviderViewModels[0]);
}
Object.defineProperties(BaseLayerPickerViewModel.prototype, {
/**
* Gets the command to toggle the visibility of the drop down.
* @memberof BaseLayerPickerViewModel.prototype
*
* @type {Command}
*/
toggleDropDown : {
get : function() {
return this._toggleDropDown;
}
},
/**
* Gets the globe.
* @memberof BaseLayerPickerViewModel.prototype
*
* @type {Globe}
*/
globe : {
get : function() {
return this._globe;
}
}
});
export default BaseLayerPickerViewModel;