3D buildings from vector layer
Hello!
I have a problem I can not solve for a long time ...
I have a vector layer with buildings. In 3D mode, they appear flat ... I also want to do this building in 3D...give them height.
Here are two screenshots and source:
var vectorSourceMinsk = new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: './minsk_buildings.geojson'
});
var vectorLayerMinsk = new ol.layer.Vector({
source: vectorSourceMinsk,
style: styleFunction
});
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var ol2d = new ol.Map({
layers: [layer, vectorLayerMinsk],
target: 'map2d',
view: new ol.View({
center: ol.proj.fromLonLat([-74.0064, 40.7142]),
maxZoom: 19,
zoom: 15
}),
controls: controls
});
var ol3d = new olcs.OLCesium({map: ol2d});
Can you help me?

You may be interested in https://github.com/gberaudo/ol3-cesium/commits/demo_extrude.
@gberaudo I'm sorry, but I have not found the answer to my question. Can you help me?
I created a demo of extruded buildings some time ago. The code is in the branch of the link I shared above. The code in the demo read buildings from the 2D layer and extrude building per building based on some rule specific to the dataset. It sounds similar to what you are trying to do.
@gberaudo Sorry, but you are probably talking about this example: https://github.com/gberaudo/ol3-cesium/commit/70cc3c9590745faf503038d34be9c00607dc8816
I ran this example ... and the result is the same as mine.
I'm probably wrong example?

