I had made a 3D view of the osm buildings using cesium. In which i had added a terrain effect using the standard cesium terrain provider as below
var viewer = new Cesium.Viewer('cesiumContainer');
var terrainProvider = new Cesium.CesiumTerrainProvider({
url : '//assets.agi.com/stk-terrain/world'
});
viewer.terrainProvider = terrainProvider;
After adding the terrain, my geojson 3D seems to be floated and shifted as below
Hello,
We do not currently have support for drawing models on terrain. The buildings look offset because they are at the incorrect height. You can try using the sampleTerrain function to scale the buildings to the correct height.
Best,
Hannah
Hai Hannah.
Thank you so much for the reply. Actually the problem is i have two geojson layers loaded in cesium and added the terrain effect. One is line geometry road and polygon geometry building. The polygon geometry has height information and line doesnot have. Am completely new to Cesium. Below is my code please help me to scale the buildings to the correct height.
function startup(Cesium) {
‘use strict’;
//Sandcastle_Begin
//Load a GeoJSON file containing simplestyle information.
//To learn more about simplestyle, see https://github.com/mapbox/simplestyle-spec
//In this particular example, the name of each entity is set to its maki icon identifier.
//Clicking on each billboard will show it’s identifier in the InfoBox.
var viewer = new Cesium.Viewer(‘cesiumContainer’, {
timeline: false,
animation : false,
vrButton : true,
selectionIndicator : false
});
//var terrainProvider = new Cesium.CesiumTerrainProvider({
// url : ‘//assets.agi.com/stk-terrain/world’
//});
//viewer.terrainProvider = terrainProvider;
//Example 3: Apply custom graphics after load.
Sandcastle.addToolbarButton(‘3D View’, function() {
//Seed the random number generator for repeatable results.
Cesium.Math.setRandomNumberSeed(0);
var dataSource1 = new Cesium.GeoJsonDataSource();
var roads = dataSource1.load(’…/…/SampleData/Roads_Hubli.geojson’);
roads.then(function(dataSource1) {
viewer.dataSources.add(dataSource1);
viewer.zoomTo(dataSource1);
//Get the array of entities
var entities1 = dataSource1.entities.values;
var colorHash = {};
for (var i = 0; i < entities1.length; i++) {
//For each entity, create a random color based on the state name.
//Some states have multiple entities, so we store the color in a
//hash so that we use the same color for the entire state.
var entity = entities1[i];
var name = entity.name;
var color = colorHash[name];
if (!color) {
color = Cesium.Color.BLACK;
colorHash[name] = color;
}
//Set the polygon material to our random color.
entity.polyline.material = color;
//Remove the outlines.
entity.polyline.outline = false;
}
}).otherwise(function(error){
//Display any errrors encountered while loading.
window.alert(error);
});
var dataSource2 = new Cesium.GeoJsonDataSource();
var promise = dataSource2.load(’…/…/SampleData/Hubli_Buildings.geojson’);
promise.then(function(dataSource2) {
viewer.dataSources.add(dataSource2);
viewer.zoomTo(dataSource2);
//Get the array of entities
var entities2 = dataSource2.entities.values;
var colorHash = {};
for (var i = 0; i < entities2.length; i++) {
//For each entity, create a random color based on the state name.
//Some states have multiple entities, so we store the color in a
//hash so that we use the same color for the entire state.
var entity = entities2[i];
var name = entity.Elev_in_m;
var color = colorHash[name];
if (!color) {
color = Cesium.Color.BROWN;
colorHash[name] = color;
}
//Set the polygon material to our random color.
entity.polygon.material = color;
//Remove the outlines.
entity.polygon.outline = false;
//Extrude the polygon based on the state’s population. Each entity
//stores the properties for the GeoJSON feature it was created from
//Since the population is a huge number, we divide by 50.
entity.polygon.extrudedHeight = entity.properties.Elev_in_m;
}
}).otherwise(function(error){
//Display any errrors encountered while loading.
window.alert(error);
});
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== “undefined”) {
startup(Cesium);
} else if (typeof require === “function”) {
require([“Cesium”], startup);
}
And the lat and long for the data is 15.3647, 75.1240.
We currently don’t have support for displaying lines on terrain. It is part of our ‘Vector Data on Terrain’ roadmap we have planned here: https://github.com/AnalyticalGraphicsInc/cesium/issues/2172
We really hope to have this functionality by the end of the year, so keep an eye on that issue for updates.
Best,
Hannah
Alright. Thank you so much for the response. I will keep an eye on the issue.
For the buildings getting floated after the terrain had been enabled. Is there a way to bring the buildings down or up (adjust the height manually) so that it fits the terrain exactly.
Hi Farook,
Could you please help me out with a detailed instructions on how did you create a 3D View of OSM Buildings in cesium? I need to achieve on the similar lines of NYC Demo.
Thanks
Rohit Sinha
Hi Rohit,
I had downloaded buildings from OSM and gave a fake height for each building and exported those to geojson.The below snippets will help you to view those geojson builidngs to 3D.
var viewer = new Cesium.Viewer('cesiumContainer', {
sceneMode : Cesium.SceneMode.SCENE3D,
timeline : false,
animation : false
});
var dataSource = Cesium.GeoJsonDataSource.load('../../SampleData/Buildings_3D_Elevation.geojson');
viewer.dataSources.add(dataSource);
viewer.zoomTo(dataSource);
entity.polygon.extrudedHeight = entity.properties.your_height_field
var p = dataSource.entities.values;
for (var i = 0; i < p.length; i++) {
p.polygon.extrudedHeight = entity.properties.your_height_field
Hope this will helps somewhat.
Thanks Farook. I see this is one of the option to visualize OSM 3D builidng via extrusion. I am more interested in the way NYC Demo was created, where 3D Tiles was prepared using OSM data. Any idea of this approach?
Regards,
Rohit