How to change the axisOrientation in OpenLayers

Question

i am using a static image of a fantasy map but the coordinates start at the bottom right and go positive from right to left and down to up. I am trying to change the zero coordinate to be in the top right. so the end result would be coordinates going positive from top to bottom and left to right. this is so I can cheat and use image mapping software to get the coordinates to draw polygons for a geojson.

the "axisOrientation" property doesn't actually seam to do anything. its just a saved string as far as i can tell. i have tried several strings from the documentaion the property seams to just be a detail with no function.

html:

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Dove</title>
    <div id="mouse-position"></div>
    <style>
      #map {
        margin: 3em auto;
        width: 65vw;
        height: 80vh;
        background-color: #0f0f0f;
      }
      #title {
        text-align: center;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <h1 id="title">Dove Map</h1>
    <div id="map"></div>
    <!-- <script src="./index.js"></script> -->
    <script src="./doveMap.js"></script>
  </body>
</html>

Javascript:

import 'ol/ol.css';
import ImageLayer from 'ol/layer/Image';
import Feature from 'ol/Feature';
import GeoJSON from 'ol/format/GeoJSON';
import Map from 'ol/Map';
import Projection from 'ol/proj/Projection';
import Static from 'ol/source/ImageStatic';
import View from 'ol/View';
import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';
import { OSM, Vector as VectorSource } from 'ol/source';
import { getCenter } from 'ol/extent';
import imagePath from './images/doveMapTest.png';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
import MousePosition from 'ol/control/MousePosition';
import { createStringXY } from 'ol/coordinate';
import { defaults as defaultControls } from 'ol/control';

// Map views always need a projection.  Here we just want to map image
// coordinates directly to map coordinates, so we create a projection that uses
// the image extent in pixels.
var extent = [0, 0, 6374, 4250];
var projection = new Projection({
  code: 'local_image',
  units: 'pixels',
  extent: extent,
  axisOrientation: '',
});

var image = new CircleStyle({
  radius: 5,
  fill: null,
  stroke: new Stroke({ color: 'red', width: 1 }),
});

var styles = {
  Point: new Style({
    image: image,
  }),
  LineString: new Style({
    stroke: new Stroke({
      color: 'green',
      width: 1,
    }),
  }),
  MultiLineString: new Style({
    stroke: new Stroke({
      color: 'green',
      width: 1,
    }),
  }),
  MultiPoint: new Style({
    image: image,
  }),
  MultiPolygon: new Style({
    stroke: new Stroke({
      color: 'yellow',
      width: 1,
    }),
    fill: new Fill({
      color: 'rgba(255, 255, 0, 0.1)',
    }),
  }),
  Polygon: new Style({
    stroke: new Stroke({
      color: 'blue',
      lineDash: [4],
      width: 3,
    }),
    fill: new Fill({
      color: 'rgba(0, 0, 255, 0.1)',
    }),
  }),
  GeometryCollection: new Style({
    stroke: new Stroke({
      color: 'magenta',
      width: 2,
    }),
    fill: new Fill({
      color: 'magenta',
    }),
    image: new CircleStyle({
      radius: 10,
      fill: null,
      stroke: new Stroke({
        color: 'magenta',
      }),
    }),
  }),
  Circle: new Style({
    stroke: new Stroke({
      color: 'red',
      width: 2,
    }),
    fill: new Fill({
      color: 'rgba(255,0,0,0.2)',
    }),
  }),
};

var styleFunction = function (feature) {
  return styles[feature.getGeometry().getType()];
};

