Нарисуйте круг снова после того, как вектор экспорта

Question

После нарисовать круг в моей карте, я экспортировал его:

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; 
} 

и результат был:

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

Это, как я беру центр окружности и радиус:

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); 

Теперь я пытаюсь использовать этот JSON, чтобы сделать тот же круг снова, но не имеет геометрии, и это не работать (работа для всех других геометрий, таких как точки, polygong и линии, поэтому проблема это не код):

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); 

Просто примечание: теперь я вижу проекцию центра и радиуса не был изменен. Должен также работать над этим ...

Answer 1

GeoJSON не поддерживает Circle Geometry. Таким образом, формат ol.format.GeoJSON() не конвертирует JSON в объект ol.Feature. Так напишите собственный метод, который потребляет данные JSON и создает геометрию круга.

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); 
} 

Answer 2

Я думаю, что это может мне помочь как-то ... увидят.

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