React项目集成Leaflet添加图层切换控件 Google卫星视图无法加载

你的Google卫星图层无法加载核心原因是没有配置瓦片服务对应的子域名参数，修正方案如下：

修正后完整代码 #

function App() {
  return (
    <div className="App">
      <MapContainer center={[40.44695, 15]} zoom={2}>
        <LayersControl>
          <BaseLayer checked name="OpenStreetMap">
            <TileLayer
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
              attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            />
          </BaseLayer>

          <BaseLayer name="Satellite View">
            <TileLayer
              url='https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}'
              subdomains={['mt0', 'mt1', 'mt2', 'mt3']}
              maxZoom={20}
              attribution='&copy; Google'
            />
          </BaseLayer>
        </LayersControl>
      </MapContainer>
    </div>
  );
}

export default App;

核心修改点 #

• 新增subdomains属性：Google瓦片服务使用mt0/mt1/mt2/mt3作为子域名，你之前没有配置该参数，导致URL中的{s}占位符无法被正确替换，资源请求失败
• 修正了地图中心的经度参数：原参数-345.23437超出了经度-180~180的合法范围，等价为15，修改后可避免潜在的坐标计算异常
• 可选补充了Google图层的版权声明，符合平台使用规范

修改后即可正常实现街景和卫星视图的切换功能。

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