"cesiumView" - plugin for QGIS

CesiumJS
1

Hello All,

I am the author of a plugin for QGIS named “GEarthView”, that permits to display on GoogleEarth the canvas of QGIS, using a dinamic KML file.

Now, I discovered Cesium, and… I want to do the same using it :slight_smile:

So, I created a “Index.html” file in my localhost web server , containing:

…

and I see the globe, but I need to know the correct CZML syntax to display a polygon. I copied the “Pennsylvania” example, taken from “simple.czml” , but I do not see any polygon :frowning:

Can you help me to understand why ?

Thank you

Roberto

2

OK. Thank you for the NONE answer :slight_smile:

I will use the geojson format, for the moment.

Ciao

Roberto

3

If you can copy/paste the CZML you are trying to use, perhaps we can tell what’s wrong.

4

Hello Scott,

If you can copy/paste the CZML you are trying to use, perhaps we can tell what’s wrong.

Here is my CZML ( I taken from the “simple.czml” example ) :

[
{
“id”:“AreaTarget/Pennsylvania”,
“name”:“Pennsylvania”,
“description”:“\r\n

Pennsylvania, officially the Commonwealth of Pennsylvania, is a U.S. state that is located in the Northeastern and Mid-Atlantic regions of the United States, and the Great Lakes region. The state borders Delaware to the southeast, Maryland to the south, West Virginia to the southwest, Ohio to the west, Lake Erie and Ontario, Canada to the northwest, New York to the north and New Jersey to the east. The Appalachian Mountains run through the middle of the state.\r\nPennsylvania is the 33rd most extensive, the 6th most populous, and the 9th most densely populated of the 50 United States. The state’s four most populous cities are Philadelphia, Pittsburgh, Allentown, and Erie. The state capital is Harrisburg. Pennsylvania has 51 miles (82 km) of coastline along Lake Erie and 57 miles (92 km) of shoreline along the Delaware Estuary. The state is one of the 13 original founding states of the U.S.

”,
“label”:{
“fillColor”:{
“rgba”:[
255,0,0,255
]
},
“font”:“21pt Lucida Console”,
“horizontalOrigin”:“LEFT”,
“outlineColor”:{
“rgba”:[
0,0,0,255
]
},
“outlineWidth”:2,
“scale”:0.5,
“show”:true,
“style”:“FILL_AND_OUTLINE”,
“text”:“Pennsylvania”,
“verticalOrigin”:“CENTER”
},
“point”:{
“color”:{
“rgba”:[
255,0,0,255
]
},
“outlineWidth”:0,
“pixelSize”:5,
“show”:true
},
“polygon”:{
“positions”:{
“cartographicRadians”:[
-1.3522077240237877,0.6932383436059149,0,-1.3630314740519183,0.6933402355423893,0,-1.3671958658568963,0.6933164116349497,0,-1.3680725973741055,0.6933103378544294,0,-1.3756294390644388,0.693299289626768,0,-1.37759145155452,0.693285710886166,0,-1.3857323154905137,0.6932329317993553,0,-1.387204693159873,0.6932497043584019,0,-1.3921642397583167,0.6932764600632868,0,-1.3948369679907713,0.6932740164944832,0,-1.403752356914346,0.6932421638673993,0,-1.4054136839844849,0.6932660224548367,0,-1.4054203339781848,0.6974061187809533,0,-1.40542577948586,0.6985302157572724,0,-1.4054446815793686,0.7009683713811051,0,-1.4054013802466303,0.7051660984836011,0,-1.4054152208071435,0.7064882030988564,0,-1.405374066131245,0.7092531367782914,0,-1.405344517975858,0.7130398911135833,0,-1.4053553041696831,0.7137921630703696,0,-1.4053903506948033,0.717847558527404,0,-1.4053391082894005,0.7241248283511975,0,-1.4054076823049872,0.724226301809922,0,-1.4053853251132624,0.7304339504245932,0,-1.4053495111334156,0.732809309071272,0,-1.3921311340866651,0.7377041737073639,0,-1.3921036273290417,0.7330926289989202,0,-1.3894979895551738,0.7330486468055195,0,-1.3798484450375388,0.7330586305001696,0,-1.3773883852209647,0.7330357493325297,0,-1.3666816595180005,0.7330283146713379,0,-1.3649219132838528,0.7330070217223114,0,-1.3569064163205986,0.7329918900387238,0,-1.354599770992057,0.7330180002614316,0,-1.3433550648083268,0.7330904667885002,0,-1.342653826195758,0.7330826651925256,0,-1.3362924480939438,0.7330909906599572,0,-1.328981348766283,0.7330498535192947,0,-1.3282799705255588,0.7330296775356948,0,-1.317369878937513,0.7329750316713255,0,-1.3156783227347815,0.7330097463386135,0,-1.3150298279817356,0.7329135612488367,0,-1.314652993784966,0.7323625607125478,0,-1.3139482994025766,0.7321239392772451,0,-1.313439099339346,0.7307498413128194,0,-1.3119864438784967,0.730731794657347,0,-1.3115849481938966,0.7305214824566543,0,-1.3111742895338896,0.7304061685456499,0,-1.3110525702187852,0.7301933081536464,0,-1.3103904967805342,0.7297947098063845,0,-1.3106869061243591,0.7294990335104291,0,-1.3106926482391603,0.7291819769374323,0,-1.31006717438301,0.7290287195687776,0,-1.3099912873941209,0.7282685936295457,0,-1.3101384361377446,0.7280613880956304,0,-1.3098927634269164,0.7267083737010938,0,-1.3102614817770415,0.7262854105154587,0,-1.3102163475385047,0.7261352772658493,0,-1.3094348237109952,0.7254602361685523,0,-1.3092568000409661,0.7250021744241752,0,-1.308504580282513,0.7240255927322389,0,-1.3078199921164888,0.72403864782177,0,-1.3072264926882589,0.7236467166299556,0,-1.307169245851595,0.7233461185166344,0,-1.3066244760589671,0.7233894550695429,0,-1.3053806318405998,0.7230886126517037,0,-1.304717877749918,0.7230926094796837,0,-1.3044598132746381,0.7229514646847072,0,-1.304466742212013,0.7225949985688139,0,-1.3038530144070728,0.7221311597980974,0,-1.3037620652441313,0.7217037983975161,0,-1.3053608047669052,0.7210299440396993,0,-1.3054040889283545,0.7207376013315654,0,-1.3059460661823945,0.7205192954872712,0,-1.3066654038056376,0.7195438482063814,0,-1.3066038809082192,0.7191939794384397,0,-1.307509392852277,0.7180478912764205,0,-1.3081242027013054,0.7175373648956472,0,-1.308728104256843,0.717319652461049,0,-1.3088029439804343,0.7170121428373868,0,-1.3084086390699141,0.7170281126169686,0,-1.3090170610213867,0.7166757130974598,0,-1.3096123057176687,0.7160773791853247,0,-1.3102183365700435,0.7157721733780154,0,-1.3110323583836496,0.7155894722475611,0,-1.3114282515208273,0.715192915896617,0,-1.3113623303982265,0.7149382548578634,0,-1.3103886282856712,0.7138982478932651,0,-1.3102830183588716,0.7135714872902171,0,-1.3099828739776964,0.7133519073843598,0,-1.3099502537461944,0.7130661620241878,0,-1.3107343082404708,0.71278013738274,0,-1.3105539981986583,0.7124678106579555,0,-1.3107517440349952,0.7119489067090039,0,-1.31127146832641,0.711618131825877,0,-1.311969495533574,0.7116548186295764,0,-1.3123766984036227,0.7111869655638845,0,-1.312273898452243,0.7107655382832366,0,-1.3125810939125313,0.7101058734983065,0,-1.3122094259121033,0.7098219258392405,0,-1.3126432625232558,0.7094893707227551,0,-1.312451642745932,0.7092008153872138,0,-1.3124943858525955,0.7088611393395713,0,-1.3123744118489564,0.7083205235010411,0,-1.3124452547722973,0.708092164574061,0,-1.3121783938297178,0.7078498255687451,0,-1.311170361152473,0.7079894345182887,0,-1.3103895005747963,0.707650107564989,0,-1.3101083802768658,0.7072250674577409,0,-1.3102207619963784,0.7060949839922579,0,-1.309999715938635,0.7054652167207774,0,-1.3093681334206897,0.7051362570197143,0,-1.3090052619072645,0.705263631186341,0,-1.3085229574630952,0.7051907985987479,0,-1.3081275878407266,0.704161490481042,0,-1.3078189262517947,0.7039573043817338,0,-1.3076207789382897,0.7036127588721909,0,-1.3069140774300372,0.7033606983954779,0,-1.3062526671932404,0.7024681543136311,0,-1.3044385887704104,0.701233735108179,0,-1.3042056919320535,0.7007377298965646,0,-1.304568964853792,0.7003023050552322,0,-1.3060128412908008,0.7001592403389345,0,-1.3067616226475691,0.699494182468726,0,-1.3082325342309757,0.6991443834599382,0,-1.3087087299920748,0.6987265340836812,0,-1.3097941505737305,0.698265086353168,0,-1.310184580829599,0.6978768726763835,0,-1.3104732932768435,0.6977082912802286,0,-1.3109336414681285,0.6977250115221181,0,-1.3114380592151826,0.6973624890931379,0,-1.3115653635501037,0.6969928457322186,0,-1.3113672162189656,0.6963321861243438,0,-1.311491064806832,0.6960654124902647,0,-1.3122363904438565,0.6959921609813949,0,-1.313307848385792,0.6955209219518895,0,-1.3134255708764333,0.69543595930277,0,-1.3150346253356304,0.6954879526165308,0,-1.316335524310828,0.6946234384593984,0,-1.3171997767525299,0.6951045210815227,0,-1.319179975605344,0.6953413971468251,0,-1.3202367902547627,0.695309754284478,0,-1.3211230163524166,0.694998230372876,0,-1.3220100103668133,0.6942036166803666,0,-1.322522002814063,0.6933243719682792,0,-1.3228041702830704,0.6933123989973828,0,-1.3288801694793237,0.6932838277389112,0,-1.330519016712254,0.693277265241703,0,-1.3363957516005893,0.6932495491982945,0,-1.3402469439857425,0.6932668452760358,0,-1.3438479258876066,0.6932604746923505,0,-1.347761635982283,0.6932567744504896,0,-1.3520094545588786,0.6932461975964622,0,-1.3522077240237877,0.6932383436059149,0
]
},
“material”:{
“solidColor”:{
“color”:{
“rgba”:[
255,0,0,77
]
}
}
},
“fill”:false,
“outline”:true,
“outlineColor”:{
“rgba”:[
255,0,0,255
]
}
},
“position”:{
“cartesian”:[
1152255.80150063,-4694317.951340558,4147335.9067563135
]
}
}
]

BTW, I only need of the CZML essential syntax for a polygon, for the moment.

Thank you for any help :slight_smile:

Roberto

5

I tested with that CZML and the polygon displays correctly. Here’s a Sandcastle example you can paste into

http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Hello%20World.html&label=Showcases

var viewer = new Cesium.Viewer(‘cesiumContainer’);

viewer.extend(Cesium.viewerEntityMixin);

var builtInCzml = [{

“id” : “document”,

“version” : “1.0”

}, {

“id”:“AreaTarget/Pennsylvania”,

“name”:“Pennsylvania”,

“description”:"\r\n

Pennsylvania, officially the Commonwealth of Pennsylvania, is a U.S. state that is located in the Northeastern and Mid-Atlantic regions of the United States, and the Great Lakes region. The state borders Delaware to the southeast, Maryland to the south, West Virginia to the southwest, Ohio to the west, Lake Erie and Ontario, Canada to the northwest, New York to the north and New Jersey to the east. The Appalachian Mountains run through the middle of the state.\r\nPennsylvania is the 33rd most extensive, the 6th most populous, and the 9th most densely populated of the 50 United States. The state’s four most populous cities are Philadelphia, Pittsburgh, Allentown, and Erie. The state capital is Harrisburg. Pennsylvania has 51 miles (82 km) of coastline along Lake Erie and 57 miles (92 km) of shoreline along the Delaware Estuary. The state is one of the 13 original founding states of the U.S.

",

“label”:{

“fillColor”:{

“rgba”:[

255,0,0,255

]

},

“font”:“21pt Lucida Console”,

“horizontalOrigin”:“LEFT”,

“outlineColor”:{

“rgba”:[

0,0,0,255

]

},

“outlineWidth”:2,

“scale”:0.5,

“show”:true,

“style”:“FILL_AND_OUTLINE”,

“text”:“Pennsylvania”,

“verticalOrigin”:“CENTER”

},

“point”:{

“color”:{

“rgba”:[

255,0,0,255

]

},

“outlineWidth”:0,

“pixelSize”:5,

“show”:true

},

“polygon”:{

“positions”:{

“cartographicRadians”:[

-1.3522077240237877,0.6932383436059149,0,-1.3630314740519183,0.6933402355423893,0,-1.3671958658568963,0.6933164116349497,0,-1.3680725973741055,0.6933103378544294,0,-1.3756294390644388,0.693299289626768,0,-1.37759145155452,0.693285710886166,0,-1.3857323154905137,0.6932329317993553,0,-1.387204693159873,0.6932497043584019,0,-1.3921642397583167,0.6932764600632868,0,-1.3948369679907713,0.6932740164944832,0,-1.403752356914346,0.6932421638673993,0,-1.4054136839844849,0.6932660224548367,0,-1.4054203339781848,0.6974061187809533,0,-1.40542577948586,0.6985302157572724,0,-1.4054446815793686,0.7009683713811051,0,-1.4054013802466303,0.7051660984836011,0,-1.4054152208071435,0.7064882030988564,0,-1.405374066131245,0.7092531367782914,0,-1.405344517975858,0.7130398911135833,0,-1.4053553041696831,0.7137921630703696,0,-1.4053903506948033,0.717847558527404,0,-1.4053391082894005,0.7241248283511975,0,-1.4054076823049872,0.724226301809922,0,-1.4053853251132624,0.7304339504245932,0,-1.4053495111334156,0.732809309071272,0,-1.3921311340866651,0.7377041737073639,0,-1.3921036273290417,0.7330926289989202,0,-1.3894979895551738,0.7330486468055195,0,-1.3798484450375388,0.7330586305001696,0,-1.3773883852209647,0.7330357493325297,0,-1.3666816595180005,0.7330283146713379,0,-1.3649219132838528,0.7330070217223114,0,-1.3569064163205986,0.7329918900387238,0,-1.354599770992057,0.7330180002614316,0,-1.3433550648083268,0.7330904667885002,0,-1.342653826195758,0.7330826651925256,0,-1.3362924480939438,0.7330909906599572,0,-1.328981348766283,0.7330498535192947,0,-1.3282799705255588,0.7330296775356948,0,-1.317369878937513,0.7329750316713255,0,-1.3156783227347815,0.7330097463386135,0,-1.3150298279817356,0.7329135612488367,0,-1.314652993784966,0.7323625607125478,0,-1.3139482994025766,0.7321239392772451,0,-1.313439099339346,0.7307498413128194,0,-1.3119864438784967,0.730731794657347,0,-1.3115849481938966,0.7305214824566543,0,-1.3111742895338896,0.7304061685456499,0,-1.3110525702187852,0.7301933081536464,0,-1.3103904967805342,0.7297947098063845,0,-1.3106869061243591,0.7294990335104291,0,-1.3106926482391603,0.7291819769374323,0,-1.31006717438301,0.7290287195687776,0,-1.3099912873941209,0.7282685936295457,0,-1.3101384361377446,0.7280613880956304,0,-1.3098927634269164,0.7267083737010938,0,-1.3102614817770415,0.7262854105154587,0,-1.3102163475385047,0.7261352772658493,0,-1.3094348237109952,0.7254602361685523,0,-1.3092568000409661,0.7250021744241752,0,-1.308504580282513,0.7240255927322389,0,-1.3078199921164888,0.72403864782177,0,-1.3072264926882589,0.7236467166299556,0,-1.307169245851595,0.7233461185166344,0,-1.3066244760589671,0.7233894550695429,0,-1.3053806318405998,0.7230886126517037,0,-1.304717877749918,0.7230926094796837,0,-1.3044598132746381,0.7229514646847072,0,-1.304466742212013,0.7225949985688139,0,-1.3038530144070728,0.7221311597980974,0,-1.3037620652441313,0.7217037983975161,0,-1.3053608047669052,0.7210299440396993,0,-1.3054040889283545,0.7207376013315654,0,-1.3059460661823945,0.7205192954872712,0,-1.3066654038056376,0.7195438482063814,0,-1.3066038809082192,0.7191939794384397,0,-1.307509392852277,0.7180478912764205,0,-1.3081242027013054,0.7175373648956472,0,-1.308728104256843,0.717319652461049,0,-1.3088029439804343,0.7170121428373868,0,-1.3084086390699141,0.7170281126169686,0,-1.3090170610213867,0.7166757130974598,0,-1.3096123057176687,0.7160773791853247,0,-1.3102183365700435,0.7157721733780154,0,-1.3110323583836496,0.7155894722475611,0,-1.3114282515208273,0.715192915896617,0,-1.3113623303982265,0.7149382548578634,0,-1.3103886282856712,0.7138982478932651,0,-1.3102830183588716,0.7135714872902171,0,-1.3099828739776964,0.7133519073843598,0,-1.3099502537461944,0.7130661620241878,0,-1.3107343082404708,0.71278013738274,0,-1.3105539981986583,0.7124678106579555,0,-1.3107517440349952,0.7119489067090039,0,-1.31127146832641,0.711618131825877,0,-1.311969495533574,0.7116548186295764,0,-1.3123766984036227,0.7111869655638845,0,-1.312273898452243,0.7107655382832366,0,-1.3125810939125313,0.7101058734983065,0,-1.3122094259121033,0.7098219258392405,0,-1.3126432625232558,0.7094893707227551,0,-1.312451642745932,0.7092008153872138,0,-1.3124943858525955,0.7088611393395713,0,-1.3123744118489564,0.7083205235010411,0,-1.3124452547722973,0.708092164574061,0,-1.3121783938297178,0.7078498255687451,0,-1.311170361152473,0.7079894345182887,0,-1.3103895005747963,0.707650107564989,0,-1.3101083802768658,0.7072250674577409,0,-1.3102207619963784,0.7060949839922579,0,-1.309999715938635,0.7054652167207774,0,-1.3093681334206897,0.7051362570197143,0,-1.3090052619072645,0.705263631186341,0,-1.3085229574630952,0.7051907985987479,0,-1.3081275878407266,0.704161490481042,0,-1.3078189262517947,0.7039573043817338,0,-1.3076207789382897,0.7036127588721909,0,-1.3069140774300372,0.7033606983954779,0,-1.3062526671932404,0.7024681543136311,0,-1.3044385887704104,0.701233735108179,0,-1.3042056919320535,0.7007377298965646,0,-1.304568964853792,0.7003023050552322,0,-1.3060128412908008,0.7001592403389345,0,-1.3067616226475691,0.699494182468726,0,-1.3082325342309757,0.6991443834599382,0,-1.3087087299920748,0.6987265340836812,0,-1.3097941505737305,0.698265086353168,0,-1.310184580829599,0.6978768726763835,0,-1.3104732932768435,0.6977082912802286,0,-1.3109336414681285,0.6977250115221181,0,-1.3114380592151826,0.6973624890931379,0,-1.3115653635501037,0.6969928457322186,0,-1.3113672162189656,0.6963321861243438,0,-1.311491064806832,0.6960654124902647,0,-1.3122363904438565,0.6959921609813949,0,-1.313307848385792,0.6955209219518895,0,-1.3134255708764333,0.69543595930277,0,-1.3150346253356304,0.6954879526165308,0,-1.316335524310828,0.6946234384593984,0,-1.3171997767525299,0.6951045210815227,0,-1.319179975605344,0.6953413971468251,0,-1.3202367902547627,0.695309754284478,0,-1.3211230163524166,0.694998230372876,0,-1.3220100103668133,0.6942036166803666,0,-1.322522002814063,0.6933243719682792,0,-1.3228041702830704,0.6933123989973828,0,-1.3288801694793237,0.6932838277389112,0,-1.330519016712254,0.693277265241703,0,-1.3363957516005893,0.6932495491982945,0,-1.3402469439857425,0.6932668452760358,0,-1.3438479258876066,0.6932604746923505,0,-1.347761635982283,0.6932567744504896,0,-1.3520094545588786,0.6932461975964622,0,-1.3522077240237877,0.6932383436059149,0

]

},

“material”:{

“solidColor”:{

“color”:{

“rgba”:[

255,0,0,77

]

}

}

},

“fill”:false,

“outline”:true,

“outlineColor”:{

“rgba”:[

255,0,0,255

]

}

},

“position”:{

“cartesian”:[

1152255.80150063,-4694317.951340558,4147335.9067563135

]

}

}

];

