ArcGIS JS API 4.28图层错位问题排查与解决记录

问题现象 #

使用ArcGIS JS API 4.28时，开发环境下底图与MapImageLayer数据图层显示正常，但生产环境中数据图层偏移至左上角。

排查过程 #

• 仅在28.2英寸（3:2）高分辨率显示器（3840x2560）上出现该问题，低分辨率笔记本无异常；
• 定位到问题根源：地图服务的maxImageWidth/maxImageHeight参数设置为2048/2048，限制了图像尺寸，进而影响canvas/WebGL渲染导致图层错位。

解决方法 #

将地图服务的最大图像尺寸调整为4096x4096，问题解决。

尝试过的无效方案 #

• 通过MutationObserver修改canvas宽高以匹配服务尺寸；
• 使用esriConfig.request.interceptors注入size参数。

图层初始化代码示例 #

const os_map = new TileLayer({
    url: arcgisUrl + "/arcgis/rest/services/Website_basemap/MapServer",
    spatialReference: mpSpatRef,
    opacity: 0.9
});
mpLyrSearch = new MapImageLayer({
    url: arcgisUrl + baseData,
    imageFormat: 'png32',
    opacity:1
})
mpLyrInfo = new MapImageLayer({
    url: arcgisUrl + baseData,
    imageFormat: 'png32',
    opacity:0.6
})

mapX = new WebMap({
    layers: [
        os_map,
        mpLyrInfo,
        mpLyrSearch
     ]
})

mpView = new MapView({
    container: "map", // Reference to the DOM node that will contain the view
    map: mapX, // References the map object created in step 3
    zoom: 2,
    spatialReference: mpSpatRef,
    spatialReferenceLocked: true,
    navigation: {
        gamepad: {
            enabled: true
        },
        browserTouchPanEnabled: true,
        momentumEnabled: false,
        mouseWheelZoomEnabled: true
    }
});

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