Skip to content

Commit

Permalink
refactor(view): change Views to ES6 syntax
Browse files Browse the repository at this point in the history 
No other changes has been done.
  • Loading branch information
@zarov
zarov committed Jun 17, 2019
1 parent 4c4e791 commit 15ce61e
Show file tree
Hide file tree
Showing 3 changed files with 687 additions and 688 deletions.
213 changes: 106 additions & 107 deletions src/Core/Prefab/GlobeView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,132 +64,131 @@ export const GLOBE_VIEW_EVENTS = {
COLOR_LAYERS_ORDER_CHANGED,
};

/**
* Creates a view of a globe.
*
* @constructor
*
* @example
* var viewerDiv = document.getElementById('viewerDiv');
* var position = new itowns.Coordinates('WGS84', 2.35, 48.8, 25e6);
* var view = new itowns.GlobeView(viewerDiv, position);
*
* @example
* var viewerDiv = document.getElementById('viewerDiv');
* var position = { longitude: 2.35, latitude: 48.8, altitude: 25e6 };
* var view = new itowns.GlobeView(viewerDiv, position);
*
* @param {HTMLDivElement} viewerDiv - Where to attach the view and display it
* in the DOM.
* @param {object|Coordinates} coordCarto - An object containing three
* properties: longitude, latitude and altitude. It will help placing the camera
* on the globe at the creation.
* @param {object=} options - See options of {@link View}.
*/
function GlobeView(viewerDiv, coordCarto, options = {}) {
THREE.Object3D.DefaultUp.set(0, 0, 1);
// Setup View
View.call(this, 'EPSG:4978', viewerDiv, options);

// Configure camera
let positionCamera;
if (coordCarto.isCoordinates) {
positionCamera = coordCarto.as('EPSG:4326');
} else {
positionCamera = new Coordinates('EPSG:4326',
coordCarto.longitude,
coordCarto.latitude,
coordCarto.altitude);
}

this.camera.camera3D.near = Math.max(15.0, 0.000002352 * ellipsoidSizes.x);
this.camera.camera3D.far = ellipsoidSizes.x * 10;

const tileLayer = new GlobeLayer('globe', options.object3d, options);
class GlobeView extends View {
/**
* Creates a view of a globe.
*
* @constructor
*
* @example
* var viewerDiv = document.getElementById('viewerDiv');
* var position = new itowns.Coordinates('WGS84', 2.35, 48.8, 25e6);
* var view = new itowns.GlobeView(viewerDiv, position);
*
* @example
* var viewerDiv = document.getElementById('viewerDiv');
* var position = { longitude: 2.35, latitude: 48.8, altitude: 25e6 };
* var view = new itowns.GlobeView(viewerDiv, position);
*
* @param {HTMLDivElement} viewerDiv - Where to attach the view and display it
* in the DOM.
* @param {object|Coordinates} coordCarto - An object containing three
* properties: longitude, latitude and altitude. It will help placing the camera
* on the globe at the creation.
* @param {object=} options - See options of {@link View}.
*/
constructor(viewerDiv, coordCarto, options = {}) {
THREE.Object3D.DefaultUp.set(0, 0, 1);
// Setup View
super('EPSG:4978', viewerDiv, options);

// Configure camera
let positionCamera;
if (coordCarto.isCoordinates) {
positionCamera = coordCarto.as('EPSG:4326');
} else {
positionCamera = new Coordinates('EPSG:4326',
coordCarto.longitude,
coordCarto.latitude,
coordCarto.altitude);
}

const sun = new THREE.DirectionalLight();
sun.position.set(-0.5, 0, 1);
sun.updateMatrixWorld(true);
tileLayer.object3d.add(sun);
this.camera.camera3D.near = Math.max(15.0, 0.000002352 * ellipsoidSizes.x);
this.camera.camera3D.far = ellipsoidSizes.x * 10;

this.addLayer(tileLayer);
// Configure controls
const positionTargetCamera = positionCamera.clone();
positionTargetCamera.altitude = 0;
const tileLayer = new GlobeLayer('globe', options.object3d, options);

if (options.noControls) {
this.camera.setPosition(positionCamera);
this.camera.camera3D.lookAt(positionTargetCamera.as('EPSG:4978').toVector3());
} else {
this.controls = new GlobeControls(this, positionTargetCamera, positionCamera.altitude, ellipsoidSizes.x);
this.controls.handleCollision = typeof (options.handleCollision) !== 'undefined' ? options.handleCollision : true;
}
const sun = new THREE.DirectionalLight();
sun.position.set(-0.5, 0, 1);
sun.updateMatrixWorld(true);
tileLayer.object3d.add(sun);

this._fullSizeDepthBuffer = null;
this.addLayer(tileLayer);
// Configure controls
const positionTargetCamera = positionCamera.clone();
positionTargetCamera.altitude = 0;

this.addFrameRequester(MAIN_LOOP_EVENTS.BEFORE_RENDER, () => {
if (this._fullSizeDepthBuffer != null) {
// clean depth buffer
this._fullSizeDepthBuffer = null;
if (options.noControls) {
this.camera.setPosition(positionCamera);
this.camera.camera3D.lookAt(positionTargetCamera.as('EPSG:4978').toVector3());
} else {
this.controls = new GlobeControls(this, positionTargetCamera, positionCamera.altitude, ellipsoidSizes.x);
this.controls.handleCollision = typeof (options.handleCollision) !== 'undefined' ? options.handleCollision : true;
}
});

this.tileLayer = tileLayer;
this._fullSizeDepthBuffer = null;

this.addLayer(new Atmosphere());
this.addFrameRequester(MAIN_LOOP_EVENTS.BEFORE_RENDER, () => {
if (this._fullSizeDepthBuffer != null) {
// clean depth buffer
this._fullSizeDepthBuffer = null;
}
});

const fn = () => {
this.removeEventListener(VIEW_EVENTS.LAYERS_INITIALIZED, fn);
this.dispatchEvent({ type: GLOBE_VIEW_EVENTS.GLOBE_INITIALIZED });
};
this.tileLayer = tileLayer;

// GlobeView needs this.camera.resize to set perpsective matrix camera
this.camera.resize(viewerDiv.clientWidth, viewerDiv.clientHeight);
this.addLayer(new Atmosphere());

this.addEventListener(VIEW_EVENTS.LAYERS_INITIALIZED, fn);
}
const fn = () => {
this.removeEventListener(VIEW_EVENTS.LAYERS_INITIALIZED, fn);
this.dispatchEvent({ type: GLOBE_VIEW_EVENTS.GLOBE_INITIALIZED });
};

GlobeView.prototype = Object.create(View.prototype);
GlobeView.prototype.constructor = GlobeView;
// GlobeView needs this.camera.resize to set perpsective matrix camera
this.camera.resize(viewerDiv.clientWidth, viewerDiv.clientHeight);

GlobeView.prototype.addLayer = function addLayer(layer) {
if (!layer) {
return new Promise((resolve, reject) => reject(new Error('layer is undefined')));
this.addEventListener(VIEW_EVENTS.LAYERS_INITIALIZED, fn);
}
if (layer.isColorLayer) {
const colorLayerCount = this.getLayers(l => l.isColorLayer).length;
layer.sequence = colorLayerCount;
} else if (layer.isElevationLayer) {
if (layer.source.isWMTSSource && layer.source.tileMatrixSet !== 'WGS84G') {
throw new Error('Only WGS84G tileMatrixSet is currently supported for WMTS elevation layers');
}
}
const layerId = layer.id;
const layerPromise = View.prototype.addLayer.call(this, layer, this.tileLayer);

this.dispatchEvent({
type: GLOBE_VIEW_EVENTS.LAYER_ADDED,
layerId,
});

return layerPromise;
};
addLayer(layer) {
if (!layer) {
return new Promise((resolve, reject) => reject(new Error('layer is undefined')));
}
if (layer.isColorLayer) {
const colorLayerCount = this.getLayers(l => l.isColorLayer).length;
layer.sequence = colorLayerCount;
} else if (layer.isElevationLayer) {
if (layer.source.isWMTSSource && layer.source.tileMatrixSet !== 'WGS84G') {
throw new Error('Only WGS84G tileMatrixSet is currently supported for WMTS elevation layers');
}
}
const layerId = layer.id;
const layerPromise = super.addLayer(layer, this.tileLayer);

/**
* Removes a specific imagery layer from the current layer list. This removes layers inserted with attach().
* @example
* view.removeLayer('layerId');
* @param {string} layerId The identifier
* @return {boolean}
*/
GlobeView.prototype.removeLayer = function removeLayer(layerId) {
if (View.prototype.removeLayer.call(this, layerId)) {
this.dispatchEvent({
type: GLOBE_VIEW_EVENTS.LAYER_REMOVED,
type: GLOBE_VIEW_EVENTS.LAYER_ADDED,
layerId,
});
return true;

return layerPromise;
}
};

/**
* Removes a specific imagery layer from the current layer list. This removes layers inserted with attach().
* @example
* view.removeLayer('layerId');
* @param {string} layerId The identifier
* @return {boolean}
*/
removeLayer(layerId) {
if (View.prototype.removeLayer.call(this, layerId)) {
this.dispatchEvent({
type: GLOBE_VIEW_EVENTS.LAYER_REMOVED,
layerId,
});
return true;
}
}
}

export default GlobeView;
73 changes: 36 additions & 37 deletions src/Core/Prefab/PlanarView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,43 +6,42 @@ import CameraUtils from 'Utils/CameraUtils';

import PlanarLayer from './Planar/PlanarLayer';

function PlanarView(viewerDiv, extent, options = {}) {
THREE.Object3D.DefaultUp.set(0, 0, 1);

// Setup View
View.call(this, extent.crs, viewerDiv, options);

// Configure camera
const dim = extent.dimensions();
const max = Math.max(dim.x, dim.y);
const camera3D = this.camera.camera3D;
camera3D.near = 0.1;
camera3D.far = 2 * max;
this.camera.camera3D.updateProjectionMatrix();

const tileLayer = new PlanarLayer('planar', extent, options.object3d, options);

this.addLayer(tileLayer);

const p = { coord: extent.center(), range: max, tilt: 20, heading: 0 };
CameraUtils.transformCameraToLookAtTarget(this, camera3D, p);

this._fullSizeDepthBuffer = null;
this.addFrameRequester(MAIN_LOOP_EVENTS.BEFORE_RENDER, () => {
if (this._fullSizeDepthBuffer != null) {
// clean depth buffer
this._fullSizeDepthBuffer = null;
}
});

this.tileLayer = tileLayer;
class PlanarView extends View {
constructor(viewerDiv, extent, options = {}) {
THREE.Object3D.DefaultUp.set(0, 0, 1);

// Setup View
super(extent.crs, viewerDiv, options);

// Configure camera
const dim = extent.dimensions();
const max = Math.max(dim.x, dim.y);
const camera3D = this.camera.camera3D;
camera3D.near = 0.1;
camera3D.far = 2 * max;
this.camera.camera3D.updateProjectionMatrix();

const tileLayer = new PlanarLayer('planar', extent, options.object3d, options);

this.addLayer(tileLayer);

const p = { coord: extent.center(), range: max, tilt: 20, heading: 0 };
CameraUtils.transformCameraToLookAtTarget(this, camera3D, p);

this._fullSizeDepthBuffer = null;
this.addFrameRequester(MAIN_LOOP_EVENTS.BEFORE_RENDER, () => {
if (this._fullSizeDepthBuffer != null) {
// clean depth buffer
this._fullSizeDepthBuffer = null;
}
});

this.tileLayer = tileLayer;
}

addLayer(layer) {
return super.addLayer(layer, this.tileLayer);
}
}

PlanarView.prototype = Object.create(View.prototype);
PlanarView.prototype.constructor = PlanarView;

PlanarView.prototype.addLayer = function addLayer(layer) {
return View.prototype.addLayer.call(this, layer, this.tileLayer);
};

export default PlanarView;
Loading

0 comments on commit 15ce61e

Please sign in to comment.