1

I have an openlayer map and I need to modify geometries in the map. The drawing functionality works ok, but when I want to add the modify interaction, the map is not loaded at all, and I can't figure it out why.

This is the map with a line.

enter image description here

I need to move the line, and I wanted to use the openlayer Modify functionality

var modify = new ol.interaction.Modify({source: source});

, but when I try to add to my js file, the map is not loaded anymore.

I tried to follow this tutorial: https://openlayers.org/en/latest/examples/draw-and-modify-features.html

Can you give me a hint as to how can I resolve the problem in my case?

This is a part of the js file that I'm using where the drawing geometry part is working ok.

 'draw_linestring': {
    'obj': createDraw('LineString'),
    'on': function () {
        alert("On started");
        measureEnabled = true;
        createMeasureTooltip('LineString');
        map.addInteraction(this.obj);
    },
    'off': function (event) {
        alert("Off");
        var i,
            ov = map.getOverlays();

        measureEnabled = false
        for (i = 0; i < ov.length; i++) {
            map.removeOverlay(ov[i]);
        }
        for (i = 0; i < mapOverlays.length; i++) {
            map.removeOverlay(mapOverlays[i]);
        }
        mapOverlays = [];
        source.clear();
        map.removeInteraction(this.obj);
    }
},
'draw_polygon': {
    'obj': createDraw('Polygon'),
    'on': function () {
        measureEnabled = true;
        createMeasureTooltip('Polygon');
        map.addInteraction(this.obj);
    },
    'off': function () {
        var i,
            ov = map.getOverlays();

        measureEnabled = false
        for (i = 0; i < ov.length; i++) {
            map.removeOverlay(ov[i]);
        }
        for (i = 0; i < mapOverlays.length; i++) {
            map.removeOverlay(mapOverlays[i]);
        }
        mapOverlays = [];
        source.clear();
        map.removeInteraction(this.obj);
    }
},
'addpoint': {
    'obj': createDrawForPoint('Point'),
    'on': function () {
        alert("AddPoint");
        map.addInteraction(this.obj);
    },
    'off': function (event) {
        var i,
            ov = map.getOverlays();

        sketch = null;
        for (i = 0; i < ov.length; i++) {
            map.removeOverlay(ov[i]);
        }
        for (i = 0; i < mapOverlays.length; i++) {
            map.removeOverlay(mapOverlays[i]);
        }
        mapOverlays = [];
        source.clear();
        map.removeInteraction(this.obj);
    }
},
'addline': {
    'obj': createDrawForPoint('LineString'),
    'on': function () {
        alert("AddLine");
        map.addInteraction(this.obj);
        snap = new ol.interaction.Snap({ source: source });
        map.addInteraction(snap);
        console.log("Line");
        console.log(this.obj);
    },
    'off': function (event) {
        var i,
            ov = map.getOverlays();

        sketch = null;
        console.log(ov.length);
        for (i = 0; i <= ov.length; i++) {
            map.removeOverlay(ov[i]);
        }
        source.clear();
        map.removeInteraction(this.obj);
        map.removeInteraction(snap);
        console.log("LineEnd");
        console.log(this.obj);
        console.log("LineEndSnap");
        console.log(snap);
    }
},
'addpoly': {
    'obj': createDrawForPoint('Polygon'),
    'on': function () {
        map.addInteraction(this.obj);
    },
    'off': function (event) {
        var i,
            ov = map.getOverlays();

        sketch = null;
        for (i = 0; i < ov.length; i++) {
            map.removeOverlay(ov[i]);
        }
        source.clear();
        map.removeInteraction(this.obj);
    }
},


function createDraw(type) {

draw = new ol.interaction.Draw({
    source: source,
    type: type
});

draw.on(
    'drawstart',
    function (evt) {
        sketch = evt.feature;
    },
    this
);
draw.on(
    'drawend',
    function (evt) {
        sketch = null;
        measureTooltipElement = null;
        createMeasureTooltip(type);
    },
    this
);
 return draw;
}


function createDrawForPoint(type) {
draw = new ol.interaction.Draw({
    source: source,
    type: type
});

    draw.on(
        'drawstart',
        function (evt) {
            alert("DrawStart");
            sketch = evt.feature;
            console.log(sketch);
        },
    this
);
draw.on(
    'drawend',
    function (evt) {
        alert("DrawEnd");
        var message = '';
        var title = '';
        var coordinatesArray;

        geom = sketch.getGeometry();
        switch (type) {
            case 'Point':
                message = ol.coordinate.format(ol.proj.transform(geom.getCoordinates(), 'EPSG:900913', 'EPSG:31700'), '[{x}, {y}]', 4) + ol.coordinate.format(ol.proj.transform(geom.getCoordinates(), 'EPSG:900913', 'EPSG:4326'), '[{x}, {y}]', 4);                    
                title = "POINT [Stereo 70 / WGS 84]";
                break;
            case 'LineString':
                coordinatesArray = geom.getCoordinates();
                message = "";
                for (var i = 0; i < coordinatesArray.length; i++) {
                    message += ol.coordinate.format(ol.proj.transform(coordinatesArray[i], 'EPSG:900913', 'EPSG:31700'), '[{x}, {y}]', 4) + ol.coordinate.format(ol.proj.transform(coordinatesArray[i], 'EPSG:900913', 'EPSG:4326'), '[{x}, {y}]', 4) + "<br> " ;                    
                }
                title = "LINESTRING";
                break;
            case 'Polygon':
                coordinatesArray = geom.getCoordinates();
                var array = coordinatesArray[0];
                message = "";
                for (var i = 0; i < array.length; i++) {
                    message += ol.coordinate.format(ol.proj.transform(array[i], 'EPSG:900913', 'EPSG:31700'), '[{x}, {y}]', 4) + ol.coordinate.format(ol.proj.transform(array[i], 'EPSG:900913', 'EPSG:4326'), '[{x}, {y}]', 4) + "<br> ";
                }
                title = "POLYGON";
                console.log(coordinatesArray[0]);
                break;
        }
        $('#geometry-dialog').find('.modal-title').html(title);
        $('#geometry-dialog').find('.modal-body > p').html(message);
        $('#geometry-dialog').modal('show');            
    },
    this
);

return draw;
}


    map = new ol.Map({
    layers: layers,
    interactions: interactions,
    controls: standardControlsEnabled,
    target: 'map',
    view: myView
});

Your Answer

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

Browse other questions tagged or ask your own question.