如何更改圆圈的样式以使其内部具有相似大小的图标？

Question

我有以下example

var circle = new ol.geom.Circle([-2.59394, 51.45271], 0.001).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: styleFunction,
    style: new ol.style.Style({
        fill: new ol.style.Fill({
            color: 'rgba(0, 255,0, 0.3)'
        }),
        stroke: new ol.style.Stroke({
            color: '#737373',
            width: 2
        }),
        image: new ol.style.Circle({
            radius: 70,
            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: 14
    })
});

我想更改圆圈的样式以具有相似大小的图标，它应该看起来像 this example 这里是绘制圆圈交互具有匹配大小的图标（就像我想在第一个例子中那样做。

Answer 1

您需要一个样式函数，其中 returns 一组样式。对于圆形几何图形，第二种样式是您的图标位于圆心，并以视图分辨率缩放到圆的半径（根据分辨率和图标的原始大小进行调整）。在图层选项中包含 updateWhileAnimating 有助于在缩放时保持比例。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
    <link rel="stylesheet" href="https://openlayers.org/en/v6.4.3/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v6.4.3/build/ol.js"></script>
    <style>
      html, body, .map {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
      .map {
        position: absolute;
      }
    </style>
</head>
<body>
    <div id="map" class="map"></div>
<script>

var circle = new ol.geom.Circle([-2.59394, 51.45271], 0.001).transform('EPSG:4326', 'EPSG:3857');

var feature=new ol.Feature({
    geometry: circle
});

var style1 = new ol.style.Style({
        fill: new ol.style.Fill({
            color: 'rgba(0, 255,0, 0.3)'
        }),
        stroke: new ol.style.Stroke({
            color: '#737373',
            width: 2
        })
    });

var style2 = new ol.style.Style({
        image: new ol.style.Icon({
            src: 'https://openlayers.org/en/latest/examples/data/icon.png'
        })
    });

var congestionLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [feature]
    }),
    style: function(feature, resolution) {
        var styles = [style1];
        if (feature.getGeometry().getType() == 'Circle') {
            style2.setGeometry(new ol.geom.Point(feature.getGeometry().getCenter()));
            style2.getImage().setScale(feature.getGeometry().getRadius() / (40 * resolution));
            styles.push(style2);
        }
        return styles;
    },
    updateWhileAnimating: true,
    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: 14
    })
});

   </script>
</body>
</html>

如何更改圆圈的样式以使其内部具有相似大小的图标？

How do I change the style of a circle to have an icon of similar size inside of it?

openlayers

openlayers-3

openlayers-6