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再次绘制相同的圆，但它没有几何形状，这不起作用（适用于所有其他几何，如点，多边形和线，所以问题是它不是代码）：

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不支持圆几何。因此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)));
});

矢量导出后再次绘制圆圈

2 个答案: