Comment ajouter une icône à la carte césium au lieu du point

Question

Je veux ajouter une icône à une carte de césium intead dessinant un point. Actuellement, je fais le code ci-dessous, mais je veux remplacer le point ci-dessous par une icône réelle. J'ai regardé à travers la documentation sur le césium et je ne trouve rien qui puisse le faire. Merci pour toutes les 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 
}); 

Answer 1

Dans le césium, cela s'appelle un panneau d'affichage. Ils sont créés de la même manière qu'un point, sauf que l'image est généralement chargée depuis une 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' 
}); 

Answer 2

Ajout de réponse de @ paraquat sur les panneaux d'affichage: Césium comprend un « Pin Builder » qui peut être utilisé pour faire des icônes de carte typiques comme les panneaux d'affichage. Here's a demo.

var viewer = new Cesium.Viewer('cesiumContainer'); 

var pinBuilder = new Cesium.PinBuilder(); 

var url = Cesium.buildModuleUrl('Assets/Textures/maki/grocery.png'); 
var groceryPin = Cesium.when(pinBuilder.fromUrl(url, Cesium.Color.GREEN, 48), function(canvas) { 
    return viewer.entities.add({ 
     name : 'Grocery store', 
     position : Cesium.Cartesian3.fromDegrees(-75.1705217, 39.921786), 
     billboard : { 
      image : canvas.toDataURL(), 
      verticalOrigin : Cesium.VerticalOrigin.BOTTOM 
     } 
    }); 
});