is there any chance to change projection for geojson(mapshaper)

Question

• Hello all,
• i am using OpenLayers 5, Angular 6, mapshaper tool(converting shp to json).
• MapshaperTool, Git Code

my process

• i have installed npm mapshaper --save

• i am able to upload different .shp files and able to get json features data.

• i have 2 different .shp files [layer-ind.shp, layer-administration.shp]

• layer-ind.shp file uploaded its json gives like

{ "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": {}, "geometry": { "type": "LineString", "coordinates": [ [ 75.89355468749999, 18.521283325496277 ], [ 80.6396484375, 19.68397023588844 ] ] } } ] }

• layer-us.shp file uploaded its json gives like

{ "type": "FeatureCollection", "features": [ { "type":"Feature", "geometry":{ "type":"LineString", "coordinates":[ [-349771.1875,445307.8125], [-349789.6875,445314.375], [-349796.5625,445321.5625], [-349792.78119999915,445341.4375], [-349786.53119999915,445351.71880000085], [-349771.1875,445307.8125]]}, "properties":{ "TYPE":"ISLAND","RuleID":3, "Shape_Leng":544.475438955 } } ] }

when preview these two layers(features) preview on map 1. layer-ind.json file gives correct results and able see layer on map in correct place 2. layer-us.json file gives wrong place showing on map (0,0)

• how to solve these 2nd point layer-us.json issue, i have change the re-projection also like

const vectorSource = new VectorSource({ features: (new GeoJSON()).readFeatures(geojson, { featureProjection: 'EPSG:4326' }); });

• i have changed featureProjection code also, but its not working layer-us.json.

• please help on this

• save my days

Answer 1

You will need to specify the data projection as well as feature projection. featurePprojection is the projection of your map view. dataProjection is the projection of the coordinates in the json. I can see that dataProjection for layer-ind is 'EPSG:4326', the dataProjection for layer-us appears to use the coordinates of a local projection. Do you know which projection or where the island is?

const vectorSource = new VectorSource({
        features: (new GeoJSON()).readFeatures(geojson, {
        dataProjection: 'xxxx',
        featureProjection: 'yyyy'
      })
    });

Based on the projection definition you have now given here's a working sample (to run here it uses full build syntax)

proj4.defs('NAD_1983_California_Teale_Albers', 'PROJCS["NAD_1983_California_Teale_Albers",GEOGCS["GCS_North_American_1983",DATUM["D_North_American_1983",SPHEROID["GRS_1980",6378137.0,298.257222101]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]],PROJECTION["Albers"],PARAMETER["False_Easting",0.0],PARAMETER["False_Northing",-4000000.0],PARAMETER["Central_Meridian",-120.0],PARAMETER["Standard_Parallel_1",34.0],PARAMETER["Standard_Parallel_2",40.5],PARAMETER["Latitude_Of_Origin",0.0],UNIT["Meter",1.0]]');

ol.proj.proj4.register(proj4);

geojson = {
  "type": "FeatureCollection",
  "features": [
{
  "type":"Feature",
  "geometry":{
    "type":"LineString",
    "coordinates":[
      [-349771.1875,445307.8125],
      [-349789.6875,445314.375],
      [-349796.5625,445321.5625],
      [-349792.78119999915,445341.4375],
      [-349786.53119999915,445351.71880000085],
      [-349771.1875,445307.8125]]},
  "properties":{
    "TYPE":"ISLAND","RuleID":3,
    "Shape_Leng":544.475438955
  }
}
  ]
}

var map = new ol.Map({
  layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ],
  target: 'map',
  view: new ol.View()
});


const vectorSource = new ol.source.Vector({
    features: (new ol.format.GeoJSON()).readFeatures(geojson, {
    dataProjection: 'NAD_1983_California_Teale_Albers',
    featureProjection: map.getView().getProjection()
  })
});


map.addLayer(new ol.layer.Vector({source: vectorSource}));

map.getView().fit(vectorSource.getExtent());

<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>

<div id="map" class="map"></div>