Javascript 开放层3中的坐标基于什么?它们是如何工作的?
我刚刚打开第3层,我发现: 我在示例中看到,您创建了一个向量层,在该层中,您将geoJSON作为源,geoJSON具有如下特性:Javascript 开放层3中的坐标基于什么?它们是如何工作的?,javascript,reactjs,openlayers,openlayers-3,Javascript,Reactjs,Openlayers,Openlayers 3,我刚刚打开第3层,我发现: 我在示例中看到,您创建了一个向量层,在该层中,您将geoJSON作为源,geoJSON具有如下特性: { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [[[-5e6, -1e6], [-4e6, 1e6], [-3e6, -1e6]]] } 现在我得到了一个漂亮的多边形,我不知道这些坐标是什么?我的意思是什么是-5e6?!,如果我有一个长
{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [[[-5e6, -1e6], [-4e6, 1e6], [-3e6, -1e6]]]
}
现在我得到了一个漂亮的多边形,我不知道这些坐标是什么?我的意思是什么是-5e6
?!,如果我有一个长的和lat,例如:
[[36.301744, 50.010456], [36.302180, 50.019864], [36.301025, 50.021730], [36.293856, 50.016215], [66.293682, 56.009240], [66.301744, 56.010456]]
如何将其转换为这些坐标?,实际上,我做了一些搜索,找到了一些链接:
但使用后:
polygon.transform('EPSG:4326', 'EPSG:3857');
对于变换
我的坐标(我仍然不知道要变换什么,因为我不知道像-5e6
这样的东西意味着什么),我仍然没有得到任何结果有人能告诉我这些坐标是基于什么以及它们是如何工作的吗?
谢谢 更新01:
下面是我运行的代码,它导致
无法读取内部geon/simplegeometry
中未定义的属性长度:
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}
/>
)
}
更新02:
根据答案卡贝索
的建议,我现在使用以下代码:
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]
我不知道为什么,但我的代码中似乎有点不正确,这导致地图应用程序的范围
和结束
不正确。它显示的所有信息都需要在同一个空间参考系(SR)中,通常由底图确定,例如OSM地图、Bing地图、,等。网络地图的实际SR为网络墨卡托EPSG:3857
现在,你要问的坐标是在韦伯墨卡托。你看到的价值观是用科学符号表示的。例如,1e6=1000000,换句话说,它意味着1x10^6
如果您的坐标是地理坐标(EPSG:4326),则需要将其转换为地图正在使用的SRpolygon.transform('EPSG:4326','EPSG:3857')
是将地理坐标转换为万维网墨卡托,如果您的地图使用万维网墨卡托(如果您有万维网底图,可能会这样做),它应该可以工作
问题更新
你的代码有几个问题
你有一个坐标数组而不是一个几何体,你需要创建一个几何体
在几何体上应用变换后,现在使用的是变换坐标而不是阵列的方法
您不需要为功能集合创建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:
在你的坐标数组中我遗漏了一些东西,就是要用坐标创建一个多边形
,你必须把一个环数组作为一个参数传递,而环就是一个坐标数组,修复的很好
这里我给你举了个例子
.地图{
高度:400px;
宽度:100%;
}
#a{显示:无;}
OL-来自Coords的功能
来自Coords的功能
//瓷砖层
var tile=新ol.layer.tile({
来源:new ol.source.OSM()
});
//矢量层
常数坐标=[
[
[36.301744, 50.010456],
[36.302180, 50.019864],
[36.301025, 50.021730],
[36.293856, 50.016215],
[36.293682, 50.009240],
[36.301744, 50.010456]
]
];
常数多边形=新的几何多边形(坐标);
多边形变换('EPSG:4326','EPSG:3857');
常量特征=新的ol.特征({
几何图形:多边形
});
const source=new ol.source.Vector();
source.addFeature(feature);
var vector=新的ol.layer.vector({
来源:,
风格:新的ol风格({
笔划:新的ol风格笔划({
颜色:“红色”,
宽度:3
}),
填充:新的ol.style.fill({
颜色:“rgba(255,0,0,0.1)”
})
})
})
var map=新ol.map({
图层:[
瓦片
//形象,,
矢量
],
目标:“地图”,
视图:新ol.view({
中心:Lonlat的其他项目([36.301025,50.021730]),
缩放:12
})
});
如果您的代码仍然不起作用,请将其添加到问题中,以便我们可以查看。@cabesuon我使用我运行的代码添加了一个更新,并导致了一个错误,当我将newCoord
分配到坐标时会发生错误。
@cabesuon请阅读update 02
,转换坐标似乎有问题,谢谢。我从“ol/source/Vector”导入了特征,然后复制粘贴了您的代码,得到错误:TypeError:feature.getId不是函数,调用addFeature
时似乎会发生此错误。从添加从“ol/Feature”导入的功能解决了此错误。
感谢迄今为止的帮助,我不再有任何错误,但我在地图上看不到任何东西!,我甚至试过const mycord=[[0,0],[100,100],[200,200],[300,300]
,所以我得到了一些大的东西,但没有用,原因是什么?是的,似乎阻止我得到结果的主要问题是环
,这意味着我的坐标必须在一个额外的数组中才能工作和显示一些东西,谢谢你的帮助!。没错,很高兴它能帮助你!
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);