var geojsonObject = {
  type: 'FeatureCollection',
  crs: {
    type: 'name',
    properties: {
      name: 'EPSG:3857',
    },
  },
  features: [
    {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [3000, 1000],
      },
    },
    {
      type: 'Feature',
      geometry: {
        type: 'LineString',
        coordinates: [
          [4e6, -2e6],
          [8e6, 2e6],
        ],
      },
    },
    {
      type: 'Feature',
      geometry: {
        type: 'LineString',
        coordinates: [
          [4e6, 2e6],
          [8e6, -2e6],
        ],
      },
    },
    {
      type: 'Feature',
      geometry: {
        type: 'Polygon',
        coordinates: [
          [
            [-5e6, -1e6],
            [-4e6, 1e6],
            [-3e6, -1e6],
          ],
        ],
      },
    },
    {
      type: 'Feature',
      geometry: {
        type: 'MultiLineString',
        coordinates: [
          [
            [-1e6, -7.5e5],
            [-1e6, 7.5e5],
          ],
          [
            [1e6, -7.5e5],
            [1e6, 7.5e5],
          ],
          [
            [-7.5e5, -1e6],
            [7.5e5, -1e6],
          ],
          [
            [-7.5e5, 1e6],
            [7.5e5, 1e6],
          ],
        ],
      },
    },
    {
      type: 'Feature',
      geometry: {
        type: 'MultiPolygon',
        coordinates: [
          [
            [
              [-5e6, 6e6],
              [-5e6, 8e6],
              [-3e6, 8e6],
              [-3e6, 6e6],
            ],
          ],
          [
            [
              [-2e6, 6e6],
              [-2e6, 8e6],
              [0, 8e6],
              [0, 6e6],
            ],
          ],
          [
            [
              [1e6, 6e6],
              [1e6, 8e6],
              [3e6, 8e6],
              [3e6, 6e6],
            ],
          ],
        ],
      },
    },
    {
      type: 'Feature',
      geometry: {
        type: 'GeometryCollection',
        geometries: [
          {
            type: 'LineString',
            coordinates: [
              [-5e6, -5e6],
              [0, -5e6],
            ],
          },
          {
            type: 'Point',
            coordinates: [4e6, -5e6],
          },
          {
            type: 'Polygon',
            coordinates: [
              [
                [1e6, -6e6],
                [2e6, -4e6],
                [3e6, -6e6],
              ],
            ],
          },
        ],
      },
    },
  ],
};

var vectorSource = new VectorSource({
  features: new GeoJSON().readFeatures(geojsonObject),
});

var vectorLayer = new VectorLayer({
  source: vectorSource,
  style: styleFunction,
});

var mousePositionControl = new MousePosition({
  coordinateFormat: createStringXY(4),
  projection: 'EPSG:4326',
  // comment the following two lines to have the mouse position
  // be placed within the map.
  className: 'custom-mouse-position',
  target: document.getElementById('mouse-position'),
  undefinedHTML: '&nbsp;',
});

var map = new Map({
  controls: defaultControls().extend([mousePositionControl]),
  layers: [
    new ImageLayer({
      source: new Static({
        attributions: '© Malachi B. Artwork By Cameron F.',
        url: imagePath,
        projection: projection,
        imageExtent: extent,
      }),
    }),
    vectorLayer,
  ],
  target: 'map',
  view: new View({
    projection: projection,
    center: getCenter(extent),
    zoom: 2,
    minZoom: 2,
    maxZoom: 5,
    extent: [-500, -500, 6874, 4750], // this set the dragable area limits
  }),
});

console.log(projection.getAxisOrientation());

Answer 1

axisOrientation indicates the axis orientation used by proj4. If you are not using proj4 you must set up a transform https://openlayers.org/en/latest/apidoc/module-ol_proj.html#.addCoordinateTransforms

To reverse the y axis between the data and view you would need

addCoordinateTransforms(
  dataProjection,
  viewProjection,
  function(coordinate){return [coordinate[0], -coordinate[1]];},
  function(coordinate){return [coordinate[0], -coordinate[1]];}
);

How to change the axisOrientation in OpenLayers

Question

1 answers

solution1
0 2020-11-02 10:33:39

How to change the axisOrientation in OpenLayers

Question

1 answers

solution1 0 2020-11-02 10:33:39

solution1
0 2020-11-02 10:33:39