Cesium geojson file integration

CesiumJS
1

In the cesiumJS code I use, while integrating the 3d geojson format files into the map, I want to integrate it by specifying the file location directly from my computer for example(Desktop\geojson\test.geojson), not using the token and file id from the cesium.ion database.
I don’t have any problems when I write using cesium ion, it works but as i said i want to import from local . Let me share with you the function of the code I am using now;

async function addBuildingGeoJSON1() {
const geoJSONURL = await Cesium.IonResource.fromAssetId(1182187);
const geoJSON = await Cesium.GeoJsonDataSource.load(geoJSONURL, {
clampToGround: true,
});
const dataSource = await viewer.dataSources.add(geoJSON);
for (const entity of dataSource.entities.values) {
entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN;
}
}

2

Hi @Egemen_Ozgur,

for local files you have to use a html-input-element with type=“file” and some temporary created URL for that file. You can have a look at following code, I have quickly copied from my app. Maybe you can use it and make it work for you:

// adding eventListener to html-input-Element with type="file"
document.getElementById('localfiles').addEventListener('change', loadFiles, false);

// function for loading local geojson
function loadFiles (event) {
  let files = event.target.files;

  // for-loop cause I want to support multiple files at once
  for (i = 0; i < files.length; i++) {
    let tmppath = URL.createObjectURL(event.target.files[i]);
    Cesium.GeoJsonDataSource.clampToGround = true;
    let geojson = new Cesium.GeoJsonDataSource();
    let data = geojson.load(tmppath);
    data.then(function(geojson) {
      viewer.dataSources.add(geojson);
      let entities = geojson.entities.values;
      let colorHash = {};
      for (k = 0; k < entities.length; k++) {
        let entity = entities[k];
        let id = entity.id;
        if (entity.polygon) {
          let color = colorHash[id];
          if (!color) {
            color = Cesium.Color.fromRandom({alpha: 1});
            colorHash[id] = color;
          }
          entity.polygon.material = color;
          entity.polygon.outline = false;
	  entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN;
        } else if (entity.polyline) {
          entity.polyline.material = Cesium.Color.fromRandom();
          entity.polyline.width = 3;
          entity.polyline.classificationType = Cesium.ClassificationType.TERRAIN;
        } else {
	}
      };
     viewer.zoomTo(geojson);
    }).otherwise(function(error){
      window.alert(error);
    });
  };	
};

There is some code for random colors there, which you maybe dont need.

Best, Lennart

1 Like