var czmlDataSource = new Cesium.CzmlDataSource();

czmlDataSource.load(builtInCzml, ‘Built-in CZML’);

viewer.dataSources.add(czmlDataSource);

6

Thank you Scott,

finally, with your help, I discovered what was missing in my CZML, that are the “[” and “]” at beginning and end of file.

The bad new, in my case, is that I just written the source code to export my elements in geoJSON format … :frowning:

BTW, I will re-start using CZML :slight_smile:

Roberto

7

Hello,

I created a github project where I share the source code of my QGIS plugin named “cesium”.

https://github.com/geodrinx/cesium

It will be inserted as a new function inside my other QGIS plugin “GEarthView” .

Regards

Roberto Angeletti

8

Hi Roberto,

Thanks for sharing. Do you have any screenshots?

How far along is this project? Are you interested in us showcasing it on the Cesium website: http://cesiumjs.org/demos.html

Thanks,

Patrick

9

Hi Patrick,

Thanks for sharing. Do you have any screenshots?

At the following link I will share my CaptureScreen:

For the moment, they are only two.

I have a question for you: what is the status of KML parser ?
it would greatly simplify my development :slight_smile:

Other question: do have QGIS installed ?

Roberto

10

Hi Roberto,

Thanks for sharing. I do not have QGIS installed.

