1

I've been playing around with the OpenLayers 3 library, I've previously used OpenLayers 2 and created custom classes like so:

OpenLayers.CustomClass = OpenLayers.Class({

    property: value,

    function: function() {
        ...
    },

    CLASS_NAME: 'OpenLayers.CustomClass'

});

Then I can instantiate it like so:

var customClass = new OpenLayers.CustomClass();

However so far I can't see how to recreate this functionality in OpenLayers 3. Is this because it doesn't exist? I can see that there is an ol.Object class but I haven't been able to extend this abstract class with one of my own in a similar fashion.

It's quite likely what I'm trying to do is not necessary in OpenLayers 3 and that a different approach is required.

****UPDATE:****

I followed the link in ymirsson's comment and think I may have an approach that works. Essentially I wanted to create my own class that extended the ol.Object class. The following appears to do this:

function CustomClass() {

    ol.Object.call(this)
}

CustomClass.protoype = Object.create(ol.Object.prototype);

Now I can set and register listeners for properties on the CustomClass like so:

var customClass = new CustomClass();
CustomClass.on('change:property', function(event) {
    alert('Property changed');
});
customClass.set('property', 'testString');

However I'm not sure if this is the best approach...

0

Openlayers 3 is build with the Google Closure Library so if you wanna do inheritance you got 2 options:

  1. Option:

    my.CustomVectorLayer = function(settings){
       ...
       ol.layer.Vector.call(this, settings);
    };
    ol.inherits(my.CustomVectorLayer, ol.layer.Vector);
    
    var myLayer = new my.CustomVectorLayer(settings);
    

After that you can modifiy your class object and append further methods via prototype style (means my.CustomVectorLayer.prototype.myCustomFn = function().. }. This approach is some case a bit vulnerable and is better for use when you also use the closure compiler for compiling your code together with ol3.

  1. Option:

    var getCustomVectorLayer = function(settings){
        var vectorLayer = new ol.layer.Vector(settings);
        vectorLayer.myCustomFn = function(...);
        return vectorLayer;
    };
    
    var myLayer = getCustomVectorLayer(settings);
    

The second approach is maybe a bit more stable and uses a kind of constructor function.

I hope that helps you regarding your question.

  • Thanks for this, I guess I need to read up on the Google Closure Library to get a better understanding of how that works. – marlowp Mar 17 '15 at 21:09
  • 1
    Is there any ES6 version of this, which actually using class? – allenhwkim Feb 21 '17 at 18:11
1

I think I've found a reasonable approach to solve my initial problem. I shall post it here incase it helps anyone else.

In this example lets say we want a class that contains the map object for management purposes we could do something like:

function MapManager() {

    /* Create an <ol.Object> using MapManager
    as the target. This will give MapManager
    all of the properties/functions from <ol.Object>
    and allow us to add our own through the prototype */
    ol.Object.call(this);
}

//Inherit all of <ol.Object> attributes
ol.inherits(MapManager, ol.Object);

//Add class specific functions/attributes
MapManager.prototype.getMap = function() {
    console.log(this.constructor.name + ': Getting map...');
    return this.get('map');
};

MapManager.prototype.setMap = function(map) {
    console.log(this.constructor.name + ': Setting map...');
    this.set('map', map);
};

This wraps the get/set functionality of ol.Object (such as being able to watch for changes in properties) in our own get/set methods incase we want to perform logic on the values before getting/setting them.

Then we can do something like this:

var mapManager = new MapManager();
mapManager.on('change:map', function(event) {
    alert('Map value changed');
});
mapManager.setMap(map);

var map = mapManager.getMap();

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.