2016-11-07 52 views
0

我正嘗試用JPG文件在圖像圖層中創建一個像這樣的中心的圓var center = {lat: 12.972876848034, lng: 77.589721116026}(我在Google地圖上選取此點)。但圓圈沒有出現。EPSG畫圓:4326座標中心在圖像層OpenLayers 2

這是我的代碼。

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://openlayers.org/api/OpenLayers.js"></script> 
    <script type="text/javascript"> 
     var map; 
     function init() { 
      var imgWidth = 1864; 
      var imgHeight = 1070; 
      var extend = new OpenLayers.Bounds(77.58356602859499, 12.965959702159019, 77.6046633014679, 12.976413580812167); 
      var layer = new OpenLayers.Layer.Image(
       'Image layer', 
       'images/view.jpg', 
       extend, 
       new OpenLayers.Size(imgWidth, imgHeight), 
       {numZoomLevels: 6} 
      ); 

      map = new OpenLayers.Map(
      { 
       div: "mapdiv", 
       maxExtent: extend, 
       maxResolution: 156543, 
       numZoomLevels: 6 
      } 
      ); 

      map.addLayers([layer]); 
      map.zoomToMaxExtent(); 

      var center = {lat: 12.972876848034, lng: 77.589721116026} 
      var lonLat = new OpenLayers.LonLat(center.lng, center.lat) 
      var pCenter = new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat); 

      var circle = OpenLayers.Geometry.Polygon.createRegularPolygon(pCenter, 50, 70, 0); 
      var circleFeature = new OpenLayers.Feature.Vector(circle); 
      var circleStyle = new OpenLayers.StyleMap({'strokeColor': '#1E88E5', 'strokeWidth': 2}); 
      var circleLayer = new OpenLayers.Layer.Vector("Route Layer", {styleMap: circleStyle}); 
      circleLayer.addFeatures([circleFeature]); 
     } 
     init(); 
    </script> 
</head> 
<body onload="init()"> 
    <div style="height: 100vh" id="mapdiv"></div> 
</body> 

這是怎麼造成的,我該如何解決呢? 在此先感謝您的任何建議。

+0

請發佈完整的可重複版本的代碼。 – scai

+0

@scai我更新了源代碼,對不起! – dauruy

回答

0

我找到了答案,因爲我使用EPSG:4326座標,半徑的單位必須是度數。我設置了radius = 0.1,現在它工作。

+0

這是你改變了什麼? circle = OpenLayers.Geometry.Polygon.createRegularPolygon(pCenter,0.1,70,0); –

+0

是的,就是這樣。 – dauruy