如何更改 OpenLayers 中的軸方向
[英]How to change the axisOrientation in OpenLayers
問題描述
我使用的是幻想地圖的靜態圖像，但坐標從右下角開始，從右到左，從下到上為正。 我正在嘗試將零坐標更改為右上角。 所以最終的結果將是坐標從上到下和從左到右為正。 這樣我就可以欺騙並使用圖像映射軟件來獲取坐標來為 geojson 繪制多邊形。
“axisOrientation”屬性實際上並沒有做任何事情。 據我所知，它只是一個保存的字符串。 我已經嘗試了文檔中的幾個字符串屬性接縫只是一個沒有功能的細節。
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());
1 個解決方案
解決方案1
0 2020-11-02 10:33:39
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]];}
);
如何在 Open Layers 3 中更改軸方向？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.