在React-Azure-Maps中添加天气瓦片层时遇source未找到错误

错误含义 #

这个错误说明你要添加的瓦片层对应的栅格数据源未被正确创建或关联。react-azure-maps对原生Azure Maps API做了封装，直接用原生方式创建TileLayer并调用map.layers.add()会绕过组件内部的数据源关联逻辑，导致系统找不到瓦片层依赖的数据源。

解决方向与代码示例 #

方案1：组件式添加（推荐，符合React开发模式） #

react-azure-maps本质是React组件库，推荐直接在AzureMaps组件内部嵌套TileLayer组件，由库自动处理数据源和图层的关联：

import { AzureMaps, TileLayer } from 'react-azure-maps';

// 在你的地图组件中
<AzureMaps
  authOptions={{ 
    authType: 'subscriptionKey', 
    subscriptionKey: '你的Azure Maps订阅密钥' 
  }}
>
  {/* 天气红外瓦片层 */}
  <TileLayer
    id="cloudsTileLayer"
    tileUrl="https://{azMapsDomain}/map/tile?api-version=2.0&tilesetId=microsoft.weather.infrared.main&zoom={z}&x={x}&y={y}"
    opacity={0.8}
    tileSize={128}
    maxSourceZoom={17}
  />
</AzureMaps>

方案2：命令式动态添加（适合逻辑中动态添加场景） #

如果必须通过代码逻辑动态添加图层，需要手动创建并注册栅格数据源，再将瓦片层关联到该数据源：

import { source, layer } from 'react-azure-maps';

export function addClouds(map: any): void {
  // 1. 创建栅格数据源
  const cloudSource = new source.RasterSource({
    tiles: ['https://{azMapsDomain}/map/tile?api-version=2.0&tilesetId=microsoft.weather.infrared.main&zoom={z}&x={x}&y={y}'],
    tileSize: 128
  }, 'cloudsTileSource');

  // 2. 将数据源注册到地图
  map.sources.add(cloudSource);

  // 3. 创建瓦片层并关联已注册的数据源
  const weatherTileLayer = new layer.TileLayer({
    source: 'cloudsTileSource', // 关联上面创建的数据源ID
    opacity: 0.8,
    maxSourceZoom: 17
  }, 'cloudsTileLayer');

  // 4. 添加瓦片层到地图
  map.layers.add(weatherTileLayer);
}

补充说明 #

• 原代码直接创建TileLayer并添加到地图，react-azure-maps内部会尝试自动生成对应的数据源，但这个过程依赖组件生命周期逻辑，直接调用map.layers.add()会跳过该步骤，导致数据源未注册。
• 网络面板没有Azure请求的原因是：数据源未正确创建，系统不会触发瓦片加载请求，解决后即可看到瓦片请求。

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