Question

我正在尝试使用OpenLayers 3在OpenStreetMap上显示多个圆圈。地图显示正确，但我没有看到任何圆圈，我没有得到任何JavaScript错误。我使用以下代码：

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

我做错了什么？

Answer 1

问题在于您创建圆圈的方式，我尝试过并且没有创建ol.geom.Circle，您应该将其声明为：

<div class="o-main-header">
  <div class="o-main-header__logo">
    <a class="m-svg-icon o-main-header__logo-svg">...</a>
  </div>
</div>

看到我将半径更改为0.001，因为当投影被转换为10时，半径值很大并且几乎占据所有英格兰

圆形图层未在OpenLayers 3中显示

1 个答案: