OpenLayersでサークルレイヤーが表示されない3

Question

OpenLayers 3を使用して、OpenStreetMapの上に複数のサークルを表示しようとしています。マップは正しく表示されますが、サークルは表示されず、JavaScriptエラーも発生しません。私は次のコードを使用しています：

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

私は間違っていますか？

Answer 1

問題は、あなたがサークルを作成する方法の中で、私はあなたの代わりにこのようにそれを宣言する必要があり、それを試してみましたが、ol.geom.Circleは作成されません。

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

は、私が変わっていることがわかり半径を0.001に設定します。これは、投影が変換されたときに半径の10の値が大きく、ほぼすべてのイギリスを取り込むためです