The Symbology Encoding specification doesn’t distinguish between selected and non-selected styling. If you want the styling of objects to change when a user selects them, you must add selection behavior to a painter.

To add selection behavior, pass the painter generated by the SEPainterFactory to the addSelection function from the FeaturePainterUtil module. See the reference documentation for more information.

If that utility function doesn’t suit your needs, you can wrap the generated painter in a painter that implements more complex selection behavior.

The example shows a SelectionPainter that uses the state.selected flag to delegate styling to an appropriate painter. It configures the painter with two Symbology Encoding painters, one for regular styling, and one for selection styling.

Program: Delegating selection styling to another painter
//Error handling has been left out of this snippet

//2 delegate painters: one for regular mode, one for selected mopdel
let regularPainter: FeaturePainter;
let selectionPainter: FeaturePainter;

//Combine them in a single painter, which uses the paint state to determine to which painter to delegate
const combinedPainter = new FeaturePainter();
combinedPainter.paintBody = function(geoCanvas, feature, shape, layer, map, paintState) {
  // delegate to another painter if the object is selected.
  if (paintState.selected) {
    selectionPainter.paintBody(geoCanvas, feature, shape, layer, map, paintState);
  } else {
    regularPainter.paintBody(geoCanvas, feature, shape, layer, map, paintState);
  }
};

//Create the 2 delegate painters by loading the corresponding SLD files
createPainterFromURL("NormalStyle.xml").then(function(painter) {
  regularPainter = painter;
  tryToAddLayer();
});
createPainterFromURL("SelectedStyle.xml").then(function(painter) {
  selectionPainter = painter;
  tryToAddLayer();
});

// Adds the layer with the selection to the layer if both delegates
// are configured
function tryToAddLayer() {
  if (regularPainter && selectionPainter) {
    map.layerTree.addChild(new FeatureLayer(model, {
      painter: combinedPainter
    }));
  }
}