如何更改圆圈的样式以在其中包含类似大小的图标？答案

【问题标题】：How do I change the style of a circle to have an icon of similar size inside of it?如何更改圆圈的样式以在其中包含类似大小的图标？
【发布时间】：2020-12-02 04:13:18
【问题描述】：

我有以下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 这里是绘制圆圈交互具有匹配大小的图标（就像我想为第一个示例执行此操作。

【问题讨论】：

@geocodezip 我一定是错误地修改了那个，我刚刚修复了它...它有一个绘制圆圈交互，但不是圆圈显示，而是一个图标将按比例显示圈子
您要更改的图标是什么？风格的圆圈？
@geocodezip 我想更改第一个示例的样式，以便圆圈显示为相应大小的图标（如在绘图示例中）

标签： openlayers openlayers-3 openlayers-6

【解决方案1】：

您需要一个返回样式数组的样式函数。对于圆形几何图形，第二种样式是您的图标位于圆心并以视图分辨率缩放到圆的半径（针对分辨率和图标的原始大小进行调整）。在图层选项中包含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>

【讨论】：