OpenLayers地图标记缩放偏移问题：位置随缩放级别漂移

我在OpenLayers中设置了一个地图标记，目标坐标为纬度53.5788686°、经度-113.2774829°，对应加拿大阿尔伯塔省埃德蒙顿的Via Rail车站。仅在最大缩放级别时标记位置准确，缩放级别越低，标记越向南偏移，中等缩放时甚至会显示在美国境内，期望标记位置保持固定。

代码文件 #

testmap.js #

import {Feature, Map, View} from './node_modules/ol/index.js';
import {OSM, Vector as VectorSource} from './node_modules/ol/source.js';
import Point from './node_modules/ol/geom/Point.js';
import * as olProj from './node_modules/ol/proj.js';
import Style from './node_modules/ol/style/Style.js';
import Icon from './node_modules/ol/style/Icon.js';
import {Tile as TileLayer, Vector as VectorLayer} from './node_modules/ol/layer.js';

// object mapSetgs is global to this module, to better handle data changes

olProj.useGeographic();

console.log("map settings are zoom of " + mapSetgs.mapzoom + ", lat of " + mapSetgs.lat + ", and long of " + mapSetgs.lng);

const markers = new VectorSource({ features: [] });
// wps (waypoints) is global

function setMarkers(wps) {
    let i, x, y; 
    for (i = 1; i < wps.length; ++i) { // disregard inital center point
        x = wps[i][2]; y = wps[i][1];  // reverse lat,long to long,lat per OL practice
        const iconPosn = new Point([x, y]);
        const iconFeature = new Feature({geometry: iconPosn});
        markers.addFeature(iconFeature);
    }
}

let myMap = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    }),
    new VectorLayer({  
      source: markers,
      style: new Style({
          image: new Icon({
            anchor: [0, -0.5],
            src: './res/Google_Maps_pin.svg'
          })
       })
    })
  ],
  view: new View({
    center: [mapSetgs.lng, mapSetgs.lat],
    zoom: mapSetgs.mapzoom
  })
});

setMarkers(wps);

$("#map").show(); // in full app, map is normally hidden - not everyone is a map user

// EOF

testmap.html #

<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Open Layers Map</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="https://openlayers.org/favicon.ico" />
    <link rel="stylesheet" href="res/mapstyle.css">
    <link rel="stylesheet" href="res/DMTP_v24A3.css">

    <script src="res/jquery-3.7.1.min.js"></script>
<script>
const wps = [ /* point id, lat, long, descr */
    [ 69, 47.40671668, -113.2774829, "map ctr"],
    [283, 53.5788686,  -113.5307153, "Edmonton train sta"]
], mapSetgs = {mapzoom: 5, lat: wps[0][1], lng: wps[0][2] };
</script>
</head>
<body>
<h3>Test Open Layers Map</h3>
<div id='map' style='width:80%; height:80%;'></div>
<script type="module" src="./testmap.js"></script>
</body>
</html> 

问题原因与解决方法 #

核心问题 #

标记偏移的根源是图标锚点设置错误。当前anchor: [0, -0.5]的配置，会让图标以左上角为基准向上偏移半个图标高度，这种偏移会随地图缩放比例被放大，导致低缩放级别下标记严重偏离实际坐标。

修复步骤 #

1. 修正图标锚点
   对于地图大头针类标记，需要让图标的底部尖端对准坐标点，将锚点设置为[0.5, 1]（图标底部中心位置）。修改Icon配置：

   image: new Icon({
     anchor: [0.5, 1], // 让图标底部中心精准对准坐标点
     src: './res/Google_Maps_pin.svg'
   })
   

2. 验证坐标逻辑
   你已经通过olProj.useGeographic()启用了WGS84地理坐标系，代码中[经度, 纬度]的坐标顺序处理是正确的，这部分无需修改。

3. 测试效果
   修改后，无论地图缩放级别如何变化，标记都会精准固定在目标坐标位置，不会再出现偏移问题。

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