Circle Layer wird nicht in OpenLayers 3 angezeigt

Question

Ich versuche eine Anzahl von Kreisen auf einer OpenStreetMap mit OpenLayers 3 zu zeigen. Die Map wird korrekt angezeigt, aber ich sehe keine Kreise und bekomme keine JavaScript-Fehler. Ich benutze den folgenden Code:

<div id="map" class="map"></div> 
    <script type="text/javascript"> 
     var circle = new ol.geom.Circle({ 
      center: [-2.59394, 51.45271], 
      radius: 10 
     }) 
     circle.transform('EPSG:4326', 'EPSG:3857'); 

     var congestionLayer = new ol.layer.Vector({ 
      source: new ol.source.Vector({ 
       features: [new ol.Feature({ 
        geometry: circle 
       })] 
      }), 
      style: new ol.style.Style({ 
       fill: new ol.style.Fill({ 
        color: "#000000" 
       }) 
      }), 
      visible: true 
     }) 

     var map = new ol.Map({ 
      target: 'map', 
      layers: [ 
       new ol.layer.Tile({ 
        source: new ol.source.OSM() 
       }), 
       congestionLayer 
      ], 
      view: new ol.View({ 
       center: ol.proj.fromLonLat([-2.59394, 51.45271]), 
       zoom: 10 
      }) 
     }); 
    </script> 

Was mache ich falsch?

Answer 1

das Problem ist in der Art und Weise Sie den Kreis zu erstellen, habe ich versucht, sie und die ol.geom.Circle nicht erstellt wird, können Sie es wie dieser Stelle erklären sollte:

var circle = new ol.geom.Circle([-2.59394, 51.45271], 0.01).transform('EPSG:4326', 'EPSG:3857'); 

    //circle.transform('EPSG:4326', 'EPSG:3857'); 
    var feature=new ol.Feature({ 
     geometry: circle 
    }); 

    var congestionLayer = new ol.layer.Vector({ 
     source: new ol.source.Vector({ 
      features: [feature] 
     }), 
     style: new ol.style.Style({ 
      fill: new ol.style.Fill({ 
       color: 'rgba(255, 255, 255, 0.2)' 
      }), 
      stroke: new ol.style.Stroke({ 
       color: '#737373', 
       width: 2 
      }), 
      image: new ol.style.Circle({ 
       radius: 7, 
       fill: new ol.style.Fill({ 
        color: '#ffcc33' 
       }) 
      }) 
     }), 
     visible: true 
    }) 

    var map = new ol.Map({ 
     target: 'map', 
     layers: [ 
      new ol.layer.Tile({ 
       source: new ol.source.OSM() 
      }), 
      congestionLayer 
     ], 
     view: new ol.View({ 
      center: ol.proj.fromLonLat([-2.59394, 51.45271]), 
      projection: 'EPSG:3857', 
      zoom: 10 
     }) 
    }); 

sehen, dass ich das geändert Radius zu 0.001 das ist, weil, wenn die Projektion umgewandelt wird, ein Wert von 10 auf den Radius ist riesig und dauert fast alle England