2017-05-20 5 views
0

にreprojetするにGeoJSONのCRSを使用しOpenlayerことができます:は4私は、サーバーからCRSの定義とにGeoJSONファイル読んでい場

{"type": "FeatureCollection", 
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::32720" }  },                    
"features": [ many features,..... 
その後

地図上にロードしますが、それは別の大陸に表示されますグリニッジ子午線に近い。

私はドキュメントを読んで、多くの場所にfeatureProjectionオプション がありますが、私はソースかターゲットかを知っていません。

私は試してみてください。

var vectorLayerUTMPoints = new ol.layer.Vector({ 
    source: new ol.source.Vector({    
     url: '/static/points.geojson',    
     format: new ol.format.GeoJSON({featureProjection: 'EPSG:32720'}) // 
    }) 
    }); 

また:

var vectorLayerUTMPoints = new ol.layer.Vector({ 
source: new ol.source.Vector({    
    url: '/static/points.geojson',    
    projection: 'EPSG:32720', 
    format: new ol.format.GeoJSON() 
}) }); 

マップを参照するためにOSM層をロードし、良い仕事:

 var map = new ol.Map({ 
    layers: [ 
     new ol.layer.Tile({source: new ol.source.OSM()}), 
     vectorLayerUTMPoints 
    ], 
    target: 'map', 
    controls: ol.control.defaults({ 
     attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ 
     collapsible: false 
     }) 
    }), 
    view: new ol.View({ 
     projection: 'EPSG:3857', 
     center: [0, 0], 
     zoom: 2 
    }) 
    }); 

質問は、OpenLayer 4を読むことができますgeojsonファイルのcrs定義を編集し、 を彼の飛行のビューのcrsに変換するか、またはどうすればそれを解決できますか?

答えて

1

ここでは、2つの問題があります。まず、使用しようとしている投影がOpenLayersにデフォルトで含まれていないため、Proj4を使用してインポートする必要があります。デモのためにthis exampleからコードを取得しました。

まずPROJ4スクリプトとEPSG.ioからあなたの投影の定義が含まれます:

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.3/proj4.js"></script> 
<script src="https://epsg.io/32720.js"></script> 

あなたは今、あなたの投影への参照を保持するオブジェクトを作成することができます。

var myProj = ol.proj.get('EPSG:32720'); 

あなたの第二の問題は、ということですfeatureProjectionを間違って使用しています。レイヤーのformatオブジェクトに設定する必要があるプロパティは2つあります。dataProjectionはデータソースの投影であり、featureProjectionはそのフィーチャの変換先です。この場合、地図投影に合うように変換する必要があります。これはEPSG:3857です。

だからあなたのコードは次のようになります。返信用

var myProj = ol.proj.get('EPSG:32720'); 
var vectorLayerUTMPoints = new ol.layer.Vector({ 
source: new ol.source.Vector({    
    url: '/static/points.geojson',    
    format: new ol.format.GeoJSON({dataProjection: myProj, featureProjection: 'EPSG:3857'}) 
    }) 
}); 
0

おかげで、私は私が立ち往生しています 、あなたソリューションは非常に明確であるため、それ以前に答えることができませんでしたが、仕事をするcan't。 機能が間違った場所に表示されています。

proj4が正しくロードされたかどうかを知る方法はありますが、isValid()メソッド などはありません。

私はplunkerファイル作成:私はまた、あなたの暗示を試しclik to see here

を:

proj4.defs("EPSG:32720","+proj=utm +zone=20 +south +datum=WGS84 +units=m +no_defs"); 

var sourceProj = ol.proj.get('EPSG:32720'); 
var targetProj = ol.proj.get('EPSG:3857'); 
var UTMFormat = new ol.format.GeoJSON({dataProjection: sourceProj, featureProjection: targetProj'}); 

var vectorLayerUTMPoints = new ol.layer.Vector({ 
     source: new ol.source.Vector({    
      url: '/static/centroids32720.geojson',    
      format: UTMFormat 
     }), 
    style: styleFunction  
    }); 

また:

 proj4.defs("EPSG:32720","+proj=utm +zone=20 +south +datum=WGS84 +units=m +no_defs"); 
var UTMFormat = new ol.format.GeoJSON({dataProjection: 'EPSG:32720', featureProjection: 'EPSG:3857'}); 
var vectorLayerUTMPoints = new ol.layer.Vector({ 
     source: new ol.source.Vector({    
      url: '/static/centroids32720.geojson',    
      format: UTMFormat 
     }), 
    style: styleFunction  
    }); 

私はフランスでのポイントを参照してくださいが、再投影はありません。APIドキュメントによれば

defaultDataProjectionとfeatureProjectionそれは3つのいずれかとすることができるol.ProjectionLike ある: ol.ProjectionLike {ol.proj.Projection} {文字列} {不定}

ソースが良いです。

ご挨拶

関連する問題