ArcGIS JavaScript 4.x首次加载地图时自定义底图投影不匹配问题求助

使用ArcGIS JavaScript 4.x时，尝试在地图首次加载时添加自定义底图，但MapView与底图图层的投影不一致。该底图在底图库中可正常使用，但首次加载地图时无法生效。代码如下：

baseLayer = new TileLayer({
    url: baseMapService.MapServiceURL
});
// map.add(layer);
var myBasemap = new Basemap({
    baseLayers: [baseLayer],
    thumbnailUrl: baseMapService.MapServiceURL + '/info/thumbnail',
    title: 'My custom basemap',
    id: 'my_custom_basemap'
});
map.basemap = myBasemap;

1. 确保Map的空间参考与底图图层一致 #

ArcGIS JS 4.x中，Map的空间参考默认会继承底图的空间参考，但如果初始化Map时显式指定了与底图不同的空间参考，就会引发投影不匹配问题。解决方式：

• 初始化Map时不指定spatialReference，让它自动继承底图的空间参考；
• 或者先获取底图图层的空间参考，再显式设置给Map：

baseLayer.load().then(function() {
    const map = new Map({
        spatialReference: baseLayer.spatialReference
    });
    const myBasemap = new Basemap({
        baseLayers: [baseLayer],
        thumbnailUrl: baseMapService.MapServiceURL + '/info/thumbnail',
        title: 'My custom basemap',
        id: 'my_custom_basemap'
    });
    map.basemap = myBasemap;
    // 后续初始化MapView...
});

2. 等待底图图层加载完成后再赋值 #

如果底图图层还未加载完成就赋值给map.basemap，可能导致加载失败。通过监听图层的load事件，确保图层加载完成后再创建并设置底图：

const baseLayer = new TileLayer({
    url: baseMapService.MapServiceURL
});

baseLayer.when(function() {
    const myBasemap = new Basemap({
        baseLayers: [baseLayer],
        thumbnailUrl: baseMapService.MapServiceURL + '/info/thumbnail',
        title: 'My custom basemap',
        id: 'my_custom_basemap'
    });
    map.basemap = myBasemap;
}).catch(function(error) {
    console.error('底图图层加载失败:', error);
});

3. 避免提前设置MapView的空间参考 #

如果MapView初始化时指定了与底图不一致的空间参考，会强制地图使用该参考，但TileLayer不支持动态投影（4.x中仅部分矢量图层支持），导致底图无法加载。确保MapView的spatialReference与底图图层一致，或者不指定，让它自动继承Map的空间参考。

4. 验证TileLayer服务的有效性 #

确认baseMapService.MapServiceURL是有效的瓦片服务URL，在浏览器中访问该URL，检查是否能正常返回瓦片元数据（如访问/tile/0/0/0是否能返回瓦片图片）。如果服务本身不可访问或不是标准的ArcGIS瓦片服务，也会导致加载失败。

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