我是第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：这是我运行的代码，它导致cannot read property length of undefined内部出现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_
为了使地图应用程序能够正常工作，它所呈现的所有信息都必须位于同一空间参考系统（SR）中，通常由底图确定，例如OSM地图，Bing地图等。Web地图的实际SR为Web墨卡托EPSG：3857。
现在，您要查询的坐标在Web Mercator中。您所看到的值是科学计数法。例如1e6 = 1000000，换句话说就是1x10 ^ 6。
如果您的坐标是地理（EPSG：4326），则需要将其转换为地图所使用的SR。 polygon.transform('EPSG:4326', 'EPSG:3857')正在将地理坐标转换为Web Mercator，如果您的地图使用Web Mercator（如果您有Web底图，它可能也会这样做），它应该可以工作。
问题更新
您的代码有几个问题，
这样的事情应该起作用，
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>