如何更改 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.这样我就可以欺骗并使用图像映射软件来获取坐标来为 geojson 绘制多边形。

the "axisOrientation" property doesn't actually seam to do anything. “axisOrientation”属性实际上并没有做任何事情。 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: 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: 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. axisOrientation表示 proj4 使用的轴方向。 If you are not using proj4 you must set up a transform https://openlayers.org/en/latest/apidoc/module-ol_proj.html#.addCoordinateTransforms如果您不使用 proj4，则必须设置转换https://openlayers.org/en/latest/apidoc/module-ol_proj.html#.addCoordinateTransforms

To reverse the y axis between the data and view you would need要反转数据和视图之间的 y 轴，您需要

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

如何更改 OpenLayers 中的轴方向

问题描述

1 个解决方案

解决方案1
0 2020-11-02 10:33:39

如何更改 OpenLayers 中的轴方向

问题描述

1 个解决方案

解决方案1 0 2020-11-02 10:33:39

解决方案1
0 2020-11-02 10:33:39