ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Replace ol.createMap with friendlier ol.Map constructor

Browse Source
This commit is contained in:
Tom Payne
2012-09-26 10:58:13 +02:00
parent 3bd204fb6a
commit b73b2d12c4
6 changed files with 272 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
demos/full-screen/full-screen.js
View File

@@ -1,8 +1,10 @@
goog.require('goog.debug.Console');
goog.require('goog.debug.Logger');
goog.require('goog.debug.Logger.Level');
goog.require('ol.Collection');
goog.require('ol.Coordinate');
goog.require('ol.Map');
goog.require('ol.RendererHint');
goog.require('ol.createMap');
goog.require('ol.layer.MapQuestOpenAerial');
@@ -11,9 +13,10 @@ if (goog.DEBUG) {
goog.debug.Logger.getLogger('ol').setLevel(goog.debug.Logger.Level.INFO);
}
var rendererHint = [ol.RendererHint.WEBGL, ol.RendererHint.DOM];
var map = ol.createMap(document.getElementById('map'), {}, rendererHint);
var layer = new ol.layer.MapQuestOpenAerial();
map.getLayers().push(layer);
map.setCenter(new ol.Coordinate(0, 0));
map.setResolution(layer.getStore().getResolutions()[0]);
var map = new ol.Map(document.getElementById('map'), {
center: new ol.Coordinate(0, 0),
layers: new ol.Collection([layer]),
resolution: layer.getStore().getResolutions()[0]
});

30
demos/side-by-side/side-by-side.js
View File

