1

I use OpenLayers 6.
I try to add to the map interaction a class to draw features on the map.

Here is MapDraw class:

function MapDraw() {

        this.vector = new ol.layer.Vector({
            source: new ol.source.Vector()
        });

        Draw.call(this, {
            source: this.vector.getSource(),
            type: "Point"
        });

        this.on = Draw.prototype.on;
        this.on('drawend', function (e) {
            eventsHandlers.featureComplete;         
        });
    }

    if (Draw) MapDraw.__proto__ = Draw;
    MapDraw.prototype = Object.create(Draw && Draw.prototype);
    MapDraw.prototype.constructor = Draw;

    $("#popupShapes").popup("close");

    return MapDraw;
}(ol.interaction.Draw));

Here how I add class above to the map interaction:

map.addInteraction(new MapDraw());

But when add interaction occurred on this block:

    Draw.call(this, {
            source: this.vector.getSource(),
            type: "Point"
        }); 

I get the following error:

Uncaught TypeError: r.setActive is not a function

Any idea why i get the error and how to fix it?

2
  • What should this eventsHandlers.featureComplete be? Where should it come from? What should it do?
    – TomazicM
    Apr 6 '20 at 18:34
  • @TomazicM thank you for the question. It is some function that fired in when feature drew on the map.
    – Michael
    Apr 6 '20 at 19:48
0
+100

I'm no expert in ES6 and class extension, but in the above code several things are wrong. It's strange mixture of ES5 (ol.layer.Vector class) and ES6 (Draw class). Then there is definitely syntax error of one closing } misplaced or too much. But the main error is that class extension part should be outside class definition part.

Taking all this into account, class definition/extension in ES5 could look like this:

function MapDraw() {
  this.vector = new ol.layer.Vector({
    source: new ol.source.Vector()
  });
  ol.interaction.Draw.call(this, {
    source: this.vector.getSource(),
    type: "Point"
  });
  this.on = ol.interaction.Draw.prototype.on;
  this.on('drawend', function (e) {
    console.log('Draw ended.');         
  });
};

if (ol.interaction.Draw) MapDraw.__proto__ = ol.interaction.Draw;
MapDraw.prototype = Object.create(ol.interaction.Draw && ol.interaction.Draw.prototype);
MapDraw.prototype.constructor = ol.interaction.Draw;

Looking at internals of ol-ext plugin, class extension can be further simplified, so final version in ES5 could look something like this (tested with the latest ol6):

function MapDraw() {
  this.vector = new ol.layer.Vector({
    source: new ol.source.Vector()
  });
  ol.interaction.Draw.call(this, {
    source: this.vector.getSource(),
    type: "Point"
  });
  this.on = ol.interaction.Draw.prototype.on;
  this.on('drawend', function (e) {
    console.log('Draw ended.');         
  });
};

MapDraw.prototype = Object.create(ol.interaction.Draw.prototype);
MapDraw.prototype.constructor = MapDraw;
.
.
.
var mapDraw = new MapDraw();
map.addInteraction(mapDraw);

mapDraw.on('drawend', function(e) {
  console.log('I agree, draw ended.');
});
2
  • Thanks for the post. I need to use Draw object in the drawend event. How can I access it?
    – Michael
    Apr 8 '20 at 3:01
  • In answer above your question about error was answered. If not, please explain why not. If you have another question, please post it as separate question.
    – TomazicM
    Apr 8 '20 at 5:41

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.