[GIS] Convert features from EPSG:3857 to EPSG:4326 projection not working OpenLayers 4

coordinate systemopenlayersreprojection-mathematics

I have a simple task to do, supposedly OL4 and format.GEOJson.readfeatures should do that automatically. But it doesn't. Remembering that is a FeatureCollection and has CRS set.

I have a map with EPSG:4326 projection which works fine with same projection. If I change the map projection to EPSG:3857 and use format.GEOJson.readfeatures it all goes well. But when I try to use the other way, it doesn't.

I tried all properties and methods, searched all over Google, but no luck.

<script>
$(document).ready(function () {
    $('.tap-target').tapTarget('open');

    var typeSelect = 'None';

    <!-- Creating Basic Map -->
      var styles = [
        'Road',
        'Aerial',
        'AerialWithLabels',
        'collinsBart',
        'ordnanceSurvey'
      ];
      var layers = [];
      var i, ii;
      for (i = 0, ii = styles.length; i < ii; ++i) {
        layers.push(new ol.layer.Tile({
          visible: false,
          preload: Infinity,
          source: new ol.source.BingMaps({
            key: '#mykey',
            imagerySet: styles[i]
            // use maxZoom 19 to see stretched tiles instead of the BingMaps
            // "no photos at this zoom level" tiles
            // maxZoom: 19
          })
        }));
      }

      var map = new ol.Map({
        interactions: ol.interaction.defaults().extend([new app.Drag()]),
        layers: layers,
        // Improve user experience by loading tiles while dragging/zooming. Will make
        // zooming choppy on mobile or slow devices.
        loadTilesWhileInteracting: true,
        target: 'map',
        view: new ol.View({
          projection: 'EPSG:4326',
          //center: [0, 0],
          //projection: 'EPSG:4326',
          center: [-48.669159, -26.904534],

          zoom: {{ geo|length > 0 ? 17 : 13 }}
        })
      });

      var select = document.getElementById('layer-select');

      function onChange()
      {
        var style = select.value;

        for (var i = 0, ii = layers.length; i < ii; ++i)
        {
            layers[i].setVisible(styles[i] === style);
        }
      }

      select.addEventListener('change', onChange);
      onChange();
      <!-- Creating Basic Map -->

      <!-- Draw Feature -->
    var source = new ol.source.Vector({
        wrapX: true
    });

    var fill = new ol.style.Fill({
        color: 'rgba(255,255,255,0.4)'
    });

    var stroke = new ol.style.Stroke({
        color: '#3399CC',
        width: 3
    });

      var sourceStyle = new ol.style.Style({
          image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
              anchor: [0.5, 36],
              anchorXUnits: 'fraction',
              anchorYUnits: 'pixels',
              src: '{{ asset('/images/material-icons/maps/1x_web/ic_place_black_36dp.png') }}'
          })),
          stroke: stroke,
          fill: fill
      });

      var vector = new ol.layer.Vector({
          //projection: 'EPSG:25830',
          style: sourceStyle,
          source: source
      });

      map.addLayer(vector);
      vector.setVisible(true);

      $.ajax({
          type: 'get',
          url: 'http://datosabiertos.malaga.eu/recursos/urbanismoEInfraestructura/sedesWifi/sedesWifi-25830.geojson',
          type: 'json',
          success: function (r) {
              // eval pode incomodar, verificar isso para evitar problemas, mas feito assim para testes

              //EPSG::3857

              //console.log(r);

              //console.log(new ol.format.GeoJSON().readProjection(r));


              var feats = (new ol.format.GeoJSON()).readFeatures(r);
//I've tried to use featureProjection and dataProjection with no luck

              source.reportError = true;
              source.addFeatures(feats);
          }
      });

});
</script>

Best Answer

Ok, i got it what was wrong, the GEOJson provided had one or more features without or something wrong with geometry information. The strange thing is when I did my way it not throwed any exception at all. But OL has a more straightforward way to do it, that's actually:

var malaga = new ol.layer.Vector({
          source: new ol.source.Vector({
              url: 'http://datosabiertos.malaga.eu/recursos/urbanismoEInfraestructura/sedesWifi/sedesWifi-25830.geojson',
              format: new ol.format.GeoJSON({ "dataProjection": 'EPSG::25830', "featureProjection": 'EPSG::4326' })
          })
      });

      map.addLayer(malaga);
      malaga.setVisible(true);

When using this method, if GeoJson has one of the collection items with invalid geometry it throws an error (example provided throws it, I tested with mine that hasn't). So I found that is relative easy to reproject since you know what method use and has a complete valid GeoJson. But I think OL4 could be more fault tolerant and only not render that invalid feature or something. Should I fill a bug? Or does anyone knows how to validate a GeoJson or an option that could do that? I searched with no luck.

Well, anyway, this is the right way (for projections other than 3857 and 4326 you need to include proj4).

Related Question