反应传单-layer控制-satellite视图

Question

我想使用我的反应项目传单地图，我想添加一个层控制，用户可以切换之间的街道视图和卫星视图。我试图使用谷歌的卫星视图，但它似乎不起作用。

这是我的密码

function App() {
  
  return (
    <div className="App">
      <MapContainer center={[40.44695, -345.23437]} 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}'
                maxZoom= {20}
              />
            
          </BaseLayer>
        </LayersControl>
      </MapContainer>
    </div>
  );
}

export default App;

卫星视图

非常感谢

Answer 1

用于谷歌地图的贴片url不存在：

https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}

从传单文件中：

{s}是指可用子域之一(用于帮助处理每个域限制的浏览器并行请求；子域值在选项中指定；默认情况下可以省略a、b或c)、{z} -缩放级别、{x}和{y} -瓷砖坐标。{r}可用于在URL中添加"@2x“以加载视网膜块。

您请求的urls使用的是默认子域a、b和c，这些子域似乎都已损坏：

• https://a.google.com/vt/lyrs=s&x=1&y=1&z=1
• https://b.google.com/vt/lyrs=s&x=1&y=1&z=1
• https://c.google.com/vt/lyrs=s&x=1&y=1&z=1

看起来正确的子域是mt1、mt2和mt3。您可以使用subdomains支柱指定它们：

<TileLayer
   url='https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}'
   maxZoom= {20}
   subdomains={['mt1','mt2','mt3']}
/>

https://mt1.google.com/vt/lyrs=s&x=1&y=1&z=1