我使用的是一个幻想地图的静态图像，但坐标从右下角开始，从右到左，从下到上为正。我正在尝试将零坐标更改为右上角。所以最终的结果是坐标从上到下，从左到右都是正的。这是为了让我可以作弊，并使用图像映射软件来获取坐标，为geojson绘制多边形。
"；axisOrientation"；属性实际上并没有接缝来做任何事情。据我所知，这只是一个保存的字符串。我已经尝试了文档中的几个字符串，属性seams只是一个没有函数的细节。
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: ' ',
});
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());
axisOrientation表示proj4使用的轴方向。如果不使用proj4，则必须设置转换https://openlayers.org/en/latest/apidoc/module-ol_proj.html#.addCoordinateTransforms
要在数据和视图之间反转y轴，您需要
addCoordinateTransforms(
dataProjection,
viewProjection,
function(coordinate){return [coordinate[0], -coordinate[1]];},
function(coordinate){return [coordinate[0], -coordinate[1]];}
);