Merge pull request #1367 from fredj/vector-api-hdpi

[vector-api] High dpi devices support

examples/wms-image-custom-proj.js

@@ -28,6 +28,7 @@ var layers = [
         'LAYERS': 'ch.swisstopo.pixelkarte-farbe-pk1000.noscale',
         'FORMAT': 'image/jpeg'
       },
+      serverType: 'mapserver',
       extent: extent
     })
   }),
@@ -42,6 +43,7 @@ var layers = [
             'National parks / geo.admin.ch</a>'
       })],
       params: {'LAYERS': 'ch.bafu.schutzgebiete-paerke_nationaler_bedeutung'},
+      serverType: 'mapserver',
       extent: extent
     })
   })

examples/wms-image.js

@@ -15,6 +15,7 @@ var layers = [
     source: new ol.source.ImageWMS({
       url: 'http://demo.opengeo.org/geoserver/wms',
       params: {'LAYERS': 'topp:states'},
+      serverType: 'geoserver',
       extent: [-13884991, 2870341, -7455066, 6338219]
     })
   })

examples/wms-no-proj.js

@@ -37,6 +37,7 @@ var layers = [
       })],
       crossOrigin: 'anonymous',
       params: {'LAYERS': 'ch.bafu.schutzgebiete-paerke_nationaler_bedeutung'},
+      serverType: 'mapserver',
       url: 'http://wms.geo.admin.ch/'
     })
   })

src/objectliterals.jsdoc

@@ -514,6 +514,11 @@
  * @property {number|undefined} displayDpi The display resolution. Default is `96`.
  * @property {number|undefined} metersPerUnit The meters-per-unit value. Default is `1`.
  * @property {ol.Extent|undefined} extent Extent.
+ * @property {boolean|undefined} hidpi Use the `ol.Map#devicePixelRatio` value when
+ *     requesting the image from the remote server. Default is `true`.
+ * @property {ol.source.wms.ServerType|undefined} serverType The type of the remote WMS
+ *     server: `mapserver`, `geoserver` or `qgis`. Only needed if `hidpi` is `true`.
+ *     Default is `undefined`.
  * @property {boolean|undefined} useOverlay If `true`, will use
  *     `GETDYNAMICMAPOVERLAYIMAGE`.
  * @property {ol.proj.ProjectionLike} projection Projection.
@@ -560,6 +565,8 @@
  * @property {null|string|undefined} crossOrigin crossOrigin setting for image
  *     requests.
  * @property {ol.Extent|undefined} extent Extent.
