[GIS] Direction of the Y axis in OpenLayers

coordinate systemopenlayers

A have an openlayers map with with two layers: a Tiled image layer (served through zoomify protocol) and a Vector layer. I draw boxes/rectangles on the image then get their geojson coordinates and save them in my DB.

After upgrading from OpenLayers 2 to 3 on my site, all my rectangular features are displayed in the wrong place. It turns out that with my OL2 implementation the Y axis is centered at the bottom of the map and points upward whereas in my OL 3 implementation the Y axis is centered at the top of the map and also points upward.

For backward compatibility reasons I don't want to update the coordinates in the DB. So I want the existing coordinates to show in the right place in my OL 3 image viewer.

How should I define the layers/views/map in OL3 to centre the Y axis of my features at the bottom of the image?

I've tried to reproduce the issue here:

https://jsfiddle.net/zjee9sdw/

You'll see that the box appears above the image. I want this box to appear in the bottom left corner of the image without changing it's input coordinates (or transforming them).

Best Answer

The Zoomify source in OpenLayers 3 has indeed a different coordinate system than in OpenLayers 2. However, both coordinate systems do not make much sense. Ideally, the origin would be in the top left corner, and y coordinates would increase from top to bottom.

For now, all you can do is configure OpenLayers 3 to do an automatic transform of your coordinates. The following projection definition will do the trick:

var proj = new ol.proj.Projection({code: 'ZOOMIFY'});
ol.proj.addProjection(proj);
ol.proj.addCoordinateTransforms('EPSG:4326', proj,
    function(coord) {
      return [coord[0], -options.image_height + coord[1]];
    } /*, inverse transform here */);

To apply this transform, you also have to change the line that reads the features:

var features = (new ol.format.GeoJSON()).readFeatures(geojsonObject,
    {featureProjection: proj});

Note that this will not be necessary when you configure your vector source with a url.

Updated JSFiddle: https://jsfiddle.net/zjee9sdw/2/

Related Solutions

OpenLayers 3 – Setting Layer Visibility

Aragon, your answer pointed me in the right direction. Below is my final unclean code for adding layers to an array and then controling them.

In a javascript file I initialized the map and used a function to toggle visibility as follows:

//Layer array
var layersArray = [];

//Map view (Initial location)
var view = new ol.View2D({
// the view's initial state
center: ol.proj.transform([*Lat*,*Long*], 'EPSG:4326', 'EPSG:3857'),
zoom: 12
});

/*  Map Initialization  */
function initializeMap(){

var esribase = new ol.layer.Tile({
preload: Infinity,
  source: new ol.source.XYZ({
    url: 'http://server.arcgisonline.com/ArcGIS/rest/services/' +
        'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
  })
});

var poly1 = new ol.layer.Tile({
source: new ol.source.TileWMS({
  url: 'http://localhost:8080/geoserver/wms',
  params: {'LAYERS': '*Workspace*:*Layer*', 'TILED': true}
 })
}); 
poly1.setVisible(false);

var poly2 = new ol.layer.Tile({
source: new ol.source.TileWMS({
  url: 'http://localhost:8080/geoserver/wms',
  params: {'LAYERS': '*Workspace*:*Layer*', 'TILED': true}
 })
}); 
poly2.setVisible(false);

var poly3 = new ol.layer.Tile({
source: new ol.source.TileWMS({
  url: 'http://localhost:8080/geoserver/wms',
  params: {'LAYERS': '*Workspace*:*Layer*', 'TILED': true}
 })
}); 
poly3.setVisible(false);

layersArray.push(esribase); //0
layersArray.push(poly1); //1
layersArray.push(poly2); //2
layersArray.push(poly3);//3

var map = new ol.Map({
controls: ol.control.defaults().extend([
new ol.control.ScaleLine({
  units: ol.control.ScaleLineUnits.METRIC
})
]),
renderer: ol.RendererHint.CANVAS,
target: 'map',
layers: layersArray,

view:view
});
}

// Layer visibility function
function layerswitch(evt){
layersArray[evt.value].setVisible(evt.checked);
}

In the HTML I used simple checkboxes (example of poly1 toggle):

<input  style='cursor:pointer' type="checkbox" value="1" onclick="javascript:layerswitch(this)" class="Cpoly1" name="poly1check" id="poly1check"/><label id="poly1checkLabel" for="poly1check">Polygon 1 Layer Switcher</label>

[GIS] How to resize a feature and prevent it from scaling when zooming in OpenLayers 3

I assume you use an ol.style.Icon. ol.style.Icon has a scale option that you can use to scale the icon image.

For example, if you want to scale an image down you'll use something like this:

var style = new ol.style.Style({
  image: new ol.style.Icon({
    url: 'http://example.com/icon.png',
    scale: 0.5,
    // …
  })
});

Now, if you want different scale values based on the current resolution, you can pass a style function to the vector layer:

var iconStyle = new ol.style.Icon({
  url: 'http://example.com/icon.png',
  // …
});

var styles = [new ol.style.Style({
  image: iconStyle
})];

var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector(),
  style: function(feature, resolution) {
    // "func" is your function that gives you a scale for a resolution
    var scale = func(resolution);
    iconStyle.setScale(scale);
    return styles;
  })
});

Note that, as an optimization, the above code reuses the ol.style.Icon object, the ol.style.Style object and the array of styles, to avoid creating objects each time the style function is called.

Best Answer

Related Solutions

OpenLayers 3 – Setting Layer Visibility

[GIS] How to resize a feature and prevent it from scaling when zooming in OpenLayers 3

Related Question