I presented the concept at FOSS4G, see https://github.com/gberaudo/talks/blob/master/2015-foss4g-seoul/foss4g-seoul-ol3-cesium.pdf page 43. The source code of the example is included with the presentation.
Maybe it was branch hack_extrusion. Not sure.
@gberaudo Thank you for the example. But I had two questions:
- I understand that this is a modernized library OL3-cesium?
- the error "Failed to parse SourceMap" appears when the transfer of any .json. Are there any requirements for .json? Once again, thank you very much!!
- It is some experiments I did last year.
- You can ignore SourceMap errors. Yes, the json was in a specific format so you certainly need to adapt some parts.
@gberaudo Thanks for your answers and help. Perhaps I'm a little sorting out and maybe I will have a question for you. Thanks again!
@gberaudo Good afternoon! I have to ask you. Could you throw me your ol3cesium-debug with 2.5D buildings (if possible)? I would like to update it to the latest version OL3.
@kartblanch, you can find everything here: https://github.com/gberaudo/talks/tree/master/2015-foss4g-seoul/examples/extrude.
@gberaudo Good afternoon! In continuation of this theme, I have another question for you. I was unable to find examples of the construction of plants for the vector layer. For example, I have a vector layer (the same OSM) and I want to display an array of trees.
Sincerely, kartblanch
Hi @kartblanch, not sure to understand what you expect. Do you want 3D models? Extruded boxes? Simple symbols?
@gberaudo I need to submit to the vegetation (trees) in the form of 3D models (gltf).
Have you tried adding these using the Cesium scene (ol3d.getCesiumScene())?
@gberaudo No, you do not understand =) I have a vector layer on which there are trees in vite point object. I also need to point all of these objects display in 3D, such that every object to link to gltf-tree. Here's an example that I want to get:https://pbs.twimg.com/media/CdiQQ3EUMAAq4Od.jpg
OK, I think I understand now. You have:
- one gltf model of a tree;
- one OL3 vector source with the positions of the trees.
You can iterate on the OL3 vector source, create models and add them to the scene primitives. I don't know if it is possible to share the same model for all positions. Please share your findings here.
@gberaudo By the way, I notice that if at some stage used gltf models, seen large logs ... do not know why it happens? is there a solution?
Hard to say without having more informations.
An official example showing this feature would be great.
I could run extrude example but I have no idea how it has down with building heights?how we define which attribute in jeojson is the height?
As a heads up, you could also use something like https://github.com/stirringhalo/osm2cesium which returns a gltf for use with Cesium. Granted not the same as a pure vector layer extrude however.
Thanks for sharing the link to the project @stirringhalo, it looks great. Have you already had a look to Cesium 3d-tiles format? Do you plan to someday output tiles?
I've looked a bit into Cesium 3d-tiles format, but I'm actually going to take a different approach as the biggest issue I see is getting good 3D models from OSM into a usable format.
I have the https://github.com/stirringhalo/osm2citygml repo which is the conversion of OSM bboxes to CityGML format (but not semantically correct, perhaps later). Then, my goal is to use the https://github.com/3dcitydb project http://www.3dcitydb.org/ to provide a WFS service which allows for the display of 3D features in CesiumJS like some of 3DCityDB's demos. Should be testing with 3DCityDB today!
I see, thanks for the interesting details. Please post feedbacks if you get something working or interesting insights.
I have a question, Which of these approaches has the best performance..does Cesium 3d tiles has a good performance? Also Does geoservers GML format is readable as a cityGML one which we can consume these services with our own database?
@am2222 Not sure what you mean, but some recent posts suggest that you can't add the CityGML schema to Geoserver.
However, 3DCityDB has it's own WFS server functionality.
@stirringhalo thanks for your answer, So it seems at first we must switch into 3DCityDB, But about performance on the web, We have some libraries such as OSMBuilding(does not work correctly on OL3),Ol3-cesium,the cesium itself and now 3DCityDB, I want t know which one is more powerfull than others?
Not sure which I'd consider the best performance. I've been digging into the options investigating the easiest workflow from OSM to 3D display and I've personally come the the conclusion that 3D is most mature in Cesium. The other examples here and [here](http://www.3dcitydb.org/3dcitydb-web-map/0.98/3dwebclient/index.html?gltf_version=0.8&title=NYC_Demo&latitude=40.74337478856652&longitude=-73.98774263868867&height=329.6833486632038&heading=212.94068327361515&pitch=-48.25628003176496&roll=359.9999849535639&layer_0=url%3Dhttp%253A%252F%252Fwww.3dcitydb.net%252F3dcitydb%252Ffileadmin%252Fmydata%252FCesium_NYC_Demo%252FNYK_Building_Extruded%252FNYK_Building_Extruded_MasterJSON_NoJSONP.json%26name%3DNYC_Buildings%26active%3Dtrue%26spreadsheetUrl%3Dhttps%253A%252F%252Fwww.google.com%252Ffusiontables%252FDataSource%253Fdocid%253D1ivFBfqsnkv5OlvkQUybgfOSjIz_u9_98_mmJVUss%2523rows%253Aid%253D1%26minLodPixels%3D140%26maxLodPixels%3D1.7976931348623157e%252B308%26maxSizeOfCachedTiles%3D50%26maxCountOfVisibleTiles%3D200&layer_1=url%3Dhttp%253A%252F%252Fwww.3dcitydb.net%252F3dcitydb%252Ffileadmin%252Fmydata%252FCesium_NYC_Demo%252FNYK_Street_Footprint%252FNYK_Street_Footprint_MasterJSON_NoJSONP.json%26name%3DNYC_Streets%26active%3Dtrue%26spreadsheetUrl%3Dhttps%253A%252F%252Fwww.google.com%252Ffusiontables%252Fdata%253Fdocid%253D1qLk_S4yxma0MI1LmISc8DdLn_NdhrFb784Mwizas Also with Overpass/OSM2World, if you grab more features like walls, roads, etc, it can render them in %2523rows%253Aid%253D1%26minLodPixels%3D140%26maxLodPixels%3D1.7976931348623157e%252B308%26maxSizeOfCachedTiles%3D50%26maxCountOfVisibleTiles%3D200&layer_2=url%3Dhttp%253A%252F%252Fwww.3dcitydb.net%252F3dcitydb%252Ffileadmin%252Fmydata%252FCesium_NYC_Demo%252FNYK_Landuse_Footprint%252FNYK_Landuse_Footprint_MasterJSON_NoJSONP.json%26name%3DNYC_Lots%26active%3Dtrue%26spreadsheetUrl%3Dhttps%253A%252F%252Fwww.google.com%252Ffusiontables%252Fdata%253Fdocid%253D1cdvru7oiJIm0Us4Lgt-KYndNvGYcHjefYaTK_nK4%2523rows%253Aid%253D1%26minLodPixels%3D140%26maxLodPixels%3D1.7976931348623157e%252B308%26maxSizeOfCachedTiles%3D50%26maxCountOfVisibleTiles%3D200) of 3DCityDB with proper CityGML datasets look good.
I'm not sure how well Ol3-cesium and 3DCityDB will interoperate but I do have initial 3DCityDB working with OSM buildings in vanilla Cesium (using the pre-setup viewer that comes with 3DCityDB). No screenshots yet as I have a model rotation and GPU memory use issue but I hopefully will have a more complete demo soon.
Hang tight!
Hi,
I have a problem here, this is my json file
{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[51.3591820600915,32.6179937359932],[51.3591824097384,32.617993722175],[51.3591830234248,32.6179935999585],[51.3591836104368,32.6179933832449],[51.3591841563203,32.6179930773705],[51.3591846476337,32.617992689867],[51.3591850722794,32.6179922302759],[51.359185419801,32.617991709914],[51.3591856816416,32.6179911415942],[51.3591858513536,32.6179905393104],[51.3591859247583,32.617989917893],[51.3591859000481,32.6179892926432],[51.3591858630889,32.6179889809907],[51.3591854874955,32.617987095022],[51.3591853965002,32.6179867776397],[51.3591851635335,32.6179861621705],[51.3591848324836,32.617985593416],[51.3591844123724,32.6179850868763],[51.3591839146494,32.6179846563561],[51.3591833528789,32.6179843135884],[51.3591827423707,32.6179840679147],[51.359182099763,32.6179839260301],[51.3591814425688,32.6179838918016],[51.3591807886985,32.6179839661618],[51.3591804648428,32.6179840304204],[51.3591765500036,32.617985149834],[51.3591762290631,32.6179852722857],[51.3591756128698,32.6179855703019],[51.3591750567613,32.617985969365],[51.3591745771426,32.6179864577028],[51.359174188162,32.6179870209097],[51.3591739012942,32.6179876423715],[51.3591737250015,32.6179883037555],[51.3591736644846,32.6179889855514],[51.3591736636099,32.6179893290575],[51.3591763410412,32.6180213440752],[51.3591763389918,32.6180213475961],[51.3591761126955,32.6180219309809],[51.3591759804468,32.6180225425839],[51.359175945502,32.6180231673452],[51.3591760087217,32.6180237898813],[51.3591761685492,32.6180243948631],[51.3591764210489,32.6180249673941],[51.3591766773187,32.6180253650683],[51.359184035767,32.6181133527061],[51.3591840881219,32.6181136694851],[51.3591842428479,32.6181142905832],[51.3591844949683,32.6181148789184],[51.3591848379853,32.6181154193279],[51.3591852630584,32.6181158978838],[51.3591857592326,32.6181163022527],[51.35918631372,32.618116622013],[51.3591869122303,32.6181168489236],[51.3591875393383,32.6181169771365],[51.3591881788819,32.6181170033474],[51.3591884997091,32.6181169907019],[51.3592726326381,32.6181068673221],[51.3592729550648,32.6181068012493],[51.3592735847161,32.6181066171186],[51.3592741756432,32.6181063322148],[51.3592747118429,32.6181059542535],[51.3592751787945,32.6181054934702],[51.3592755638523,32.6181049623437],[51.3592758565884,32.6181043752572],[51.3592760490754,32.6181037481099],[51.3592761361003,32.6181030978857],[51.3592761153066,32.6181024421933],[51.3592760778421,32.6181021152054],[51.3592611041016,32.6180268773651],[51.3592611035967,32.6180268183802],[51.3592610004234,32.6180262012067],[51.3592609241263,32.6180259730518],[51.3592492662494,32.6179673962733],[51.3592491745451,32.6179670769017],[51.3592489395258,32.6179664577491],[51.3592486052404,32.6179658860522],[51.359248180916,32.617965377591],[51.3592476782647,32.6179649463999],[51.3592471111607,32.6179646043808],[51.3592464952571,32.617964360974],[51.3592458475542,32.6179642228981],[51.3592451859298,32.6179641939641],[51.359244528646,32.6179642749708],[51.3592442033804,32.6179643428688],[51.3592383094526,32.6179660949949],[51.3592380204593,32.6179662058959],[51.3592374630468,32.6179664709633],[51.3592369532121,32.6179668188685],[51.3592365031678,32.6179672412778],[51.3592361236944,32.6179677280728],[51.3592358238817,32.6179682675927],[51.3592356109114,32.617968846914],[51.3592354898852,32.6179694521595],[51.3592354637019,32.6179700688311],[51.3592355329889,32.6179706821571],[51.359235591435,32.6179709861311],[51.3592362848383,32.6179735169799],[51.3592363912596,32.6179738122218],[51.359236648978,32.6179743824228],[51.3592369927225,32.6179749052875],[51.359237414029,32.6179753679415],[51.3592379025236,32.6179757589925],[51.3592384461779,32.6179760688117],[51.3592390316052,32.6179762897702],[51.3592396443905,32.6179764164274],[51.359240269445,32.6179764456644],[51.3592408913777,32.6179763767614],[51.3592414948745,32.617976211415],[51.3592420650754,32.6179759536967],[51.3592425879402,32.6179756099521],[51.3592427200818,32.6179754896201],[51.3592523562398,32.618023907964],[51.3592261929041,32.6180282817054],[51.3592258908791,32.6180283567436],[51.3592253021263,32.6180285527652],[51.3592247509103,32.618028837748],[51.3592242505773,32.6180292047919],[51.3592238132417,32.6180296450099],[51.3592234494924,32.6180301477431],[51.3592231681367,32.6180307008194],[51.3592229759869,32.6180312908471],[51.3592228776954,32.6180319035404],[51.3592228756421,32.6180325240645],[51.3592228988277,32.6180328344066],[51.359227983785,32.6180659300931],[51.3592280556356,32.618066235594],[51.3592282462432,32.6180668315945],[51.3592285277391,32.6180673904396],[51.359228893192,32.6180678983688],[51.3592293336032,32.6180683428752],[51.3592298381283,32.6180687130134],[51.3592303943442,32.6180689996695],[51.3592309885551,32.618069195785],[51.3592313557519,32.6180692556865],[51.3592313224043,32.618069271687],[51.3592308075361,32.6180696272972],[51.3592303546365,32.6180700590724],[51.3592299748574,32.6180705563808],[51.3592296775501,32.6180711069771],[51.3592294700354,32.6180716973037],[51.359229357423,32.6180723128249],[51.3592293424858,32.6180729383845],[51.3592294255916,32.618073558579],[51.3592296046939,32.6180741581373],[51.3592298753829,32.6180747222964],[51.3592302309931,32.6180752371646],[51.3592306627683,32.6180756900642],[51.3592311600767,32.6180760698433],[51.359231710673,32.6180763671506],[51.3592323009996,32.6180765746652],[51.3592329165208,32.6180766872776],[51.3592335420803,32.6180767022149],[51.3592338554479,32.6180766850672],[51.359262106463,32.6180728994459],[51.3592673886512,32.6180994406049],[51.3592293851291,32.6181040134171],[51.3592220303393,32.6180517219362],[51.3592219639425,32.61805142068],[51.3592217856104,32.6180508319618],[51.3592215188643,32.6180502776713],[51.3592211700504,32.6180497709956],[51.3592207474674,32.618049323989],[51.3592202611687,32.6180489472862],[51.359219722724,32.6180486498493],[51.3592191449434,32.6180484387547],[51.3592185415728,32.6180483190244],[51.3592179269671,32.618048293507],[51.3592176186773,32.6180483045188],[51.3592055996874,32.6180496672823],[51.3592052915845,32.6180497269974],[51.3592046885135,32.6180498938903],[51.3592041189751,32.6180501530695],[51.3592035969933,32.6180504981533],[51.3592031354209,32.6180509206444],[51.3592027456234,32.6180514101399],[51.3592024371989,32.6180519545865],[51.3592022177418,32.6180525405784],[51.359202092656,32.6180531536864],[51.3592020650214,32.6180537788138],[51.3592021355184,32.6180544005678],[51.3592023024113,32.6180550036388],[51.3592025615906,32.6180555731772],[51.3592029066743,32.618056095159],[51.3592033291655,32.6180565567314],[51.3592038186609,32.6180569465289],[51.3592043631076,32.6180572549534],[51.3592049490995,32.6180574744105],[51.3592055622075,32.6180575994963],[51.3592061873348,32.6180576271309],[51.3592065009859,32.6180576163489],[51.3592146506786,32.6180566923026],[51.359221440835,32.6181049693223],[51.3591916622477,32.618108552461],[51.3591848087182,32.61802660232],[51.3592129262293,32.6180237469351],[51.3592132350096,32.6180236908279],[51.3592138399914,32.6180235310005],[51.3592144125225,32.6180232785008],[51.359214938505,32.6180229395462],[51.3592154049877,32.6180225224829],[51.3592158004841,32.6180220375803],[51.3592161152558,32.6180214967785],[51.3592163415521,32.6180209133937],[51.3592164738008,32.6180203017907],[51.3592165087456,32.6180196770294],[51.3592164455259,32.6180190544933],[51.3592162856985,32.6180184495115],[51.3592160331987,32.6180178769805],[51.3592156942441,32.6180173509979],[51.3592152771808,32.6180168845152],[51.3592147922783,32.6180164890188],[51.3592142514765,32.6180161742471],[51.3592136680916,32.6180159479508],[51.3592130564887,32.6180158157021],[51.3592124317274,32.6180157807573],[51.3592121179716,32.6180157878698],[51.3591841418965,32.6180186288917],[51.359183040221,32.618005455757],[51.3592182593352,32.6180001642579],[51.359221754875,32.6180204467578],[51.3592218322779,32.6180207508993],[51.3592220337089,32.6180213433294],[51.3592223253365,32.618021896955],[51.3592226999797,32.6180223981438],[51.3592231484137,32.6180228345552],[51.3592236595965,32.618023195443],[51.3592242209411,32.6180234719211],[51.3592248186253,32.6180236571816],[51.3592254379321,32.6180237466629],[51.3592260636122,32.6180237381616],[51.3592266802593,32.618023631887],[51.3592272726894,32.618023430456],[51.3592278263149,32.6180231388284],[51.3592283275038,32.6180227641852],[51.3592287639151,32.6180223157512],[51.3592291248029,32.6180218045684],[51.359229401281,32.6180212432238],[51.3592295865416,32.6180206455396],[51.3592296760228,32.6180200262328],[51.3592296675215,32.6180194005527],[51.3592296386498,32.6180190880471],[51.3592254782303,32.617994947653],[51.3592254022095,32.6179946475909],[51.359225204777,32.6179940627913],[51.3592249194704,32.617993515461],[51.359224553124,32.617993018711],[51.3592241145135,32.6179925844403],[51.3592236141451,32.6179922230516],[51.359223064005,32.6179919432016],[51.359222477271,32.6179917515938],[51.359221867998,32.617991652818],[51.3592212507805,32.6179916492403],[51.3592209420329,32.6179916714052],[51.3591823720634,32.6179974663539],[51.3591820600915,32.6179937359932]],[[51.3592539185068,32.6180317578126],[51.3592562724983,32.6180435858015],[51.3592374675442,32.6180469798914],[51.3592371640237,32.6180470596948],[51.3592365732035,32.6180472658],[51.3592360218992,32.6180475617923],[51.3592355236858,32.6180479403835],[51.359235090831,32.6180483922514],[51.359234733993,32.6180489062694],[51.3592344619584,32.6180494697808],[51.3592342814256,32.61805006891],[51.35923419684,32.6180506889044],[51.3592342102842,32.6180513144979],[51.3592343214273,32.618051930286],[51.3592345275325,32.6180525211062],[51.3592348235249,32.6180530724105],[51.3592352021161,32.6180535706239],[51.3592356539839,32.6180540034787],[51.3592361680019,32.6180543603167],[51.3592367315133,32.6180546323513],[51.3592373306425,32.618054812884],[51.359237950637,32.6180548974697],[51.3592385762304,32.6180548840255],[51.359238888498,32.6180548526857],[51.3592578342735,32.6180514331791],[51.3592605418093,32.6180650376048],[51.3592342422488,32.6180685617322],[51.3592345131158,32.6180683668445],[51.3592349576222,32.6180679264333],[51.3592353277604,32.6180674219082],[51.3592356144165,32.6180668656923],[51.359235810532,32.6180662714814],[51.359235911278,32.618065653907],[51.3592359141737,32.6180650281759],[51.3592358909985,32.6180647151964],[51.3592314055316,32.618035521321],[51.3592539185068,32.6180317578126]]],[[[51.359195187002,32.6179872809134],[51.3592163052646,32.6179816637893],[51.359216589648,32.6179820770821],[51.3592170206272,32.6179825307392],[51.359217517268,32.617982911391],[51.3592180673414,32.6179832096646],[51.3592186573027,32.6179834182156],[51.3592192726252,32.6179835319086],[51.3592198981576,32.6179835479442],[51.3592205184971,32.6179834659276],[51.359221118369,32.6179832878783],[51.3592216830025,32.6179830181804],[51.3592221984943,32.6179826634748],[51.3592226521514,32.6179822324955],[51.3592230328031,32.6179817358548],[51.3592233310767,32.6179811857814],[51.3592235396277,32.61798059582],[51.3592236533207,32.6179799804976],[51.3592236693564,32.6179793549652],[51.3592235873397,32.6179787346257],[51.3592235219206,32.6179784276833],[51.3592227129501,32.617975702154],[51.3592226027749,32.617975414383],[51.3592223395269,32.6179748591808],[51.3592219941174,32.6179743510064],[51.3592215747455,32.6179739019226],[51.3592210913661,32.6179735225898],[51.3592205554537,32.6179732220123],[51.3592199797294,32.6179730073251],[51.3592193778597,32.6179728836246],[51.3592187641315,32.617972853847],[51.3592181531133,32.6179729186991],[51.3592178501096,32.6179729747303],[51.3591893050087,32.6179805672759],[51.3591890093494,32.617980671331],[51.3591884379187,32.617980924356],[51.359187913037,32.6179812635519],[51.3591874475954,32.6179816805877],[51.3591870530256,32.6179821652209],[51.3591867390183,32.6179827055487],[51.3591865132858,32.6179832883004],[51.359186381372,32.6179838991632],[51.3591863465169,32.6179845231342],[51.3591864095765,32.6179851448883],[51.3591864655414,32.6179854532871],[51.3591873900791,32.6179889575387],[51.3591874937018,32.6179892537745],[51.3591877460129,32.6179898263886],[51.3591880847942,32.6179903524828],[51.3591885017039,32.6179908191028],[51.3591889864761,32.6179912147589],[51.3591895271742,32.6179915297088],[51.3591901104845,32.6179917561972],[51.3591907220438,32.6179918886474],[51.3591913467936,32.617991923798],[51.3591919693504,32.6179918607834],[51.3591925743849,32.6179917011552],[51.3591931469991,32.6179914488441],[51.3591936730933,32.6179911100628],[51.3591941397133,32.6179906931532],[51.3591945353694,32.6179902083809],[51.3591948503192,32.6179896676828],[51.3591950768077,32.6179890843726],[51.3591952092579,32.6179884728132],[51.3591952444084,32.6179878480634],[51.359195187002,32.6179872809134]]]]},"properties":{"base":596.000000000000000,"extrude":9.000000000000000}}]}
and this is my extrude.js file
`var view = new ol.View({ center: ol.proj.transform([7.455, 46.93], 'EPSG:4326', 'EPSG:3857'), zoom: 13 });
var buildings = new ol.layer.Vector({ source: new ol.source.Vector({ url: 'data/geojson/buildings.geojson', attributions: [new ol.Attribution({ html: 'Swiss Federal Office of Topography' })], format: new ol.format.GeoJSON() }), style: [ new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'grey', width: 2 }), fill: new ol.style.Fill({ color: 'rgba(0, 0, 255, 0.1)' }) }) ] });
var layer = new ol.layer.Tile({ source: new ol.source.OSM() });
var ol2d = new ol.Map({ layers: [layer, buildings], target: 'map2d', view: view });
var ol3d = new olcs.OLCesium({map: ol2d}); var scene = ol3d.getCesiumScene();
var terrainProvider = new Cesium.CesiumTerrainProvider({ url : 'https://assets.agi.com/stk-terrain/world' }); scene.terrainProvider = terrainProvider; scene.globe.depthTestAgainstTerrain = true;
ol2d.layers.add(buildings);`
my map shows my json layer well but when I enable ol3-cesium it disappears, can you please help me find my mistake?
Does the feature converter use the base and extrude attributes of the geojson?