czml how to add picture

CesiumJS
1

I'm generating czml file from DB. I don't know how to add image for point point.

For now, i have .czml file like this:

[{
  "id": "document",
  "name": "CZML Position Definitions",
  "version": "1.0"
}, {
  "id": "tocka 1",
  "name": "omm",
  "position": {
    "cartographicDegrees": [16.8407641697991, 46.161752259555, 0]
  },
  "point": {
    "color": {
      "rgba": [255, 255, 255, 255]
    },
    "outlineColor": {
      "rgba": [255, 0, 0, 255]
    },
    "outlineWidth": 4,
    "pixelSize": 20
  }
}, {
  "id": "tocka 2",
  "name": "omm",
  "position": {
    "cartographicDegrees": [16.8387685034003, 46.1582268220325, 0]
  },
  "point": {
    "color": {
      "rgba": [255, 255, 255, 255]
    },
    "outlineColor": {
      "rgba": [255, 0, 0, 255]
    },
    "outlineWidth": 4,
    "pixelSize": 20
  }
}]

How to add .png (picture or icon) which i want?

Thank you in front!

2

Hello,

I’m sorry, but I’m not sure what you’re trying to add a picture to.

Check out our CZML sandcastle demos: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=CZML%20Billboard%20and%20Label.html&label=CZML

That should help you find what you want to do.

Best,

Hannah

3

Hi, Hannah
The demo shows what i want to do, but i don't know how to add different picture (.png) which is located on my computer, or server?

I suppose i should change line 10 in example above ('image' part inside bilbourd) but i don't know how.

Something like this?

"image" : "..//server_name/director_where_apps_folder_is/my_pict.png"

This i didn't found anywhere in: https://github.com/AnalyticalGraphicsInc/czml-writer/wiki/CZML-Guide

4

Solved.

If you want to change billboard picture which is located on your server in 'HOME/Cesium/Apps/' this is how it should be done (example is for one point):

[{
  "id": "document",
  "name": "CZML Position Definitions",
  "version": "1.0"
}, {
  "id": "point 1",
  "billboard": {
    "image": {
      "uri": ["picture.png"]
    },
    "scale": 0.5
  },
  "name": "omm",
  "position": {
    "cartographicDegrees": [27.1459272683337, 56.1688217768268, 0]
  }
}
]