How to load the map and globe when i m using Cesium react and leaflet offline?

114 Views Asked by At

I'm using cesium with react and leaflet and i m trying to load my terrain files in offline mode but the globe doesnt appear and also the elevation on the globe, only options cesium are visible. And i hope to know how to switch between my leaflet s map and cesium globe

import { Entity,Viewer,Globe ,Camera,} from 'resium';
function App() {
const {array:user,set:setUser}=useArray(JSON.parse(storedUser))
if (user && token !== '') {


    var terrainProvider = new Cesium.CesiumTerrainProvider({
      url: "http://127.0.0.1:80/tiles",
      requestWaterMask: true,
      requestVertexNormals: true,
      isSct: true,
      isShowGlobe: true,
      isLoading : true

    });
  
    console.log(terrainProvider, "ccccccccc");
  
  return (
    <><h1>Hello, world.</h1>
   <Viewer full  terrainProvider={terrainProvider}>
   <Globe/>
  <Camera />
  <Entity /> 
      <MapWrapper user={user} setUser={setUser} />
    </Viewer></>
    
  );
}
   else 
  return <Login  />;
}
export default App;
   

this is my layer.json


{
  "tilejson": "2.1.0",
  "name": "marocMnt",
  "description": "",
  "version": "1.1.0",
  "format": "quantized-mesh-1.0",
  "attribution": "",
  "schema": "tms",
  "tiles": [ "{z}/{x}/{y}.terrain?v={version}" ],
  "projection": "EPSG:4326",
  "bounds": [ -180.00, -90.00, 180.00, 90.00 ],
  "available": [
    [ { "startX": 0, "startY": 0, "endX": 1, "endY": 0 } ]
   ,[ { "startX": 1, "startY": 1, "endX": 2, "endY": 1 } ]
   ,[ { "startX": 3, "startY": 2, "endX": 4, "endY": 2 } ]
   ,[ { "startX": 7, "startY": 4, "endX": 8, "endY": 5 } ]
   ,[ { "startX": 14, "startY": 9, "endX": 16, "endY": 11 } ]
   ,[ { "startX": 28, "startY": 19, "endX": 32, "endY": 23 } ]
   ,[ { "startX": 56, "startY": 39, "endX": 64, "endY": 46 } ]
   ,[ { "startX": 113, "startY": 78, "endX": 128, "endY": 92 } ]
   ,[ { "startX": 227, "startY": 156, "endX": 256, "endY": 184 } ]
   ,[ { "startX": 455, "startY": 312, "endX": 512, "endY": 369 } ]
   ,[ { "startX": 910, "startY": 625, "endX": 1024, "endY": 739 } ]
   ,[ { "startX": 1820, "startY": 1251, "endX": 2048, "endY": 1479 } ]
   ,[ { "startX": 3640, "startY": 2503, "endX": 4096, "endY": 2958 } ]
  ]
}
0

There are 0 best solutions below