0

I wan't to add several GeoJSON-overlay layers from a Postgis-database to an Openlayers 3 map. I want to define the source as well as the style, the layer is rendered in ol 3. Actually I'm using a slightly modified php-script from Bryan McBride PHP PostGIS to GeoJSON, that uses a GET-call to pass the options of the different layers to the script to define the source of my layer.

n2k_do_l = new ol.layer.Vector({
          title: 'Title of Layer',
          visible: false,
          style: new ol.style.Style({
                fill: new ol.style.Fill({color:'rgba(100,250,0,0.1)'}),
                    stroke: new ol.style.Stroke({
                        color: 'magenta',
                        width: 2
                    })
              }),
      source: new ol.source.Vector({
          projection: 'EPSG:4326',
              attributions: [new ol.Attribution ({html: '<br />Attribution of Layer' })],
              strategy: ol.loadingstrategy.bbox,
          loader: function(extent, resolution, projection) {
          var extent = ol.proj.transformExtent(extent, projection.getCode(), ol.proj.get('EPSG:4326').getCode());
          $.ajax({
          type: 'GET',
          url: "./mapdata/get_geojson.php?"+
              "geotable=n2k_do" +
              "&fields=gid as id,sitecode,sitename" +
              "&bbox=" + extent.join(','),
              context: this
              }).done (function (data) {
                 var format = new ol.format.GeoJSON();
                 this.addFeatures (format.readFeatures(data,{
                 dataProjection: 'EPSG:4326',
                 featureProjection: 'EPSG:3857'
                 }));
          });
          }
             })

});

For one layer this is ok, but, I would like to use the code from above, to write an extended ol.layer.Vector class (myol3Vector(options)) to create several layers by passing a list of options:

n2k_bd_l = new myol3Vector({
            title: "Natura 2000 Birds Directive",
            attribution: "Attribution text",
            geotable: "n2k_bd",
            fields: "gid as id,sitecode,sitename,surfha",
            where: ""
});

n2k_hd_l = new myol3Vector({
            title: "Natura 2000 Habitats Directive",
            attribution: "Other Attribution text",
            geotable: "n2k_hd",
            fields: "gid as id,sitecode,sitename,surfha",
            where: "sitename ilike '%moselle%'" 
});

How can I transform my working code to a constructor, that creates multiple layers just by passing a list of options?

Maybe someone can get me a hint, how to start.

1

Until now I use the following code, which works already: But maybe there is a better way to implement it??

function myol3Vector(options){

var options = options || {};

vectorLayer = new ol.layer.Vector({
              title: options.title,
              visible: false,
              style: new ol.style.Style({
                    fill: new ol.style.Fill({color:'rgba(100,250,0,0.1)'}),
                        stroke: new ol.style.Stroke({
                            color: 'magenta',
                            width: 2
                            })
                        }),
              source: new ol.source.Vector({
                  projection: 'EPSG:4326',
                  attributions: [new ol.Attribution ({html: options.attribution })],
                  strategy: ol.loadingstrategy.bbox,
                  loader: function(extent, resolution, projection) {
                  var extent = ol.proj.transformExtent(extent, projection.getCode(), ol.proj.get('EPSG:4326').getCode());
                  $.ajax({
                    type: 'GET',
                    url: "./mapdata/get_geojson.php?"+
                      "geotable=" + options.geotable +
                      "&fields=" + options.fields +
                      "&where=" + options.where +
                      "&bbox=" + extent.join(','),
                      context: this
                      }).done (function (data) {
                         var format = new ol.format.GeoJSON();
                         this.addFeatures (format.readFeatures(data,{
                         dataProjection: 'EPSG:4326',
                         featureProjection: 'EPSG:3857'
                         }));
                  });
                  }
                  })

    })

    return vectorLayer;

    };
    ol.inherits(ol3Vector, ol.layer.Vector);

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.