2016-07-26 144 views
1

我試圖用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> 

我在做什麼錯?

回答

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的值到半徑巨大並且幾乎需要全部英格蘭