如何防止OpenLayers图标在地图缩放时随地图缩放

要让图标保持固定像素大小不随地图缩放变化，核心是根据地图当前的**分辨率（resolution）**动态调整图标的缩放因子（scale）。默认图标基于地图单位（如米）渲染，缩放时会随地图单位与像素的比例变化而改变大小，通过动态计算scale可以抵消这种变化。

具体修改步骤如下：

1. 调整图层的样式函数
   将样式计算逻辑移到VectorLayer的style函数中，每次地图渲染（包括缩放）时会传入当前分辨率并重新计算样式：

vectorSource = new ol.source.Vector();
markerVectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: function(feature, resolution) {
        // 从Feature中获取所需参数
        const markerName = feature.get('name');
        const nTracks = feature.get('stationTracks').length;
        
        // 计算缩放因子：让图标保持固定像素宽度（对应SVG原始宽度45px）
        const desiredPixelWidth = 45;
        const svgOriginalWidth = 45;
        const scale = resolution * desiredPixelWidth / svgOriginalWidth;
        
        return createStationStyle(markerName, nTracks, scale);
    }
});

2. 修改样式创建函数
   更新createStationStyle函数，接收scale参数并应用到Icon样式上：

function createStationStyle(markerName, nTracks, scale) {
    const spacing = 45 / (nTracks + 1);

    const lines = Array.from({ length: nTracks }, (_, i) => {
        const x = (i + 1) * spacing;
        return `<line x1="${x}" y1="10" x2="${x}" y2="30" stroke="red" stroke-width="2"/>`;
    }).join('');

    // 压缩SVG字符串避免btoa处理换行出错
    const svgStr = `<svg xmlns="http://www.w3.org/2000/svg" width="45" height="40"><rect x="0" y="10" width="45" height="20" fill="white" stroke="black" stroke-width="2"/>${lines}<text x="50%" y="7" font-size="10" text-anchor="middle" fill="black">${markerName}</text></svg>`;

    return new ol.style.Style({
        image: new ol.style.Icon({
            src: 'data:image/svg+xml;base64,' + btoa(svgStr),
            anchor: [0.5, 0.5],
            scale: scale // 应用动态计算的缩放因子
        })
    });
}

3. 移除Feature上的固定样式
   不再直接给Feature设置样式，图层的style函数会动态生成样式：

const marker = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.fromLonLat([mCoordinates[1], mCoordinates[0]])),
    name: ocpCode,
    stationTracks: ocpTracks
});
// 移除原有的marker.setStyle调用

原理说明 #

• 地图分辨率（resolution）表示1像素对应的地图单位长度（如米）：地图放大时分辨率变小，缩小时分辨率变大。
• 通过scale = resolution * 期望像素宽度 / SVG原始宽度的计算，让图标在屏幕上始终保持设置的像素宽度，抵消地图缩放带来的大小变化。

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