3D callout line doesn't work with client-side graphics

Question

I am struggling to use callout line with client-side graphics.

I followed the "Point styles for cities" example which uses a feature layer from the "LyonPointsOfInterest (FeatureServer)" .

But it doesn't work with a feature layer which creates client-side graphics based on data returned from a web service.

Is there a limitation on 3d callout line?

Here's my code snippet:

1. Create a feature layer based on layer definition:

    featureLayer = new FeatureLayer({ fields: this.layerDefinition.fields, objectIdField: this.layerDefinition.objectIdField, geometryType: this.layerDefinition.geometryType, id: this.layerId }); 

2. Set elevation and feature reduction and renderer:

    featureLayer.elevationInfo = { // elevation mode that will place points on top of the buildings or other SceneLayer 3D objects mode: "relative-to-scene" }; // feature reduction is set to selection because our scene contains too many points and they overlap featureLayer.featureReduction = { type: "selection" }; featureLayer.renderer = this._getUniqueValueRenderer() as any as Renderer// callout render 

3. Here the renderer code:

    _getUniqueValueRenderer() { let verticalOffset = { // verticalOffset shifts the symbol vertically screenLength: 150, // callout line length maxWorldLength: 200, minWorldLength: 35 }, uniqueValueRenderer = { type: "unique-value", // autocasts as new UniqueValueRenderer() field: "AQHI", uniqueValueInfos: [{ value: 1, symbol: this._get3DCallOutSymbol(verticalOffset, "Museum.png", "#D13470") }, { value: 2, symbol: this._get3DCallOutSymbol(verticalOffset, "Restaurant.png", "#F97C5A") }, { value: 3, symbol: this._get3DCallOutSymbol(verticalOffset, "Church.png", "#884614") }, { value: 4, symbol: this._get3DCallOutSymbol(verticalOffset, "Hotel.png", "#56B2D6") }, { value: 5, symbol: this._get3DCallOutSymbol(verticalOffset, "Park.png", "#40C2B4") }, { value: 6, symbol: this._get3DCallOutSymbol(verticalOffset, "Museum.png", "#D13470") }, { value: 7, symbol: this._get3DCallOutSymbol(verticalOffset, "beer.png", "#F97C5A") }, { value: 8, symbol: this._get3DCallOutSymbol(verticalOffset, "senate.png", "#884614") }, { value: 9, symbol: this._get3DCallOutSymbol(verticalOffset, "Hotel.png", "#56B2D6") }, { value: 10, symbol: this._get3DCallOutSymbol(verticalOffset, "Park.png", "#40C2B4") } ]}; return uniqueValueRenderer; } _get3DCallOutSymbol(verticalOffset: any, iconName: string, color: string) { return { type: "point-3d", // autocasts as new PointSymbol3D() symbolLayers: [{ type: "icon", // autocasts as new IconSymbol3DLayer() resource: { href: this.iconPath + iconName }, size: 20, outline: { color: "white", size: 2 } }], verticalOffset: verticalOffset, callout: { type: "line", // autocasts as new LineCallout3D() color: "white", size: 2, border: { color: color } } }; } 

4. Set source to an array of graphics, generated based web service data

    featureLayer.source = graphics; 

Answer 1

You should not use this.layerDefinition in the instanciation a your new FeatureLayer, but put it in a new var. Idem for this.layerId :

var layerDef = this.layerDefinition;
var lyrId = this.layerId;
featureLayer = new FeatureLayer({
  fields: layerDef.fields,
  objectIdField: layerDef.objectIdField,
  geometryType: layerDef.geometryType,
  id: lyrId
});

because this. at this place, is in the scope of new Feature()