3dcitydb / 3dcitydb-web-map

Cesium-based 3D viewer and JavaScript API for the 3D City Database
Apache License 2.0
377 stars 125 forks source link

b3dm example not working #1

Closed strech345 closed 8 years ago

strech345 commented 8 years ago

Hello, for me the b3dm example didn't works. TypeError: Cannot read property 'batchTable' of undefined TypeError: Cannot read property 'batchTable' of undefined at http://localhost:44716/js/3dcitydb-web-map-master/js/b3dmlayer.js:227:54 Whats my fault? is b3dm better than gltf? and how i get these files from 3DCityDB? For me it is not really clear, which cesium instance i should use to show performant and interact (select) of buildings with tiles.

jbo023 commented 8 years ago

Hello Stretch345,

We haven't yet updated the B3DM Dataset for the currently used Cesium Version.

you can either wait until we update the dataset or can go back to the following commit.

https://github.com/3dcitydb/3dcitydb-web-map/tree/c47d108aefedffac628e60d157afb79f45a9ec0b

There the B3DM example should still work.

At the moment it is not possible to create theses files from an 3DCityDB. In one to two weeks a new Importer/Exporter will be released with support for GLTF.

The 3DCityDB to B3DM Konverter is a closed Source internal implementation from virtualcitySYSTEMS.

strech345 commented 8 years ago

Hallo jbo023,

does the exports of 3dcitydb only works with your own cesium viewer https://github.com/3dcitydb/3dcitydb-web-map or should it work with the cesium 3d-tile branch?

jbo023 commented 8 years ago