We are working on KML in Cesium. There are two github issues to watch:

  • One for the low-level graphics support (not the loader itself): #2179
  • And another for the loader: #873 (I think there is more done in the branch that the issue shows)

Patrick

11

So, I can write a KML and send it to Cesium ?

There is a network version that I can use to experiment ?

Roberto

12

So, I can write a KML and send it to Cesium ?

Yes. Depending on what KML features you need, it might already work.

There is a network version that I can use to experiment ?

Not yet, but we plan to do this before releasing official support. In the meantime, you can pull Cesium from github, checkout the kml branch, and drag and drop a KML file onto Cesium Viewer.

The Contributor’s Guide has info on building Cesium: https://github.com/AnalyticalGraphicsInc/cesium/wiki/Contributor%27s-Guide#buildthecode

Patrick

13

Patrick,

I taken cesium kml branch from github, I built with ant, and I tried to drag a KML file into viewer, and IT WORKS !

:slight_smile:

Wonderful ! Soon I release a GEarthView plugin with a CesiumView function !

Roberto

14

Excellent! Let us know when it is released and we’ll help spread the word.

Patrick

15

Patrick,

only a short question:

What is the syntax to load a KML from index.html ? In case of czml I used:

And for KML ?

Thank you for any info

Roberto

16

Just replace Cesium.CzmlDataSource with Cesium.KmlDataSource.

To use fewer lines of code, also check out KmlDataSource.fromUrl.

Patrick

17

Just replace Cesium.CzmlDataSource with Cesium.KmlDataSource.

something like this, I imagine:

Right ? BTW, probably the path for my “KML.kml” is wrong, because I see nothing :frowning:

It must be relative to my “Index.html”, true ?

To use fewer lines of code, also check out KmlDataSource.fromUrl.

In this case is sufficient :

True ?

And to zoom directly to KML there is a function to call ? In GEarth it happens automatically after loading.

Thank you for the info

Roberto

18

Patrick,

I discovered that is not (probably) the KML path, the problem.

Now I have this source in my Index.html

Cesium Viewer

And I have this error (taken by )

ReferenceError: Cesium is not defined

http://localhost:8080/Apps/CesiumViewer/index.html

Line 25

that is:

var viewer = new Cesium.Viewer(‘cesiumContainer’);

Sure, I miss something. Who knows what ?

:slight_smile:

Roberto

19

Roberto,

Most likely Cesium is not defined because it is not finding Cesium.js. Instead of using the HTML you have shown, try building from the simple Hello World example:

http://cesiumjs.org/2013/04/12/Cesium-up-and-running/

Patrick

20

Hello Patrick,

there is a close release date for cesium-kml ?

Thank you

Roberto