2

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>
  • 3
    Please provide some code snippets to see what u you have tried... – juminet Jul 21 '17 at 14:44
2

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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.