javascript - react 传单-图层控制-卫星 View

Question

我想在我的 react 项目上使用传单 map ，并且我想添加一个图层控件，用户可以在街景和卫星 View 之间切换。 我正在尝试使用谷歌卫星 View ，但它似乎不起作用。

这是我的代码

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;

Satellite View

非常感谢

Answer 1

您用于 Google map 的图 block 网址不存在:

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

来自传单文档:

{s} means one of the available subdomains (used sequentially to help with browser parallel requests per domain limitation; subdomain values are specified in options; a, b or c by default, can be omitted), {z} — zoom level, {x} and {y} — tile coordinates. {r} can be used to add "@2x" to the URL to load retina tiles.

您请求的网址使用默认子域 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