如何在 Open Layers 3 中更改轴方向？

Question

I am working with ImageStatic in OpenLayers 3. Default coordinates of projection starts from BOTTOM LEFT corner (OY is UPWARD), but I need it from TOP LEFT corner, and OY is DOWNWARD

During the documentation it's could be solved by axisOrientation , but it's not work.

How can I change orientation?

My code:

HTML

<div id="map"></div>

CSS

#map {
    height: 400px;
}

JS

var extent = [0, 0, 1000, 1013];

var projection = new ol.proj.Projection({
    code: 'xkcd-image',
  units: 'pixels',
  extent: extent,
  axisOrientation: 'end'
});

map = new ol.Map({
    interactions: ol.interaction.defaults().extend([
    new ol.interaction.DragRotateAndZoom()
  ]), layers: [
    new ol.layer.Image({
        source: new ol.source.ImageStatic({
        attributions: '© <a href="http://xkcd.com/license.html">xkcd</a>',
                url: 'http://evstudio.com/wp-content/uploads/2012/06/Small-House-Plan-1200.jpg',
        imageSize: [1000, 1013],
        imageExtent: extent,
      })
    })
  ],
    target: 'map',
  view: new ol.View({
    projection: projection,
    center: ol.extent.getCenter(extent),
    zoom: 1,
    maxZoom: 4,
    minZoom: 0
    })
});

var mousePosition = new ol.control.MousePosition({
    coordinateFormat: ol.coordinate.createStringXY(2),
  projection: projection,
  target: document.getElementById('myposition'),
  undefinedHTML: '&nbsp;'
});
map.addControl(mousePosition);

Answer 1

I also tried to flip the Y Axis without any success. All different options which I tried for axisOrientation has no effect. I want that the Y Axis is low at the top and get bigger to bottom. I tried the following code (can be edited here:https://codesandbox.io/s/wms-no-proj-forked-6ru4w?file=/main.js ):

import "ol/ol.css";

import Map from "ol/Map";
import Projection from "ol/proj/Projection";
import View from "ol/View";
import { ScaleLine, defaults as defaultControls } from "ol/control";
import MousePosition from "ol/control/MousePosition";
import { addProjection } from "ol/proj";
import { createStringXY } from "ol/coordinate";
var layers = [];

var projection = new Projection({
  code: "test",
  units: "m",
  axisOrientation: "neu"
});

addProjection(projection);
var map = new Map({
  controls: defaultControls().extend([new ScaleLine()]),
  layers: layers,
  target: "map",
  view: new View({
    center: [660000, 190000],
    projection: projection,
    zoom: 9
  })
});
map.addControl(
  new MousePosition({
    coordinateFormat: createStringXY(4)
  })
);

We use Openlayers 6

Answer 2

I think you wrongly pass end to the axisOrientation parameter. I had a glance to the ol code and found that possible values are enu , neu and wnu so end seems to be invalid while axisOrientation:'neu' should be the one you are looking for. Explanation for the acronyms as getted from ol code:

/**
 * Get the axis orientation of this projection.
 * Example values are:
 * enu - the default easting, northing, elevation.
 * neu - northing, easting, up - useful for "lat/long" geographic coordinates,
 *     or south orientated transverse mercator.
 * wnu - westing, northing, up - some planetary coordinate systems have
 *     "west positive" coordinate systems

also found this which might helps

> The +axis switch takes three character arguments defining the axis
> orientation of the coordinate system.  The possible values are:
> 
> 'e' - easting
> 'w' - westing - an x/longitude with the opposite sign to normal.
> 'n' - northing
> 's' - southing - a y/latitude with the opposite sign to the normal.
> 'u' - up - normal z
> 'd' - down - a z/elevation with the opposite sign to the normal.
> 

Answer 3

I have not used ol.source.ImageStatic, but I would guess that your axisOrientation should be esu . The imporant part is 'es', which says that the first coordinate goes from left to right (west to east) and the second coordinate goes from top to bottom (north to south).