4 내가 서버에서 CRS 정의와 GeoJson 파일 읽기하고 즉시

Question

에 reprojet하는 GeoJson의 CRS를 사용 Openlayer 수 :

{"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로 변환하거나 어떻게 해결할 수 있습니까?

Answer 1

두 가지 문제가 있습니다. 첫째, 사용하려는 프로젝션은 기본적으로 OpenLayers에 포함되어 있지 않으므로 Proj4를 사용하여 가져와야합니다. 설명하기 위해 this example에서 코드를 가져 왔습니다.

이

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

두 번째 문제가 있다는 것입니다 : 당신은 지금 당신의 투사에 대한 참조를 보유하는 개체를 만들 수 있습니다

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

:

첫 번째는 proj4 스크립트와 EPSG.io에서 영사의 정의를 포함 featureProjection을 잘못 사용하고 있습니다. 레이어의 format 객체에 설정해야하는 두 가지 속성이 있습니다. 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'}) 
    }) 
}); 

Answer 2

감사합니다, 나는 내가 붙어 , 당신이 솔루션은 매우 명확하기 때문에 이전에 대답 할 수 있지만, 일을 할수 없어. 기능이 잘못된 위치에 표시됩니다.

proj4가 올바르게로드되었는지 알 수있는 방법이 있습니다. isValid() 메소드 또는 이와 비슷한 것이 없습니다. 또한, clik to see here

내가 시도 당신의 sugestion :

은 내가 plunker 파일을 생성 또한

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 문서에 따르면 ol.ProjectionLike {ol.proj.Projection} {문자열} {정의되지 않은}

:

defaultDataProjection 및 featureProjection이 ol.ProjectionLike 있습니다 그것은 세 가지 중 하나가 될 수 있습니다

그래서 소스가 좋습니다.

인사말