The 3DCityDBWeb-Map is just an Wrapper around Cesium to guarantee the same api for two different datasets.

  1. An KML File with network links referencing GLTFs (will soon be exportable from the opensource Importer/Exporter in the 3dcitydb organization. (Can be used with the Cesium Master branch)
  2. An B3DM Dataset for the 3D-Tiles implementation of Cesium (this uses the 3D-Tiles branch) The CitygmlToB3DM Converter is an internal implementation from virtualcitySYSTEMS, if you have further interest, you can contact us.
strech345 commented 8 years ago

thanks, ok, i think for the beginning it's the best to use kml. could you tell me how to color the bildings dynamicly? I have a json file with the ids of the bildings and a color value.

Is there a given function or does i have to edit a specific function?

I see the setEntityColorByPrimitive in citydbkmllayers. Could this be the right function?

Thanks Stephan

yaozhihang commented 8 years ago

Hi Stephan,

the dynamic Highlighting (Mouse-Click, Mouse-Over) of 3D-objects has been implemented in the 3DWebclient shipped with this 3dcitydb-web-map API. Please refer the javascript code under this URL: https://github.com/3dcitydb/3dcitydb-web-map/blob/master/3dwebclient/script.js#L401

A comprehensive User-Guide to using this 3dcitydb-web-map-API and the 3DWebclient (as well as the KML/glTF Exporter Tool) will be released soon.

Zhihang

strech345 commented 8 years ago

thanks i will have a look at this cript. I need it not as a click event for one building, but for all buildings at init of kml-tiles. I want to color all buildings with a color by a special json file. So i have to process the array of buildings of the tiles if they loaded.

strech345 commented 8 years ago

ok, i found a solution in citydbKmTilingManager.js -> this.oTask.addListener("checkMasterPool", function (matrixItem, taskQueue) :-)

newKmlDatasource.load(tileUrl).then(function(dataSource) {
                            var entities = dataSource.entities.values;    
                            for(var i =0; i < entities.length; i++) {
                                var e = entities[i];
                                console.log(e._name);
                                //e.wall.outlineColor = Cesium.Color.RED.withAlpha(0.5);
                                if (e._name == "BLDG_0003000e00234d99")
                                    e._children[0]._polygon._material._color._value.blue = 1;
                            }
strech345 commented 8 years ago

i have two layers, one extruded, one geometry lod2. I Think because auf prefetching i get a overload and it crash. Is it possible to disable prefetching or is there a better possiblility?

buildingLayerGeom.citydbKmlTilingManager.startPrefetching = false; Didn't disabled it.

Thanks

yaozhihang commented 8 years ago

Hi,

I don't think the prefetching is the main reason for that crash issue you mentioned. Have you created the extruded and geometry layers by using the Cesium-Branch of the importer/exporter tool? If so, could you share with me your exported master JSON file? email: zhihang.yao@tum.de

regards,

Zhihang

shahabshafiee commented 8 years ago

Hi Zhihang,

I used your code to color only one building but I ended up with more than one. Because with this approach we actually change the color of a "tile" and not a specific building. So it depends on the size of our tiles

screen shot 2016-10-06 at 11 22 50

What do you propose if I want to add colors to buildings with respect to heat demand? It means we will have intervals with colors assigned to them and buildings will have colors depending on their heat demand interval.

Regards, Shahab

yaozhihang commented 8 years ago

Hi Shahab,

the class CitydbKmlLayer has a public function called highlight (see the link below) which can be used for coloring an arbitrary number of KML/glTF objects.

https://github.com/3dcitydb/3dcitydb-web-map/blob/master/js/CitydbKmlLayer.js#L344

An example usage should somehow look like the JS code below:

citydbKmlLayer.highlight(
{
"building_GMLID1": Cesium.Color.RED,
"building_GMLID2": Cesium.Color.YELLOW,
"building_GMLID3": Cesium.Color.BLUE,
 .....
}
); 

Before calling this function, you may need to programmatically determine which color should be assigned to the individual building object according to its heating demand. The conceptual methods for creating such thematic map have been outlined in many research papers in the field of cartography.

By the way, on the Cesium homepage there is an awsome 3D Tiles online demo (you might have already seen it before), where the NYC building objects can be rendered with different colors based on the building height values. However, this web application is not open source.

shahabshafiee commented 8 years ago

Hi Zhihang,

I think I'm making a mistake because I could not implement that. Could you please be more specific?

shahabshafiee commented 8 years ago

this is the error:

b3dmlayer.js:510 Uncaught TypeError: Cannot read property 'DEHH_5df9c3a4-2319-473b-9bf8-72d7d0fe0220' of undefined

and this is the code snippet in index.html:

yaozhihang commented 8 years ago

Hi, i cannot see the code snippet on this page. Could you check your last comment?

shahabshafiee commented 8 years ago

Hi

this is the error:

b3dmlayer.js:510 Uncaught TypeError: Cannot read property 'DEHH_5df9c3a4-2319-473b-9bf8-72d7d0fe0220' of undefined

and this is the code snippet in index.html:

On Fri, Oct 7, 2016 at 3:01 PM, Zhihang Yao notifications@github.com wrote:

Hi, i cannot see the code snippet on this page. Could you check your last comment?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/3dcitydb/3dcitydb-web-map/issues/1#issuecomment-252245909, or mute the thread https://github.com/notifications/unsubscribe-auth/ATz7cNQNdT2yF8xPHrMGfQd10gnlSRH0ks5qxkKcgaJpZM4HMeNz .

Regards, Shahab Shafieihajiabady

yaozhihang commented 8 years ago

I suppose that the KML dataset you use was exported using the Import/Export tool. In this case, you have to use the CityDBKmlLayer class for loading the KML dataset into the 3dcitydb-web-map.

You may also need to take a look at the code example (see the link below) showing how to create a CityDBKmlLayer instance in JavaScript.

https://github.com/3dcitydb/3dcitydb-web-map/blob/master/examples/kmlManhattanExample/index.html#L97

shahabshafiee commented 8 years ago

Dear Zhihang,

As you see in the screenshot, everything is already done. The project is running and all the layers are added. I also changed some fields to fit them to our needs.

The question is:

How can I add colors to the building individually?

When we use CitydbKmlTilingManager.js like this:

if (e._name == "DEHH_9d4c8b35-56b8-4fae-9228-46a2686391d8")

e._children[0]._polygon._material._color._value.blue = 1;

it colors all the buildings in the respective tile

But we want to have access to each building's color separately.

​ Regards, Shahab

On Fri, Oct 7, 2016 at 3:17 PM, Zhihang Yao notifications@github.com wrote:

I suppose that the KML dataset you use was exported using the Import/Export tool. In this case, you have to use the CityDBKmlLayer class for loading the KML dataset into the 3dcitydb-web-map.

You may also need to take a look at the code example (see the link below) showing how to create a CityDBKmlLayer instance in JavaScript.

https://github.com/3dcitydb/3dcitydb-web-map/blob/master/ examples/kmlManhattanExample/index.html#L97

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/3dcitydb/3dcitydb-web-map/issues/1#issuecomment-252249390, or mute the thread https://github.com/notifications/unsubscribe-auth/ATz7cJNo9PL99iChylofAJOKojhp_43wks5qxkZ3gaJpZM4HMeNz .

Regards, Shahab Shafieihajiabady

yaozhihang commented 8 years ago

Dear Shahab,

As i mentioned in my earlier comment, the best way for coloring individual building object is to use the public function highlight in the class CitydbKmlLayer. I also utilized this function to implment the highlighting (Mouseover and Mouseclick) function for the 3D web client. The following link take you to the corresponding code fragment: https://github.com/3dcitydb/3dcitydb-web-map/blob/master/3dwebclient/script.js#L450

regards,

Zhihang

shahabshafiee commented 8 years ago

Hi Zhihang,

This is what I put in index.html:

<script>
     CitydbKmlLayer.prototype.highlight(

{ "DEHH_efd4b191-e991-4372-a0ce-7f16e6fc9748": Cesium.Color.RED, "DEHH_9d4c8b35-56b8-4fae-9228-46a2686391d8": Cesium.Color.YELLOW, "DEHH_1ab21131-6c4f-4af7-8b88-5bbff054ad1b": Cesium.Color.BLUE } );

and this is the error:

CitydbKmlLayer.js:359 Uncaught TypeError: Cannot set property 'DEHH_efd4b191-e991-4372-a0ce-7f16e6fc9748' of undefinedCitydbKmlLayer.highlight @ CitydbKmlLayer.js:359(anonymous function) @ index.html:371

Regards, Shahab

shahabshafiee commented 8 years ago

Hi

I think this part of code has a problem

CitydbKmlLayer.prototype.highlight = function(toHighlight){ for (var id in toHighlight){ this._highlightedObjects[id] = toHighlight[id]; this.highlightObject(this.getObjectById(id)); }
this._highlightedObjects = this._highlightedObjects; }

yaozhihang commented 8 years ago

Dear Shahab,

the web link below maybe helpful for you get a better understanding of using JavaScript's prototype. http://stackoverflow.com/questions/1635116/javascript-class-method-vs-class-prototype-method

regards,

Zhihang

shahabshafiee commented 8 years ago

Dear Zhihang,

Could you please put the code to color only one building with gmlid using toHighlight function? I mean the code snippet that I can use either in index file or script file.

Regards, Shahab