Flutter使用flutter_map叠加ArcGIS WMTS图层与OpenStreetMap偏移不对齐求助

问题原因 #

• 两个图层的瓦片Y轴坐标规范不一致：OpenStreetMap使用标准XYZ瓦片规范，Y轴从上到下计数，你用到的ArcGIS GEBCO等高线瓦片使用TMS规范，Y轴从下到上计数，两者Y轴完全翻转导致错位
• ArcGIS瓦片地址没有配置{s}子域名占位符，额外添加的subdomains参数会导致请求地址拼接错误，进一步引发加载错位

修正后代码 #

Widget build(BuildContext context) {
  return MaterialApp(
    home: FlutterMap(
      options: MapOptions(
        center: LatLng(33.8, 9.5),
        zoom: 6.0,
        pinchZoomWinGestures: MultiFingerGesture.pinchZoom,
      ),
      layers: [
        // 底层：OpenStreetMap底图
        TileLayerOptions(
          urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
          subdomains: ['a', 'b', 'c'],
          tileProvider: NonCachingNetworkTileProvider(),
          backgroundColor: Colors.black,
        ),
        // 上层：ArcGIS GEBCO等高线图层
        TileLayerOptions(
          urlTemplate:
              "https://tiles.arcgis.com/tiles/C8EMgrsFcRFL6LrL/arcgis/rest/services/GEBCO_contours/MapServer/tile/{z}/{x}/{y}",
          // 开启TMS模式自动翻转Y轴坐标，对齐OSM瓦片规范
          tms: true,
          tileProvider: NonCachingNetworkTileProvider(),
          backgroundColor: Colors.transparent,
        ),
      ],
    ),
  );
}

补充说明 #

如果你使用的是flutter_map 4.0及以上版本，TileLayerOptions已废弃，需改为TileLayer组件直接传入参数，核心的tms: true配置保持不变即可。你使用的GEBCO等高线图层默认和OSM底图同为EPSG:3857（Web墨卡托）坐标系，无需额外调整坐标系参数。

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