Search code examples
javascripthtmlcesiumjs

How to add a icon to cesium map instead of point


I want to add icon to a cesium map intead drawing a point. Currently I doing the below code, but want to replace the point below with an actual icon. I have been looking through the cesium documentation and cannot find anything that will do this. Thanks for any suggestions

var points = scene.primitives.add(new Cesium.PointPrimitiveCollection());

points.add({
    position : new Cesium.Cartesian3.fromDegrees(longitude, latitude),
    color : colorDot,
    outlineColor : Cesium.Color.WHITE,
    outlineWidth : width
});

Solution

  • In Cesium, this is called a billboard. They are created in basically the same way as a point, except the image is generally loaded from a URL.

    https://cesiumjs.org/Cesium/Build/Documentation/BillboardCollection.html

    // Create a billboard collection with two billboards
    var billboards = scene.primitives.add(new Cesium.BillboardCollection());
    billboards.add({
      position : new Cesium.Cartesian3(1.0, 2.0, 3.0),
      image : 'url/to/image'
    });
    billboards.add({
      position : new Cesium.Cartesian3(4.0, 5.0, 6.0),
      image : 'url/to/another/image'
    });