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

Question

我在 OpenLayers 3 中使用 ImageStatic。投影的默认坐标从左下角开始（OY 是向上），但我需要从左上角开始，而 OY 是向下

在文档中，它可以通过axisOrientation解决，但它不起作用。

我怎样才能改变方向？

我的代码：

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

我也尝试翻转 Y 轴但没有成功。 我为 axisOrientation 尝试的所有不同选项都无效。 我希望 Y 轴顶部较低，底部变大。 我尝试了以下代码（可以在这里编辑：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)
  })
);

我们使用 Openlayers 6

Answer 2

我认为您错误地将end传递给了axisOrientation参数。 我看了一眼 ol 代码，发现可能的值是enu 、 neu和wnu所以end似乎是无效的，而axisOrientation:'neu'应该是你正在寻找的。 从 ol 代码中得到的首字母缩略词的解释：

/**
 * 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

还发现这可能有帮助

> 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

我没有使用过 ol.source.ImageStatic，但我猜你的 axisOrientation 应该是esu 。 重要的部分是“es”，它表示第一个坐标从左到右（从西到东），第二个坐标从上到下（从北到南）。