diff --git a/examples/dragzoom.html b/examples/dragzoom.html deleted file mode 100644 index 18becc24fe..0000000000 --- a/examples/dragzoom.html +++ /dev/null @@ -1,52 +0,0 @@ - - - - - - - - - - - DragZoom example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

DragZoom example

-

Example of dragzoom interaction.

-
-

Press SHIFT and drag the map to trigger the interaction.

-

See the dragzoom.js source to see how this is done.

-

For the moment, only works with the canvas renderer.

-
-
dragzoom, openstreetmap
-
- -
- -
- - - - - - diff --git a/examples/dragzoom.js b/examples/dragzoom.js deleted file mode 100644 index 0b91dacbdb..0000000000 --- a/examples/dragzoom.js +++ /dev/null @@ -1,38 +0,0 @@ -goog.require('ol.Map'); -goog.require('ol.RendererHint'); -goog.require('ol.View2D'); -goog.require('ol.interaction'); -goog.require('ol.interaction.DragZoom'); -goog.require('ol.layer.Tile'); -goog.require('ol.source.OSM'); -goog.require('ol.style.Fill'); -goog.require('ol.style.Stroke'); -goog.require('ol.style.Style'); - - -var map = new ol.Map({ - interactions: ol.interaction.defaults().extend([ - new ol.interaction.DragZoom({ - style: new ol.style.Style({ - stroke: new ol.style.Stroke({ - color: 'rgba(255,0,0,1)', - width: 2 - }), - fill: new ol.style.Fill({ - color: 'rgba(155,0,0,0.2)' - }) - }) - }) - ]), - layers: [ - new ol.layer.Tile({ - source: new ol.source.OSM() - }) - ], - renderer: ol.RendererHint.CANVAS, - target: 'map', - view: new ol.View2D({ - center: [0, 0], - zoom: 2 - }) -}); diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc index bc5d5bf4c4..9765ed1fd1 100644 --- a/src/objectliterals.jsdoc +++ b/src/objectliterals.jsdoc @@ -342,6 +342,8 @@ * desired. Default is `true`. * @property {boolean|undefined} mouseWheelZoom Whether mousewheel zoom is * desired. Default is `true`. + * @property {boolean|undefined} shiftDragZoom Whether Shift-drag zoom is + * desired. Default is `true`. * @property {boolean|undefined} touchPan Whether touch pan is * desired. Default is `true`. * @property {boolean|undefined} touchRotate Whether touch rotate is desired. Default is `true`. diff --git a/src/ol/interaction/dragboxinteraction.js b/src/ol/interaction/dragboxinteraction.js index d50d887838..d04e8a4e29 100644 --- a/src/ol/interaction/dragboxinteraction.js +++ b/src/ol/interaction/dragboxinteraction.js @@ -92,6 +92,12 @@ ol.interaction.DragBox = function(opt_options) { */ this.box_ = new ol.render.Box(style); + /** + * @type {ol.Pixel} + * @private + */ + this.startPixel_ = null; + /** * @private * @type {ol.events.ConditionType} @@ -107,8 +113,7 @@ goog.inherits(ol.interaction.DragBox, ol.interaction.Drag); * @inheritDoc */ ol.interaction.DragBox.prototype.handleDrag = function(mapBrowserEvent) { - this.box_.setCoordinates( - this.startCoordinate, mapBrowserEvent.getCoordinate()); + this.box_.setPixels(this.startPixel_, mapBrowserEvent.getPixel()); }; @@ -150,8 +155,9 @@ ol.interaction.DragBox.prototype.handleDragStart = function(mapBrowserEvent) { var browserEvent = mapBrowserEvent.browserEvent; if (browserEvent.isMouseActionButton() && this.condition_(mapBrowserEvent)) { - this.box_.setCoordinates(this.startCoordinate, this.startCoordinate); + this.startPixel_ = mapBrowserEvent.getPixel(); this.box_.setMap(mapBrowserEvent.map); + this.box_.setPixels(this.startPixel_, this.startPixel_); this.dispatchEvent(new ol.DragBoxEvent(ol.DragBoxEventType.BOXSTART, mapBrowserEvent.getCoordinate())); return true; diff --git a/src/ol/interaction/dragzoominteraction.js b/src/ol/interaction/dragzoominteraction.js index 64c7e959ef..b6bd06b543 100644 --- a/src/ol/interaction/dragzoominteraction.js +++ b/src/ol/interaction/dragzoominteraction.js @@ -2,11 +2,19 @@ goog.provide('ol.interaction.DragZoom'); goog.require('goog.asserts'); goog.require('ol.events.condition'); +goog.require('ol.extent'); goog.require('ol.interaction.DragBox'); +goog.require('ol.interaction.Interaction'); goog.require('ol.style.Stroke'); goog.require('ol.style.Style'); +/** + * @define {number} Timeout duration. + */ +ol.interaction.DRAGZOOM_ANIMATION_DURATION = 200; + + /** * Allows the user to zoom the map by clicking and dragging on the map, @@ -47,12 +55,12 @@ goog.inherits(ol.interaction.DragZoom, ol.interaction.DragBox); * @inheritDoc */ ol.interaction.DragZoom.prototype.onBoxEnd = function() { - this.getMap().withFrozenRendering(goog.bind(function() { - // FIXME works for View2D only - var view = this.getMap().getView().getView2D(); - - view.fitExtent(this.getGeometry().getExtent(), this.getMap().getSize()); - // FIXME we should preserve rotation - view.setRotation(0); - }, this)); + // FIXME works for View2D only + var map = this.getMap(); + var view = map.getView().getView2D(); + var extent = this.getGeometry().getExtent(); + var center = ol.extent.getCenter(extent); + ol.interaction.Interaction.zoom(map, view, + view.getResolutionForExtent(extent, map.getSize()), + center, ol.interaction.DRAGZOOM_ANIMATION_DURATION); }; diff --git a/src/ol/interaction/interactiondefaults.js b/src/ol/interaction/interactiondefaults.js index b664e24edb..32b4e5569c 100644 --- a/src/ol/interaction/interactiondefaults.js +++ b/src/ol/interaction/interactiondefaults.js @@ -5,6 +5,7 @@ goog.require('ol.Kinetic'); goog.require('ol.interaction.DoubleClickZoom'); goog.require('ol.interaction.DragPan'); goog.require('ol.interaction.DragRotate'); +goog.require('ol.interaction.DragZoom'); goog.require('ol.interaction.KeyboardPan'); goog.require('ol.interaction.KeyboardZoom'); goog.require('ol.interaction.MouseWheelZoom'); @@ -98,6 +99,12 @@ ol.interaction.defaults = function(opt_options) { })); } + var shiftDragZoom = goog.isDef(options.shiftDragZoom) ? + options.shiftDragZoom : true; + if (shiftDragZoom) { + interactions.push(new ol.interaction.DragZoom()); + } + return interactions; }; diff --git a/src/ol/render/box.js b/src/ol/render/box.js index 5e728073e4..456c613bc7 100644 --- a/src/ol/render/box.js +++ b/src/ol/render/box.js @@ -3,6 +3,7 @@ goog.provide('ol.render.Box'); goog.require('goog.Disposable'); +goog.require('goog.array'); goog.require('goog.asserts'); goog.require('goog.events'); goog.require('ol.geom.Polygon'); @@ -31,15 +32,15 @@ ol.render.Box = function(style) { /** * @private - * @type {ol.Coordinate} + * @type {ol.Pixel} */ - this.startCoordinate_ = null; + this.startPixel_ = null; /** * @private - * @type {ol.Coordinate} + * @type {ol.Pixel} */ - this.endCoordinate_ = null; + this.endPixel_ = null; /** * @private @@ -62,19 +63,22 @@ goog.inherits(ol.render.Box, goog.Disposable); * @return {ol.geom.Polygon} Geometry. */ ol.render.Box.prototype.createGeometry_ = function() { - goog.asserts.assert(!goog.isNull(this.startCoordinate_)); - goog.asserts.assert(!goog.isNull(this.endCoordinate_)); - var startCoordinate = this.startCoordinate_; - var endCoordinate = this.endCoordinate_; - var coordinates = [ + goog.asserts.assert(!goog.isNull(this.startPixel_)); + goog.asserts.assert(!goog.isNull(this.endPixel_)); + goog.asserts.assert(!goog.isNull(this.map_)); + var startPixel = this.startPixel_; + var endPixel = this.endPixel_; + var pixels = [ [ - startCoordinate, - [startCoordinate[0], endCoordinate[1]], - endCoordinate, - [endCoordinate[0], startCoordinate[1]] + startPixel, + [startPixel[0], endPixel[1]], + endPixel, + [endPixel[0], startPixel[1]] ] ]; - return new ol.geom.Polygon(coordinates); + var coordinates = goog.array.map(pixels[0], + this.map_.getCoordinateFromPixel, this.map_); + return new ol.geom.Polygon([coordinates]); }; @@ -91,7 +95,6 @@ ol.render.Box.prototype.disposeInternal = function() { * @private */ ol.render.Box.prototype.handleMapPostCompose_ = function(event) { - this.geometry_ = this.createGeometry_(); var style = this.style_; goog.asserts.assert(!goog.isNull(style)); var render = event.getRender(); @@ -113,8 +116,8 @@ ol.render.Box.prototype.getGeometry = function() { */ ol.render.Box.prototype.requestMapRenderFrame_ = function() { if (!goog.isNull(this.map_) && - !goog.isNull(this.startCoordinate_) && - !goog.isNull(this.endCoordinate_)) { + !goog.isNull(this.startPixel_) && + !goog.isNull(this.endPixel_)) { this.map_.requestRenderFrame(); } }; @@ -141,12 +144,12 @@ ol.render.Box.prototype.setMap = function(map) { /** - * @param {ol.Coordinate} startCoordinate Start coordinate. - * @param {ol.Coordinate} endCoordinate End coordinate. + * @param {ol.Pixel} startPixel Start pixel. + * @param {ol.Pixel} endPixel End pixel. */ -ol.render.Box.prototype.setCoordinates = - function(startCoordinate, endCoordinate) { - this.startCoordinate_ = startCoordinate; - this.endCoordinate_ = endCoordinate; +ol.render.Box.prototype.setPixels = function(startPixel, endPixel) { + this.startPixel_ = startPixel; + this.endPixel_ = endPixel; + this.geometry_ = this.createGeometry_(); this.requestMapRenderFrame_(); }; diff --git a/src/ol/render/webgl/webglimmediate.js b/src/ol/render/webgl/webglimmediate.js new file mode 100644 index 0000000000..0f5ce82f09 --- /dev/null +++ b/src/ol/render/webgl/webglimmediate.js @@ -0,0 +1,109 @@ +goog.provide('ol.render.webgl.Immediate'); + + + +/** + * @constructor + * @implements {ol.render.IRender} + * @param {ol.webgl.Context} context Context. + * @param {number} pixelRatio Pixel ratio. + * @struct + */ +ol.render.webgl.Immediate = function(context, pixelRatio) { +}; + + +/** + * @param {ol.Feature} feature Feature. + * @param {ol.style.Style} style Style. + */ +ol.render.webgl.Immediate.prototype.drawFeature = function(feature, style) { +}; + + +/** + * @param {ol.geom.GeometryCollection} geometryCollectionGeometry Geometry + * collection. + * @param {Object} data Opaque data object. + */ +ol.render.webgl.Immediate.prototype.drawGeometryCollectionGeometry = + function(geometryCollectionGeometry, data) { +}; + + +/** + * @param {ol.geom.Point} pointGeometry Point geometry. + * @param {Object} data Opaque data object. + */ +ol.render.webgl.Immediate.prototype.drawPointGeometry = + function(pointGeometry, data) { +}; + + +/** + * @param {ol.geom.LineString} lineStringGeometry Line string geometry. + * @param {Object} data Opaque data object. + */ +ol.render.webgl.Immediate.prototype.drawLineStringGeometry = + function(lineStringGeometry, data) { +}; + + +/** + * @param {ol.geom.MultiLineString} multiLineStringGeometry + * MultiLineString geometry. + * @param {Object} data Opaque data object. + */ +ol.render.webgl.Immediate.prototype.drawMultiLineStringGeometry = + function(multiLineStringGeometry, data) { +}; + + +/** + * @param {ol.geom.MultiPoint} multiPointGeometry MultiPoint geometry. + * @param {Object} data Opaque data object. + */ +ol.render.webgl.Immediate.prototype.drawMultiPointGeometry = + function(multiPointGeometry, data) { +}; + + +/** + * @param {ol.geom.MultiPolygon} multiPolygonGeometry MultiPolygon geometry. + * @param {Object} data Opaque data object. + */ +ol.render.webgl.Immediate.prototype.drawMultiPolygonGeometry = + function(multiPolygonGeometry, data) { +}; + + +/** + * @param {ol.geom.Polygon} polygonGeometry Polygon geometry. + * @param {Object} data Opaque data object. + */ +ol.render.webgl.Immediate.prototype.drawPolygonGeometry = + function(polygonGeometry, data) { +}; + + +/** + * @param {ol.style.Fill} fillStyle Fill style. + * @param {ol.style.Stroke} strokeStyle Stroke style. + */ +ol.render.webgl.Immediate.prototype.setFillStrokeStyle = + function(fillStyle, strokeStyle) { +}; + + +/** + * @param {ol.style.Image} imageStyle Image style. + */ +ol.render.webgl.Immediate.prototype.setImageStyle = function(imageStyle) { +}; + + +/** + * @param {ol.style.Text} textStyle Text style. + */ +ol.render.webgl.Immediate.prototype.setTextStyle = function(textStyle) { +}; diff --git a/src/ol/renderer/webgl/webgllayerrenderer.js b/src/ol/renderer/webgl/webgllayerrenderer.js index 78897f8ffa..3c78897a3a 100644 --- a/src/ol/renderer/webgl/webgllayerrenderer.js +++ b/src/ol/renderer/webgl/webgllayerrenderer.js @@ -7,6 +7,7 @@ goog.require('ol.color.Matrix'); goog.require('ol.layer.Layer'); goog.require('ol.render.Event'); goog.require('ol.render.EventType'); +goog.require('ol.render.webgl.Immediate'); goog.require('ol.renderer.Layer'); goog.require('ol.renderer.webgl.map.shader.Color'); goog.require('ol.renderer.webgl.map.shader.Default'); @@ -237,8 +238,10 @@ ol.renderer.webgl.Layer.prototype.dispatchComposeEvent_ = function(type, context, frameState) { var layer = this.getLayer(); if (layer.hasListener(type)) { + var render = new ol.render.webgl.Immediate(context, + frameState.devicePixelRatio); var composeEvent = new ol.render.Event( - type, layer, null, frameState, null, context); + type, layer, render, frameState, null, context); layer.dispatchEvent(composeEvent); } }; diff --git a/src/ol/renderer/webgl/webglmaprenderer.js b/src/ol/renderer/webgl/webglmaprenderer.js index bf3e5ecacc..494551bbd6 100644 --- a/src/ol/renderer/webgl/webglmaprenderer.js +++ b/src/ol/renderer/webgl/webglmaprenderer.js @@ -20,6 +20,7 @@ goog.require('ol.layer.Image'); goog.require('ol.layer.Tile'); goog.require('ol.render.Event'); goog.require('ol.render.EventType'); +goog.require('ol.render.webgl.Immediate'); goog.require('ol.renderer.Map'); goog.require('ol.renderer.webgl.ImageLayer'); goog.require('ol.renderer.webgl.Layer'); @@ -282,10 +283,12 @@ ol.renderer.webgl.Map.prototype.createLayerRenderer = function(layer) { ol.renderer.webgl.Map.prototype.dispatchComposeEvent_ = function(type, frameState) { var map = this.getMap(); - var context = this.getContext(); if (map.hasListener(type)) { + var context = this.getContext(); + var render = new ol.render.webgl.Immediate(context, + frameState.devicePixelRatio); var composeEvent = new ol.render.Event( - type, map, null, frameState, null, context); + type, map, render, frameState, null, context); map.dispatchEvent(composeEvent); } };