圆圈图层不显示在OpenLayers 3

问题描述：

我试图用OpenLayers 3在OpenStreetMap上显示一些圆圈。地图显示正确，但是我没有看到任何圆圈，也没有得到JavaScript错误。我正在使用以下代码：圆圈图层不显示在OpenLayers 3

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

我在做什么错？

答

问题是你创建的圈子的方式中，我尝试过了，不会创建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的值到半径巨大并且几乎需要全部英格兰

圆圈图层不显示在OpenLayers 3

相关推荐