+ * @property {boolean|undefined} hidpi Use the `ol.Map#devicePixelRatio` value when
+ *     requesting the image from the remote server. Default is `true`.
  * @property {Object.<string,*>} params WMS request parameters. At least a
  *     `LAYERS` param is required. `STYLES` is `` by default. `VERSION` is
  *     `1.3.0` by default. `WIDTH`, `HEIGHT`, `BBOX` and `CRS` (`SRS` for WMS

src/ol/image.js

@@ -28,11 +28,13 @@ ol.ImageState = {
  * @extends {goog.events.EventTarget}
  * @param {ol.Extent} extent Extent.
  * @param {number} resolution Resolution.
+ * @param {number} pixelRatio Pixel ratio.
  * @param {string} src Image source URI.
  * @param {?string} crossOrigin Cross origin.
  * @param {Array.<ol.Attribution>} attributions Attributions.
  */
-ol.Image = function(extent, resolution, src, crossOrigin, attributions) {
+ol.Image =
+    function(extent, resolution, pixelRatio, src, crossOrigin, attributions) {
 
   goog.base(this);
 
@@ -54,6 +56,12 @@ ol.Image = function(extent, resolution, src, crossOrigin, attributions) {
    */
   this.src_ = src;
 
+  /**
+   * @private
+   * @type {number}
+   */
+  this.pixelRatio_ = pixelRatio;
+
   /**
    * @private
    * @type {number}
@@ -137,6 +145,14 @@ ol.Image.prototype.getImageElement = function(opt_context) {
 };
 
 
+/**
+ * @return {number} PixelRatio.
+ */
+ol.Image.prototype.getPixelRatio = function() {
+  return this.pixelRatio_;
+};
+
+
 /**
  * @return {number} Resolution.
  */

src/ol/renderer/canvas/canvasimagelayerrenderer.js

@@ -78,8 +78,8 @@ ol.renderer.canvas.ImageLayer.prototype.prepareFrame =
   var hints = frameState.viewHints;
 
   if (!hints[ol.ViewHint.ANIMATING] && !hints[ol.ViewHint.INTERACTING]) {
-    image = imageSource.getImage(
+    image = imageSource.getImage(frameState.extent, viewResolution,
-        frameState.extent, viewResolution, view2DState.projection);
+        frameState.devicePixelRatio, view2DState.projection);
     if (!goog.isNull(image)) {
       var imageState = image.getState();
       if (imageState == ol.ImageState.IDLE) {
@@ -95,7 +95,7 @@ ol.renderer.canvas.ImageLayer.prototype.prepareFrame =
   if (!goog.isNull(this.image_)) {
     image = this.image_;
     var imageExtent = image.getExtent();
-    var imageResolution = image.getResolution();
+    var imageResolution = image.getResolution() / image.getPixelRatio();
     var devicePixelRatio = frameState.devicePixelRatio;
     ol.vec.Mat4.makeTransform2D(this.imageTransform_,
         devicePixelRatio * frameState.size[0] / 2,

src/ol/renderer/dom/domimagelayerrenderer.js

@@ -66,8 +66,8 @@ ol.renderer.dom.ImageLayer.prototype.prepareFrame =
   var hints = frameState.viewHints;
 
   if (!hints[ol.ViewHint.ANIMATING] && !hints[ol.ViewHint.INTERACTING]) {
-    var image_ = imageSource.getImage(
+    var image_ = imageSource.getImage(frameState.extent, viewResolution,
-        frameState.extent, viewResolution, view2DState.projection);
+        frameState.devicePixelRatio, view2DState.projection);
     if (!goog.isNull(image_)) {
       var imageState = image_.getState();
       if (imageState == ol.ImageState.IDLE) {

src/ol/renderer/webgl/webglimagelayerrenderer.js

@@ -95,8 +95,8 @@ ol.renderer.webgl.ImageLayer.prototype.prepareFrame =
   var hints = frameState.viewHints;
 
   if (!hints[ol.ViewHint.ANIMATING] && !hints[ol.ViewHint.INTERACTING]) {
-    var image_ = imageSource.getImage(
+    var image_ = imageSource.getImage(frameState.extent, viewResolution,
-        frameState.extent, viewResolution, view2DState.projection);
+        frameState.devicePixelRatio, view2DState.projection);
     if (!goog.isNull(image_)) {
       var imageState = image_.getState();
       if (imageState == ol.ImageState.IDLE) {

src/ol/source/imagesource.js

@@ -78,17 +78,18 @@ goog.inherits(ol.source.Image, ol.source.Source);
  * @protected
  * @param {ol.Extent} extent Extent.
  * @param {number} resolution Resolution.
+ * @param {number} pixelRatio Pixel ratio.
  * @param {ol.Size} size Size.
  * @param {ol.proj.Projection} projection Projection.
  * @return {ol.Image} Single image.
  */
 ol.source.Image.prototype.createImage =
-    function(extent, resolution, size, projection) {
+    function(extent, resolution, pixelRatio, size, projection) {
   var image = null;
   var imageUrl = this.imageUrlFunction(extent, size, projection);
   if (goog.isDef(imageUrl)) {
     image = new ol.Image(
-        extent, resolution, imageUrl, this.crossOrigin_,
+        extent, resolution, pixelRatio, imageUrl, this.crossOrigin_,
         this.getAttributions());
   }
   return image;
@@ -113,6 +114,7 @@ ol.source.Image.prototype.findNearestResolution =
 /**
  * @param {ol.Extent} extent Extent.
  * @param {number} resolution Resolution.
+ * @param {number} pixelRatio Pixel ratio.
  * @param {ol.proj.Projection} projection Projection.
  * @return {ol.Image} Single image.
  */

src/ol/source/imagestaticsource.js

@@ -38,7 +38,7 @@ ol.source.ImageStatic = function(options) {
    * @type {ol.Image}
    */
   this.image_ = this.createImage(
-      imageExtent, imageResolution, imageSize, projection);
+      imageExtent, imageResolution, 1, imageSize, projection);
 
 };
 goog.inherits(ol.source.ImageStatic, ol.source.Image);
@@ -48,7 +48,7 @@ goog.inherits(ol.source.ImageStatic, ol.source.Image);
  * @inheritDoc
  */
 ol.source.ImageStatic.prototype.getImage =
-    function(extent, resolution, projection) {
+    function(extent, resolution, pixelRatio, projection) {
   if (ol.extent.intersects(extent, this.image_.getExtent())) {
     return this.image_;
   }

src/ol/source/imagewmssource.js

@@ -38,6 +38,18 @@ ol.source.ImageWMS = function(options) {
     imageUrlFunction: imageUrlFunction
   });
 
+  /**
+   * @private
+   * @type {ol.source.wms.ServerType|undefined}
+   */
+  this.serverType_ = options.serverType;
+
+  /**
+   * @private
+   * @type {boolean}
+   */
+  this.hidpi_ = goog.isDef(options.hidpi) ? options.hidpi : true;
+
   /**
    * @private
    * @type {ol.Image}
@@ -48,8 +60,7 @@ ol.source.ImageWMS = function(options) {
    * @private
    * @type {number}
    */
-  this.ratio_ = goog.isDef(options.ratio) ?
+  this.ratio_ = goog.isDef(options.ratio) ? options.ratio : 1.5;
-      options.ratio : 1.5;
 
 };
 goog.inherits(ol.source.ImageWMS, ol.source.Image);
@@ -69,12 +80,14 @@ ol.source.ImageWMS.prototype.getParams = function() {
  * @inheritDoc
  */
 ol.source.ImageWMS.prototype.getImage =
-    function(extent, resolution, projection) {
+    function(extent, resolution, pixelRatio, projection) {
   resolution = this.findNearestResolution(resolution);
+  pixelRatio = this.hidpi_ ? pixelRatio : 1;
 
   var image = this.image_;
   if (!goog.isNull(image) &&
       image.getResolution() == resolution &&
+      image.getPixelRatio() == pixelRatio &&
       ol.extent.containsExtent(image.getExtent(), extent)) {
     return image;
   }
@@ -83,9 +96,15 @@ ol.source.ImageWMS.prototype.getImage =
   ol.extent.scaleFromCenter(extent, this.ratio_);
   var width = (extent[2] - extent[0]) / resolution;
   var height = (extent[3] - extent[1]) / resolution;
-  var size = [width, height];
+  var size = [width * pixelRatio, height * pixelRatio];
 
-  this.image_ = this.createImage(extent, resolution, size, projection);
+  if (goog.isDef(this.serverType_) && pixelRatio > 1) {
+    var param = ol.source.wms.getDpiParam(this.serverType_, pixelRatio);
+    goog.object.extend(this.params_, param);
+  }
+
+  this.image_ = this.createImage(
+      extent, resolution, pixelRatio, size, projection);
   return this.image_;
 };
 

src/ol/source/mapguidesource.js

@@ -31,6 +31,12 @@ ol.source.MapGuide = function(options) {
     imageUrlFunction: imageUrlFunction
   });
 
+  /**
+   * @private
+   * @type {boolean}
+   */
+  this.hidpi_ = goog.isDef(options.hidpi) ? options.hidpi : true;
+
   /**
    * @private
    * @type {number}
@@ -72,12 +78,14 @@ goog.inherits(ol.source.MapGuide, ol.source.Image);
  * @inheritDoc
  */
 ol.source.MapGuide.prototype.getImage =
-    function(extent, resolution, projection) {
+    function(extent, resolution, pixelRatio, projection) {
   resolution = this.findNearestResolution(resolution);
+  pixelRatio = this.hidpi_ ? pixelRatio : 1;
 
   var image = this.image_;
   if (!goog.isNull(image) &&
       image.getResolution() == resolution &&
+      image.getPixelRatio() == pixelRatio &&
       ol.extent.containsExtent(image.getExtent(), extent)) {
     return image;
   }
@@ -88,9 +96,10 @@ ol.source.MapGuide.prototype.getImage =
   }
   var width = (extent[2] - extent[0]) / resolution;
   var height = (extent[3] - extent[1]) / resolution;
-  var size = [width, height];
+  var size = [width * pixelRatio, height * pixelRatio];
 
-  this.image_ = this.createImage(extent, resolution, size, projection);
+  this.image_ = this.createImage(
+      extent, resolution, pixelRatio, size, projection);
   return this.image_;
 };
 

src/ol/source/wmssource.js

@@ -1,9 +1,20 @@
 goog.provide('ol.source.wms');
 
+goog.require('goog.asserts');
 goog.require('goog.object');
 goog.require('goog.uri.utils');
 
 
+/**
+ * @enum {string}
+ */
+ol.source.wms.ServerType = {
+  MAPSERVER: 'mapserver',
+  GEOSERVER: 'geoserver',
+  QGIS: 'qgis'
+};
+
+
 /**
  * @param {string} baseUrl WMS base URL.
  * @param {Object.<string, string|number>} params Request parameters.
@@ -12,8 +23,7 @@ goog.require('goog.uri.utils');
  * @param {ol.proj.Projection} projection Projection.
  * @return {string} WMS GetMap request URL.
  */
-ol.source.wms.getUrl =
+ol.source.wms.getUrl = function(baseUrl, params, extent, size, projection) {
-    function(baseUrl, params, extent, size, projection) {
   var baseParams = {
     'SERVICE': 'WMS',
     'VERSION': '1.3.0',
@@ -40,3 +50,23 @@ ol.source.wms.getUrl =
 
   return goog.uri.utils.appendParamsFromMap(baseUrl, baseParams);
 };
+
+
+/**
+ * @param {ol.source.wms.ServerType} serverType Server name.
+ * @param {number} pixelRatio Pixel ratio.
+ * @return {Object.<string, string>}
+ */
+ol.source.wms.getDpiParam = function(serverType, pixelRatio) {
+  var param = {};
+  if (serverType == ol.source.wms.ServerType.MAPSERVER) {
+    param['MAP_RESOLUTION'] = 90 * pixelRatio;
+  } else if (serverType == ol.source.wms.ServerType.GEOSERVER) {
+    param['FORMAT_OPTION'] = 'dpi:' + 90 * pixelRatio;
+  } else if (serverType == ol.source.wms.ServerType.QGIS) {
+    param['DPI'] = 90 * pixelRatio;
+  } else {
+    goog.asserts.fail();
+  }
+  return param;
+};