如何在Open Layers 3中更改axisOrientation?

时间:2016-06-14 12:34:41

标签: javascript openlayers-3

我在OpenLayers 3中使用ImageStatic。投影的默认坐标从BOTTOM LEFT角开始(OY向上),但是我需要从TOP LEFT角落,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);

3 个答案:

答案 0 :(得分:0)

我认为您错误地将end传递给axisOrientation参数。我瞥了一眼ol代码,发现可能的值是enuneuwnu,所以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.
> 

答案 1 :(得分:0)

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

答案 2 :(得分:0)

我也尝试翻转 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