任何 GeoJSON，总是将点放在非洲的左下角，即使 GeoJSON 中有坐标部分。
我使用 openlayers v3.20.1
GeoJSON，我试过使用来自:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>The Book of OpenLayers3 - Code samples</title>
<link rel="stylesheet" href="progr/nm/ol.css" type="text/css">
<script src="progr/nm/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="progr/nm/ol.js" type="text/javascript"></script>
<style type="text/css">
.map {
width: calc(50% - 6px - 1em);
height: 500px;
box-shadow: 4px 4px 20px black;
border: 3px solid blue;
float: left;
}
#edit {
padding: 1em;
height: calc(500px - 2em);
}
textarea {
width: 100%;
height: calc(100% - 4em);
}
.tree {
width: auto;
border: 3px solid red;
background: yellow;
float: left;
}
</style>
</head>
<body>
<dev id='map' class='map col-sm-6'></dev>
<dev id='edit' class='map col-sm-6'>
<textarea id='read'></textarea>
<p class='text-primary'>
Paste any valid GeoJSON string and press the <button id='readButton' class='btn btn-primary btn-xs'>Read button</button>.
</p>
</dev>
<script>
var format = new ol.format.GeoJSON();
var layers = {
OSM: new ol.layer.Tile({source: new ol.source.OSM()}),
vec: new ol.layer.Vector({
source: new ol.source.Vector({
format: format,
projection: 'EPSG:3857'
})
})
};
var maps = {
map: new ol.Map({
target: 'map',
renderer: 'canvas',
layers: [layers['OSM'], layers['vec']],
view: new ol.View({
center: ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857'),
zoom: 2
})
})
};
$('#readButton').on('click', function(){
var src = layers['vec'].getSource();
var txt = $('#read').val();
if(txt === ''){
src.clear();
return;
}
var json = JSON.parse(txt);
var feat = format.readFeatures(json);
src.addFeatures(feat);
});
</script>
</body>
</html>我也曾尝试将“txt”内容直接传递给 readFeatures 方法，但没有任何区别。
var feat = format.readFeatures(txt);
src.addFeatures(feat);
最佳答案
geoJSON 或其解析没有问题。该错误是投影/坐标系问题。您使用的 map 投影不使用经纬度作为其测量单位。取而代之的是您使用的默认投影的测量单位，web Mercator (EPSG:3857), is meters .而您使用的 json 文件使用 WGS84 或经纬度对。
因此，您所有的点都聚集在本初子午线与赤道 [0,0] 交点的东/西 +/- 180 米和北/南 +/- 90 米处，该点位于非洲东海岸附近.如果你放大非常远，复制并粘贴你链接到的 json 文件，你会发现:
您可以通过确保重新投影数据以进行显示来解决此问题。我所做的唯一更改是在点击事件中:
$('#readButton').on('click', function(){
var src = layers['vec'].getSource();
var txt = $('#read').val();
if(txt === ''){
src.clear();
return;
}
var json = JSON.parse(txt);
var feat = format.readFeatures(json, {
dataProjection: 'EPSG:4326', // define the input SRS/CRS
featureProjection: 'EPSG:3857' // define the output SRS/CRS
});
src.addFeatures(feat);
});
通过为您代入这个 onclick 事件，我得到了:
关于javascript - openlayers3 尝试与 GeoJSON 交互添加功能，但无论我放什么，我总是在非洲东南部的一个地方得到一分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42153257/