1

I have an openlayer map on the website. I need to draw lines, points and polygons, but after it is draw, the user should be able to change the position of the geometry. In my map it is already done the part of the drawing geometry type, the part with modifying the geometry type is missing. I've checked this example: https://openlayers.org/en/latest/examples/draw-and-modify-features.html and this one: http://tsauerwein.github.io/ol3/animation-flights/examples/draw-and-modify-features.html. It is explained very well, but since I have no experience with open layer, it is very hard to use this example in my case. I always get errors, or the map is not loaded at all.

I'm using this code to draw a point, line or polygon:

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

draw.on(
    'drawstart',
    function (evt) {
        sketch = evt.feature;
    },
    this
);
draw.on(
    'drawend',
    function (evt) {
        var message = '';
        var title = '';

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

return draw;

}

I also have these lines of code where the function createDrawForPoint is invoked:

    'addpoint': {
    'obj': createDrawForPoint('Point'),
    '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]);
        }
        for (i = 0; i < mapOverlays.length; i++) {
            map.removeOverlay(mapOverlays[i]);
        }
        mapOverlays = [];
        source.clear();
        map.removeInteraction(this.obj);
    }
},
'addline': {
    'obj': createDrawForPoint('LineString'),
    '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);
    }
},
'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);
    }
},

Can you give me some hints how can I solve this problem?

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.