Question

我试图在JPG文件的图片层中创建一个像这样的var center = {lat: 12.972876848034, lng: 77.589721116026}中心（我在谷歌地图上找到这一点）的圆圈。但这个圈子并没有出现。

这是我的代码。

<!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，现在它有效了。

使用EPSG绘制圆圈：图像层中的4326坐标中心OpenLayers 2

1 个答案: