OpenLayers绘制时鼠标光标与绘制指针位置不匹配问题求助

我在canvas上绘制线条时，出现鼠标位置与canvas位置不匹配的问题，每次绘制时光标与实际生成的线条都存在一定距离，相关代码如下：

$.ajax({
    async:true,
    cache:false,
    type:"POST",
    dataType: 'jsonp',
    url:encodeURI("http://www.khoa.go.kr/oceanmap/BASEMAP/otmsBasemapApi.do?ServiceKey="),
    data:{},
    success:function(response) {
        //console.log(response);
        init();
    },
    error:function(response) {
    }
});

function init(){
    
    var options = {
        projection : new OpenLayers.Projection("EPSG:5179"), 
        displayProjection: new OpenLayers.Projection("EPSG:4326"),
        maxExtent : new OpenLayers.Bounds(-200000.0, -3015.4524155292, 3803015.45241553, 4000000.0),
        restrictedExtent : new OpenLayers.Bounds(37953.1466, 1126946.7253, 2152527.8074, 2873292.7040),
        center : new OpenLayers.LonLat(mapCenterX, mapCenterY),
        allOverlays: true,
        maxResolution : 1954.597389,
        numZoomLevels: numZoomLevels,
        zoom : zoomLevel,
        minZoom : minZoomLevel,
        transitionEffect : null,
        layers : [ OtmsLayer ],
        controls: [],
        };
    
    map = new OpenLayers.Map('mapWriteBiz${ajaxId}', options);     
         
    map.zoomToExtent( mapBounds.transform(map.displayProjection, map.projection ) );
  
    map.setCenter([mapCenterX,mapCenterY], minZoomLevel);
    
    map.zoomTo(1);
    
    map.addControl(new OpenLayers.Control.Navigation({
                    'zoomWheelEnabled': false,
                    'defaultDblClick': function ( evt ) { 
                        return; 
                     }                  
                    })
                    );
   
    var btnModifyFeature = new OpenLayers.Control.Button({
        displayClass: 'olControlModifyFeature',
        title: "",
        id: 'btnModifyFeature${ajaxId}',
        trigger: modifyFeature,
        });  
    
    var btnDeleteFeature = new OpenLayers.Control.Button({
        displayClass: 'olControlDrawFeature',
        title: "",
        id: 'btnDeleteFeature${ajaxId}',
        trigger: deleteFeature,
        });
     
    var panel = new OpenLayers.Control.Panel({top: 'auto', defaultControl: btnModifyFeature});
    
    panel.addControls([btnModifyFeature, btnDeleteFeature]);
      
    map.addControl(panel);
    
    setDefaultFeatureControls();    
}

偏移问题排查与修复方案 #

• canvas/CSS缩放不匹配
  如果对地图容器或canvas元素设置了CSS层面的宽高缩放，未同步更新canvas原生width/height属性，会导致坐标计算错位。每次容器尺寸变动后，必须调用map.updateSize()同步地图内部尺寸参数。
• 坐标投影转换错误
  当前使用的地图投影为EPSG:5179，setCenter方法传入的[mapCenterX, mapCenterY]如果是WGS84（EPSG:4326）坐标，未做转换直接传入会导致视口坐标和实际图层坐标错位，需要先做投影转换再传入：

const convertedCenter = new OpenLayers.LonLat(mapCenterX, mapCenterY).transform(
  new OpenLayers.Projection("EPSG:4326"),
  map.projection
)
map.setCenter(convertedCenter, minZoomLevel)

• 重复视口操作导致计算紊乱
  代码中连续调用zoomToExtent、setCenter、zoomTo三个视口修改方法，会导致OpenLayers内部分辨率、边界参数计算冲突，删除多余的视口设置，仅保留需要的一个即可。
• 容器CSS属性导致偏移计算错误
  如果地图容器使用了transform类CSS属性做平移/缩放，会导致OpenLayers读取容器偏移量错误，将地图容器设置为position: relative，避免用transform修改容器位置，可解决该类偏移。

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