@@ -2,10 +2,10 @@ goog.require('goog.debug.Console');
goog.require('goog.debug.Logger');
goog.require('goog.debug.Logger.Level');
goog.require('ol.CoordinateFormat');
goog.require('ol.Map');
goog.require('ol.RendererHint');
goog.require('ol.control.Attribution');
goog.require('ol.control.MousePosition');
goog.require('ol.createMap');
goog.require('ol.interaction.Keyboard');
goog.require('ol.layer.MapQuestOpenAerial');
@@ -16,23 +16,18 @@ if (goog.DEBUG) {
}
var layer = new ol.layer.MapQuestOpenAerial();
var layers = new ol.Collection();
layers.push(layer);
var domMap = new ol.Map(document.getElementById('domMap'), {
center: new ol.Coordinate(0, 0),
layers: new ol.Collection([layer]),
renderer: ol.RendererHint.DOM,
zoom: 0
});
var domMap = ol.createMap(
document.getElementById('domMap'),
{'layers': layers},
ol.RendererHint.DOM);
domMap.setCenter(new ol.Coordinate(0, 0));
domMap.setResolution(layer.getStore().getResolutions()[0]);
var webglMap = ol.createMap(
document.getElementById('webglMap'),
{},
ol.RendererHint.WEBGL);
var webglMap = new ol.Map(document.getElementById('webglMap'), {
renderer: ol.RendererHint.WEBGL
});
if (!goog.isNull(webglMap)) {
webglMap.bindTo('center', domMap);
webglMap.bindTo('layers', domMap);
@@ -102,8 +97,3 @@ keyboardInteraction.addCallback('vV', function() {
layer.setVisible(!layer.getVisible());
});
domMap.getInteractions().push(keyboardInteraction);
goog.exportSymbol('layer', layer);
goog.exportSymbol('layers', layers);
goog.exportSymbol('domMap', domMap);
goog.exportSymbol('webglMap', webglMap);

46
demos/two-layers/two-layers.js
View File

@@ -1,33 +1,33 @@
goog.require('ol.Collection');
goog.require('ol.Coordinate');
goog.require('ol.Map');
goog.require('ol.Projection');
goog.require('ol.RendererHint');
goog.require('ol.control.Attribution');
goog.require('ol.createMap');
goog.require('ol.layer.BingMaps');
goog.require('ol.layer.TileJSON');
var layer1 = new ol.layer.BingMaps(
ol.BingMapsStyle.AERIAL,
'AheP841R-MsLErKQChaTba_xDoOCl40-EeTubD9uNhNAyQTePwFY9iVD1_pyqqlE');
var layer2 = new ol.layer.TileJSON(
'http://api.tiles.mapbox.com/v3/mapbox.va-quake-aug.jsonp');
var layers = new ol.Collection([
new ol.layer.BingMaps(
ol.BingMapsStyle.AERIAL,
'AheP841R-MsLErKQChaTba_xDoOCl40-EeTubD9uNhNAyQTePwFY9iVD1_pyqqlE'),
new ol.layer.TileJSON(
'http://api.tiles.mapbox.com/v3/mapbox.va-quake-aug.jsonp')
]);
var layers = new ol.Collection([layer1, layer2]);
var webglMap = ol.createMap(
document.getElementById('webglMap'),
{'layers': new ol.Collection([layer1, layer2])},
ol.RendererHint.WEBGL);
goog.events.listen(layer2, goog.events.EventType.LOAD, function() {
webglMap.setUserCenter(new ol.Coordinate(-77.93254999999999, 37.9555));
webglMap.setResolution(layer2.getStore().getResolutions()[5]);
var webglMap = new ol.Map(document.getElementById('webglMap'), {
center: ol.Projection.transformWithCodes(
new ol.Coordinate(-77.93254999999999, 37.9555),
'EPSG:4326', 'EPSG:3857'),
layers: layers,
renderer: ol.RendererHint.WEBGL,
zoom: 5
});
var domMap = ol.createMap(
document.getElementById('domMap'),
{},
ol.RendererHint.DOM);
var domMap = new ol.Map(document.getElementById('domMap'), {
renderer: ol.RendererHint.DOM
});
domMap.bindTo('center', webglMap);
domMap.bindTo('layers', webglMap);
domMap.bindTo('resolution', webglMap);
@@ -36,9 +36,3 @@ domMap.bindTo('rotation', webglMap);
var attributionControl = new ol.control.Attribution(webglMap);
document.getElementById('attribution').appendChild(
attributionControl.getElement());
goog.exportSymbol('layer1', layer1);
goog.exportSymbol('layer2', layer2);
goog.exportSymbol('layers', layers);
goog.exportSymbol('domMap', domMap);
goog.exportSymbol('webglMap', webglMap);

153
src/ol/createmap.js
View File

@@ -1,153 +0,0 @@
goog.provide('ol.RendererHint');
goog.provide('ol.createMap');
goog.require('goog.object');
goog.require('ol.Collection');
goog.require('ol.Map');
goog.require('ol.MapProperty');
goog.require('ol.Projection');
goog.require('ol.interaction.AltDragRotate');
goog.require('ol.interaction.CenterConstraint');
goog.require('ol.interaction.Constraints');
goog.require('ol.interaction.DblClickZoom');
goog.require('ol.interaction.DragPan');
goog.require('ol.interaction.KeyboardPan');
goog.require('ol.interaction.KeyboardZoom');
goog.require('ol.interaction.MouseWheelZoom');
goog.require('ol.interaction.ResolutionConstraint');
goog.require('ol.interaction.RotationConstraint');
goog.require('ol.interaction.ShiftDragZoom');
goog.require('ol.renderer.dom');
goog.require('ol.renderer.dom.Map');
goog.require('ol.renderer.webgl');
goog.require('ol.renderer.webgl.Map');
/**
* @define {string} Default projection code.
*/
ol.DEFAULT_PROJECTION_CODE = 'EPSG:3857';
/**
* @define {string} Default user projection code.
*/
ol.DEFAULT_USER_PROJECTION_CODE = 'EPSG:4326';
/**
* @define {boolean} Whether to enable DOM.
*/
ol.ENABLE_DOM = true;
/**
* @define {boolean} Whether to enable WebGL.
*/
ol.ENABLE_WEBGL = true;
/**
* @enum {string}
*/
ol.RendererHint = {
DOM: 'dom',
WEBGL: 'webgl'
};
/**
* @type {Array.<ol.RendererHint>}
*/
ol.DEFAULT_RENDERER_HINT = [
ol.RendererHint.WEBGL,
ol.RendererHint.DOM
];
/**
* @param {Element} target Target.
* @param {Object.<string, *>=} opt_values Values.
* @param {ol.RendererHint|Array.<ol.RendererHint>=} opt_rendererHints
* Renderer hints.
* @return {ol.Map} Map.
*/
ol.createMap = function(target, opt_values, opt_rendererHints) {
var values = {};
if (goog.isDef(opt_values)) {
goog.object.extend(values, opt_values);
}
// FIXME this should be a configuration option
var centerConstraint = ol.interaction.CenterConstraint.snapToPixel;
var resolutionConstraint =
ol.interaction.ResolutionConstraint.createSnapToPower(
Math.exp(Math.log(2) / 8), ol.Projection.EPSG_3857_HALF_SIZE / 128);
var rotationConstraint = ol.interaction.RotationConstraint.none;
var constraints = new ol.interaction.Constraints(
centerConstraint, resolutionConstraint, rotationConstraint);
if (!goog.object.containsKey(values, ol.MapProperty.INTERACTIONS)) {
var interactions = new ol.Collection();
interactions.push(new ol.interaction.AltDragRotate(constraints));
interactions.push(new ol.interaction.DblClickZoom(constraints));
interactions.push(new ol.interaction.DragPan(constraints));
interactions.push(new ol.interaction.KeyboardPan(constraints, 16));
interactions.push(new ol.interaction.KeyboardZoom(constraints));
interactions.push(new ol.interaction.MouseWheelZoom(constraints));
interactions.push(new ol.interaction.ShiftDragZoom(constraints));
values[ol.MapProperty.INTERACTIONS] = interactions;
}
if (!goog.object.containsKey(values, ol.MapProperty.LAYERS)) {
values[ol.MapProperty.LAYERS] = new ol.Collection();
}
if (!goog.object.containsKey(values, ol.MapProperty.PROJECTION)) {
values[ol.MapProperty.PROJECTION] =
ol.Projection.getFromCode(ol.DEFAULT_PROJECTION_CODE);
}
if (!goog.object.containsKey(values, ol.MapProperty.USER_PROJECTION)) {
values[ol.MapProperty.USER_PROJECTION] =
ol.Projection.getFromCode(ol.DEFAULT_USER_PROJECTION_CODE);
}
/**
* @type {Array.<ol.RendererHint>}
*/
var rendererHints;
if (goog.isDef(opt_rendererHints)) {
if (goog.isArray(opt_rendererHints)) {
rendererHints = opt_rendererHints;
} else {
rendererHints = [opt_rendererHints];
}
} else {
rendererHints = ol.DEFAULT_RENDERER_HINT;
}
var i, rendererHint, rendererConstructor;
for (i = 0; i < rendererHints.length; ++i) {
rendererHint = rendererHints[i];
if (rendererHint == ol.RendererHint.DOM) {
if (ol.ENABLE_DOM && ol.renderer.dom.isSupported()) {
rendererConstructor = ol.renderer.dom.Map;
break;
}
} else if (rendererHint == ol.RendererHint.WEBGL) {
if (ol.ENABLE_WEBGL && ol.renderer.webgl.isSupported()) {
rendererConstructor = ol.renderer.webgl.Map;
break;
}
}
}
if (goog.isDef(rendererConstructor)) {
return new ol.Map(target, rendererConstructor, values);
} else {
return null;
}
};

15
src/ol/map.js
View File

@@ -76,14 +76,11 @@ ol.MapPaneZIndex = {
* @extends {ol.Object}
* @implements {goog.fx.anim.Animated}
* @param {Element} container Container.
* @param {function(new: ol.renderer.Map, Element, ol.Map)} rendererConstructor
* Renderer constructor.
* @param {Object=} opt_values Values.
* @param {ol.MapOptionsLiteral} mapOptionsLiteral Map options literal.
* @param {goog.dom.ViewportSizeMonitor=} opt_viewportSizeMonitor
* Viewport size monitor.
*/
ol.Map = function(
container, rendererConstructor, opt_values, opt_viewportSizeMonitor) {
ol.Map = function(container, mapOptionsLiteral, opt_viewportSizeMonitor) {
goog.base(this);
@@ -95,6 +92,8 @@ ol.Map = function(
this.logger = goog.debug.Logger.getLogger('ol.map.' + goog.getUid(this));
}
var mapOptions = new ol.MapOptions(mapOptionsLiteral);
/**
* @type {ol.TransformFunction}
* @private
@@ -176,7 +175,7 @@ ol.Map = function(
* @type {ol.renderer.Map}
* @private
*/
this.renderer_ = new rendererConstructor(this.viewport_, this);
this.renderer_ = new mapOptions.rendererConstructor(this.viewport_, this);
this.registerDisposable(this.renderer_);
/**
@@ -197,9 +196,7 @@ ol.Map = function(
this, ol.Object.getChangedEventType(ol.MapProperty.USER_PROJECTION),
this.handleUserProjectionChanged, false, this);
if (goog.isDef(opt_values)) {
this.setValues(opt_values);
}
this.setValues(mapOptions.values);
this.handleBrowserWindowResize();

227
src/ol/mapoptions.js Normal file
View File

@@ -0,0 +1,227 @@
goog.provide('ol.MapOptions');
goog.provide('ol.MapOptionsLiteral');
goog.provide('ol.RendererHint');
goog.require('ol.Collection');
goog.require('ol.Projection');
goog.require('ol.interaction.AltDragRotate');
goog.require('ol.interaction.CenterConstraint');
goog.require('ol.interaction.Constraints');
goog.require('ol.interaction.DblClickZoom');
goog.require('ol.interaction.DragPan');
goog.require('ol.interaction.KeyboardPan');
goog.require('ol.interaction.KeyboardZoom');
goog.require('ol.interaction.MouseWheelZoom');
goog.require('ol.interaction.ResolutionConstraint');
goog.require('ol.interaction.RotationConstraint');
goog.require('ol.interaction.ShiftDragZoom');
goog.require('ol.renderer.Map');
goog.require('ol.renderer.dom');
goog.require('ol.renderer.dom.Map');
goog.require('ol.renderer.webgl');
goog.require('ol.renderer.webgl.Map');
/**
* @define {boolean} Whether to enable DOM.
*/
ol.ENABLE_DOM = true;
/**
* @define {boolean} Whether to enable WebGL.
*/
ol.ENABLE_WEBGL = true;
/**
* @enum {string}
*/
ol.RendererHint = {
DOM: 'dom',
WEBGL: 'webgl'
};
/**
* @type {Array.<ol.RendererHint>}
*/
ol.DEFAULT_RENDERER_HINTS = [
ol.RendererHint.WEBGL,
ol.RendererHint.DOM
];
/**
* @typedef {{center: (ol.Coordinate|undefined),
* doubleClickZoom: (boolean|undefined),
* dragPan: (boolean|undefined),
* interactions: (ol.Collection|undefined),
* keyboard: (boolean|undefined),
* keyboardPanOffset: (number|undefined),
* layers: (ol.Collection|undefined),
* mouseWheelZoom: (boolean|undefined),
* projection: (ol.Projection|string|undefined),
* renderer: (ol.RendererHint|undefined),
* renderers: (Array.<(ol.RendererHint)>|undefined),
* resolution: (number|undefined),
* rotate: (boolean|undefined),
* shiftDragZoom: (boolean|undefined),
* userProjection: (ol.Projection|string|undefined),
* zoom: (number|undefined)}}
*/
ol.MapOptionsLiteral;
/**
* @constructor
* @param {ol.MapOptionsLiteral} mapOptionsLiteral Map options.
*/
ol.MapOptions = function(mapOptionsLiteral) {
/**
* @type {Object.<string, *>}
*/
this.values = {};
if (goog.isDef(mapOptionsLiteral.center)) {
this.values[ol.MapProperty.CENTER] = mapOptionsLiteral.center;
}
this.values[ol.MapProperty.INTERACTIONS] =
goog.isDef(mapOptionsLiteral.interactions) ?
mapOptionsLiteral.interactions :
ol.MapOptions.createInteractions_(mapOptionsLiteral);
this.values[ol.MapProperty.LAYERS] = goog.isDef(mapOptionsLiteral.layers) ?
mapOptionsLiteral.layers : new ol.Collection();
this.values[ol.MapProperty.PROJECTION] = ol.MapOptions.createProjection_(
mapOptionsLiteral.projection, 'EPSG:3857');
if (goog.isDef(mapOptionsLiteral.resolution)) {
this.values[ol.MapProperty.RESOLUTION] = mapOptionsLiteral.resolution;
} else if (goog.isDef(mapOptionsLiteral.zoom)) {
this.values[ol.MapProperty.RESOLUTION] =
ol.Projection.EPSG_3857_HALF_SIZE / (128 << mapOptionsLiteral.zoom);
}
this.values[ol.MapProperty.USER_PROJECTION] = ol.MapOptions.createProjection_(
mapOptionsLiteral.userProjection, 'EPSG:4326');
/**
* @type {function(new: ol.renderer.Map, Element, ol.Map)}
*/
this.rendererConstructor = ol.renderer.Map;
/**
* @type {Array.<ol.RendererHint>}
*/
var rendererHints;
if (goog.isDef(mapOptionsLiteral.renderers)) {
rendererHints = mapOptionsLiteral.renderers;
} else if (goog.isDef(mapOptionsLiteral.renderer)) {
rendererHints = [mapOptionsLiteral.renderer];
} else {
rendererHints = ol.DEFAULT_RENDERER_HINTS;
}
var i, rendererHint;
for (i = 0; i < rendererHints.length; ++i) {
rendererHint = rendererHints[i];
if (rendererHint == ol.RendererHint.DOM) {
if (ol.ENABLE_DOM && ol.renderer.dom.isSupported()) {
this.rendererConstructor = ol.renderer.dom.Map;
break;
}
} else if (rendererHint == ol.RendererHint.WEBGL) {
if (ol.ENABLE_WEBGL && ol.renderer.webgl.isSupported()) {
this.rendererConstructor = ol.renderer.webgl.Map;
break;
}
}
}
};
/**
* @private
* @param {ol.MapOptionsLiteral} mapOptionsLiteral Map options literal.
* @return {ol.Collection} Interactions.
*/
ol.MapOptions.createInteractions_ = function(mapOptionsLiteral) {
// FIXME this should be a configuration option
var centerConstraint = ol.interaction.CenterConstraint.snapToPixel;
var resolutionConstraint =
ol.interaction.ResolutionConstraint.createSnapToPower(
Math.exp(Math.log(2) / 8), ol.Projection.EPSG_3857_HALF_SIZE / 128);
var rotationConstraint = ol.interaction.RotationConstraint.none;
var constraints = new ol.interaction.Constraints(
centerConstraint, resolutionConstraint, rotationConstraint);
var interactions = new ol.Collection();
var rotate = goog.isDef(mapOptionsLiteral.rotate) ?
mapOptionsLiteral.rotate : true;
if (rotate) {
interactions.push(new ol.interaction.AltDragRotate(constraints));
}
var doubleClickZoom = goog.isDef(mapOptionsLiteral.doubleClickZoom) ?
mapOptionsLiteral.doubleClickZoom : true;
if (doubleClickZoom) {
interactions.push(new ol.interaction.DblClickZoom(constraints));
}
var dragPan = goog.isDef(mapOptionsLiteral.dragPan) ?
mapOptionsLiteral.dragPan : true;
if (dragPan) {
interactions.push(new ol.interaction.DragPan(constraints));
}
var keyboard = goog.isDef(mapOptionsLiteral.keyboard) ?
mapOptionsLiteral.keyboard : true;
var keyboardPanOffset = goog.isDef(mapOptionsLiteral.keyboardPanOffset) ?
mapOptionsLiteral.keyboardPanOffset : 80;
if (keyboard) {
interactions.push(
new ol.interaction.KeyboardPan(constraints, keyboardPanOffset));
interactions.push(new ol.interaction.KeyboardZoom(constraints));
}
var mouseWheelZoom = goog.isDef(mapOptionsLiteral.mouseWheelZoom) ?
mapOptionsLiteral.mouseWheelZoom : true;
if (mouseWheelZoom) {
interactions.push(new ol.interaction.MouseWheelZoom(constraints));
}
var shiftDragZoom = goog.isDef(mapOptionsLiteral.shiftDragZoom) ?
mapOptionsLiteral.shiftDragZoom : true;
if (shiftDragZoom) {
interactions.push(new ol.interaction.ShiftDragZoom(constraints));
}
return interactions;
};
/**
* @private
* @param {ol.Projection|string|undefined} projection Projection.
* @param {string} defaultCode Default code.
* @return {ol.Projection} Projection.
*/
ol.MapOptions.createProjection_ = function(projection, defaultCode) {
if (!goog.isDefAndNotNull(projection)) {
return ol.Projection.getFromCode(defaultCode);
} else if (goog.isString(projection)) {
return ol.Projection.getFromCode(projection);
} else {
goog.asserts.assert(projection instanceof ol.Projection);
return projection;
}
};