open layer 3 中的坐标是基于什么的，它们是如何工作的？

Question

我刚开始打开第 3 层，我发现 an example of drawing a polygon :

我在示例中看到您创建了一个矢量图层，并在该层中为它提供了一个 geoJSON 作为源，geoJSON 具有如下特征：

{
    'type': 'Feature',
    'geometry': {
      'type': 'Polygon',
      'coordinates': [[[-5e6, -1e6], [-4e6, 1e6], [-3e6, -1e6]]]
}

现在这行得通了，我得到了一个漂亮的多边形，但我不知道这些坐标是什么？我的意思是什么是 -5e6？！，如果我有像这样的经纬度：

 [[36.301744, 50.010456], [36.302180, 50.019864], [36.301025, 50.021730], [36.293856, 50.016215], [66.293682, 56.009240], [66.301744, 56.010456]]

如何将其转换为这些坐标？,
其实我做了一些搜索，我找到了一些链接：
open layers 3 how to draw a polygon programmatically?
但使用后：

polygon.transform('EPSG:4326', 'EPSG:3857');

到 transform 我的坐标（我仍然不知道我要转换成什么，因为我不知道 -5e6 是什么意思），我仍然不知道得到任何结果
有人可以阐明这些坐标基于什么以及它们是如何工作的吗？
谢谢。

更新 01：
这是代码 i 运行导致 cannot read property length of undefined inside geon/SimpleGeomerty:

const GeographicalMap = ({ onClick }) => {

    const myCoord = [[36.301744, 50.010456], [36.302180, 50.019864], [36.301025, 50.021730], [36.293856, 50.016215], [36.293682, 50.009240], [36.301744, 50.010456]]
    const newCoord = transform(myCoord, 'EPSG:4326', 'EPSG:3857')
    console.log('newCoord', newCoord)

    const geojsonObject = {
        'type': 'FeatureCollection',
        'crs': {
            'type': 'name',
            'properties': {
                'name': 'EPSG:4326'
            }
        },
        'features': [
            {
                'type': 'Feature',
                'geometry': {
                    'type': 'Polygon',
                    'coordinates': newCoord
                }
            },
        ]
    };


    var source = new VectorSource({
        features: (new GeoJSON()).readFeatures(geojsonObject)
    })

    var layer = new VectorLayer({
        source: source,
    });

    const layers = [layer]

    return (
        <Map
            onClick={onClick}
            layers={layers}
        />
    )
}

最让我困扰的是转换后的控制台日志显示的结果是：

[
  null,
  null,
  [
    36.301025,
    50.02173
  ],
  [
    36.293856,
    50.016215
  ],
  [
    36.293682,
    50.00924
  ],
  [
    36.301744,
    50.010456
  ]
]

更新 02：
正如答案 cabesuon 所建议的，我现在使用以下代码：

const myCoord = [[36.301744, 50.010456], [36.302180, 50.019864], [36.301025, 50.021730], [36.293856, 50.016215], [36.293682, 50.009240], [36.301744, 50.010456]]

    const polygon = new Polygon(myCoord);    
    polygon.transform('EPSG:4326', 'EPSG:3857');
    console.log('polygon', polygon)
    const feature = new Feature({
        geometry: polygon
    });

    const source = new VectorSource();
    source.addFeature(feature);

    const layer = new VectorLayer({
        source: source,
    });

但是地图上没有绘制任何内容，在控制台记录多边形后，我发现一个问题：

extent_: (4) [Infinity, Infinity, -Infinity, -Infinity]
ends_: (6) [0, 0, 0, 0, 0, 0]

我不知道为什么，但我的代码中似乎有些地方不正确，导致不正确的 extent_ 和 ends_

Answer 1

要使地图应用程序正常工作，它所呈现的所有信息都需要在同一空间参考系统 (SR) 中，通常由底图确定，例如 OSM 地图、Bing 地图等。 Web 地图的实际 SR 是 Web Mercator EPSG:3857.

现在，您要求的坐标在 Web Mercator 中。您看到的值是科学记数法。例如 1e6=1000000，换句话说就是 1x10^6.

如果您的坐标是地理坐标 (EPSG:4326)，您需要将其转换为地图正在使用的 SR。 polygon.transform('EPSG:4326', 'EPSG:3857') 正在将地理坐标转换为 Web 墨卡托，如果您的地图使用的是 Web 墨卡托（如果您有 Web 底图，它可能会这样做）它应该可以工作。

问题更新

您的代码有几个问题，

你有一个坐标数组而不是一个几何体，你需要创建一个几何体
在对几何应用变换之后，现在您使用的是变换坐标而不是数组的方法
您不需要为特征集合创建 geojson，只需创建一个特征并将其添加到源中

像这样的东西应该有用，

const coords = [[
  [36.301744, 50.010456], [36.302180, 50.019864], [36.301025, 50.021730],
  [36.293856, 50.016215], [36.293682, 50.009240], [36.301744, 50.010456]
]]; // edited on update 2
const polygon = new Polygon(coords);
polygon.transform('EPSG:4326', 'EPSG:3857');
const feature = new Feature({
  geometry: polygon
});
const source = new VectorSource();
source.addFeature(feature);

更新 2：我在你的坐标数组中遗漏了一些东西，问题是要创建一个带有坐标的 Polygon 你必须将一个环数组作为参数传递，环是一个坐标数组，修复它工作正常。

这里给大家打个比方，

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
   #a { display: none; }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
    <title>OL - Feature From Coords</title>
  </head>
  <body>
    <h2>Feature From Coords</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      // tile layer
      var tile = new ol.layer.Tile({
        source: new ol.source.OSM()
      });
      // vector layer
      const coords = [
        [
          [36.301744, 50.010456],
          [36.302180, 50.019864],
          [36.301025, 50.021730],
          [36.293856, 50.016215],
          [36.293682, 50.009240],
          [36.301744, 50.010456]
        ]
      ];
      const polygon = new ol.geom.Polygon(coords);
      polygon.transform('EPSG:4326', 'EPSG:3857');
      const feature = new ol.Feature({
        geometry: polygon
      });
      const source = new ol.source.Vector();
      source.addFeature(feature);
      var vector = new ol.layer.Vector({
        source,
        style: new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: 'red',
            width: 3
          }),
          fill: new ol.style.Fill({
            color: 'rgba(255, 0, 0, 0.1)'
          })
        })
      })
      var map = new ol.Map({
        layers: [
          tile,
          //image,
          vector
        ],
        target: 'map',
        view: new ol.View({
          center: ol.proj.fromLonLat([36.301025, 50.021730]),
          zoom: 12
        })
      });
    </script>
  </body>
</html>

open layer 3 中的坐标是基于什么的，它们是如何工作的？

What are the coordinates in open layer 3 based on and how do they work?

javascript

openlayers

reactjs

openlayers-3