CODEWITHSUNDEEP
openlayers-3
Magno C
Magno C

Reputation: 2206

Draw a circle again after vector export

After draw a circle in my map, I exported it with:

getAsJson : function() {
    var geojson  = new ol.format.GeoJSON();
    var features = this.vectorSource.getFeatures();

    var jsonData = geojson.writeFeatures( features,{
        featureProjection: ol.proj.get('EPSG:3857'),
        dataProjection: ol.proj.get('EPSG:4326')
    });

    return jsonData;
}

and the result was:

{"type":"FeatureCollection","features":[
    {"type":"Feature","geometry":{
        "type":"GeometryCollection","geometries":[]
    },"properties":{
        "circleCenter":[-4805776.093508227,-2600749.7153150304],"circleRadius":6658.801529937424
    }
}]}

This is how I take the circle center and radius:

    var draw = new ol.interaction.Draw({
        source: vectorSource,
        type: value,    // Can be Circle,Point,Line,Polygon
        // No Geometry Function when type is 'Circle' (omited code to simplify)
        geometryFunction: geometryFunction,  
        maxPoints: maxPoints
    });


    draw.on('drawend', function( evt ){
        var geometry = evt.feature.getGeometry();
        // Check the type before try to get this! (omited code to simplify)
        var center = geometry.getCenter();
        var radius = geometry.getRadius();
        evt.feature.set('circleCenter', center );
        evt.feature.set('circleRadius', radius );   
    });

    map.addInteraction( draw );

Now I'm trying to use this JSON to draw the same circle again, but it have no geometry and this is not working (work for all other geometries like point, polygong and line so the problem is it not the code):

var features = new ol.format.GeoJSON().readFeatures( jsonData, {
    featureProjection: 'EPSG:3857'
});         

var vectorSource = new ol.source.Vector({
}); 

var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style : customStyleFunction
});

map.addLayer( vectorLayer );

Just a note: I can see now the projection of center and radius was not changed. Must work on this too...

Upvotes: 1

Views: 439

Answers (2)

Sumanth Shastry
Sumanth Shastry

Reputation: 1159

GeoJSON does not support Circle Geometry. So ol.format.GeoJSON() format doesnot convert JSON to ol.Feature object. So write a custom method which consumes the JSON data and creates a Circle geometry

var featuresJson = geoJson.features;

for ( var i=0; i<featuresJson.length; i++ ) {
    var radius = featuresJson[i].properties.circleRadius;
    var center = featuresJson[i].properties.circleCenter;

    var feature = new ol.Feature(new ol.geom.Circle(center,radius);
    vectorSource.addFeature(feature);
}

Upvotes: 3

Magno C
Magno C

Reputation: 2206

I think this can help me somehow... will see.

map.getViewport().addEventListener("dblclick", function(e) {
  var coordinate = map.getEventCoordinate(e);
  vectorSource.addFeature(new ol.Feature(new ol.geom.Circle(coordinate, dist)));
});

Upvotes: 0

Related Questions