在图像层 OpenLayers 2 中以 EPSG:4326 坐标中心绘制圆

Question

我正在尝试在 JPG 文件的图像层中创建一个中心像这样 var center = {lat: 12.972876848034, lng: 77.589721116026} 的圆（我在 Google 地图上选择了这个点）。但是圆圈没有出现。

这是我的代码。

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

这是怎么引起的，我该如何解决？提前感谢您的任何建议。

Answer 1

我找到答案了，因为我用的是EPSG:4326坐标，半径的单位必须是度。我设置了 radius = 0.1 现在它起作用了。

在图像层 OpenLayers 2 中以 EPSG:4326 坐标中心绘制圆

Draw circle with EPSG:4326 coordinate center in image layer OpenLayers 2

javascript

google-maps

openlayers

openstreetmap