如何在 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”，它表示第一個坐標從左到右（從西到東），第二個坐標從上到下（從北到南）。