OpenLayers 3 中未显示圆层

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，你应该这样声明它：

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 的值很大并且几乎占据了整个英格兰

OpenLayers 3 中未显示圆层

Circle layer not showing in OpenLayers 3

openlayers

openlayers-3