reaccionar folleto -control de capa-vista de satélite

0

Quiero usar el mapa del folleto en mi proyecto de reacción y me gustaría agregar un control de capa donde el usuario puede cambiar entre la vista de la calle y la vista satelital. Estoy intentando utilizar la vista de satélite de Google, pero parece que no funciona.

Aqui esta mi codigo

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;

Vista satelital

Muchísimas gracias

3
  • ¿Qué no está funcionando? 13 de oct a las 15:52
  • No puedo ver nada en la vista de satélite. No tengo ningún error. No sé por qué. ¿Es culpa de los navegadores? Estoy usando Firefox. Voy a agregar una captura de pantalla para mostrar lo que estoy viendo. 14 de oct a las 8:49
  • En la pestaña de red de las herramientas para desarrolladores, ¿ve solicitudes que se envían al servidor de teselas de Google y regresan correctamente o no hay solicitudes? 14 de oct a las 17:00
0

La URL de mosaico que está utilizando para los mapas de Google no existe:

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

De los documentos del folleto:

{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.

Las direcciones URL que está solicitando el uso de los subdominios están predeterminadas a, by cla que todos aparecen rotos:

Parece que los subdominios son correctos mt1, mt2y mt3. Puedes especificarlos usando el subdomainsprop:

<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

0