OpenLayers 7中如何修改已放置要素/图标的缩放比例？

你的代码已经实现了滑块的数值更新，但缺少修改图标缩放比例并触发地图刷新的逻辑。核心问题是没有保存矢量图层的引用，也没有对图标的样式进行修改并同步到地图上。

修改步骤： #

1. 保存矢量图层引用：将创建标记所在的矢量图层赋值给变量，方便后续操作样式。
2. 在滑块事件中修改图标缩放：获取当前图层样式中的图标对象，设置新的缩放比例后重新绑定至图层，触发地图更新。

修改后的完整代码： #

JavaScript

var london = [-0.1276474, 51.507321899999994];
var isOnMap = true;  

const baseMapTile = new ol.layer.Tile({
        source: new ol.source.OSM(),
        visible: true,
        title: 'OSMStandard'
});

const marker = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.fromLonLat(london)),
    name: 'Somewhere near Nottingham',
});

// 保存矢量图层引用
const markerLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [marker]
    }),
    style: new ol.style.Style({
        image: new ol.style.Icon({
            anchor: [0.5, 1],
            scale: 1,
            src: 'https://openlayers.org/en/latest/examples/data/icon.png'
        })
    })
});

const map = new ol.Map({
view: new ol.View({
    center: ol.proj.fromLonLat(london),
    zoom: 15,
}),
    layers: [
        baseMapTile,
        markerLayer // 使用保存的图层变量
    ],
target: 'map'
});

var translate = new ol.interaction.Translate({
    features: new ol.Collection([marker])
});

map.addInteraction(translate);

document.getElementById('markerSlider').oninput = function() {
    const newScale = this.value / 100;
    document.getElementById('newScale').textContent = newScale;
    
    // 获取当前图层样式
    const currentStyle = markerLayer.getStyle();
    // 获取图标样式对象
    const icon = currentStyle.getImage();
    // 设置新缩放比例
    icon.setScale(newScale);
    // 重新设置样式，触发地图刷新
    markerLayer.setStyle(currentStyle);
}

CSS

#map{
    width: 300px;
    height: 300px;
    border: 1px solid black;
    padding: 5px;
    float: left;
}
#info{
width: calc(100% - 330px);
margin-left: 5px;
padding: 5px;
height: 100px;
    border: 1px solid black;
    float: left;
}
.info h2{
    font-size: small;
    text-decoration: underline;
    font-weight: 600;
    margin: 0 0 10px 0;
}
#newScale{
    font-size: larger;
    margin: 5px 0 0 15px;;
}

HTML

<link href="https://cdn.jsdelivr.net/npm/ol@v7.2.2/ol.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/ol@v7.2.2/dist/ol.js"></script>
<div id="map" class="map"></div>    
<div id="info" class="info">
    <h2>Change Marker Size</h2>
    <input type='range' min='50' max='150' value='100' class='markerSlider' id='markerSlider'><br>
    <span id='newScale'>1</span>
</div>

说明： #

• 通过markerLayer变量保留矢量图层的引用，避免每次查询DOM或图层数组。
• 修改图标缩放后，必须调用markerLayer.setStyle(currentStyle)触发地图重新渲染，否则样式变更不会生效。
• 使用this.value替代重复查询DOM元素，简化代码逻辑。

内容的提问来源于stack exchange，提问作者user3182413