The app uses SketchViewModel to allow users to add new Graphics. Users could choose to use number or letter to represent the new Graphics by choosing the corresponding tool from the top-right toolbar. The following snippet shows how graphics are added to the map.
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// called when sketchViewModel's create-complete event is fired.functionaddGraphic(event) {
if (event.state === "complete") {
const cimSymbol = {
type: "cim",
// get JSON data defining CIMSymbolReferencedata: getCIMSymbolData()
};
graphicsLayer.remove(event.graphic);
const newGraphic = new Graphic({
geometry: event.graphic.geometry,
attributes: {
// used to define the text string in the symboltext: pointType === "number" ? String(numberIndex++) : String.fromCharCode(64 + letterIndex++)
},
symbol: cimSymbol
});
graphicsLayer.add(newGraphic);
sketchViewModel.create("point");
}
}
The CIMSymbol uses a PrimitiveOverride to update the value of the textString property based on the text attribute of the graphic.
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
...
type: "CIMSymbolReference",
primitiveOverrides: [
{
type: "CIMPrimitiveOverride",
// primitiveName must match the primitiveName on the symbol layer or// marker graphic that contains the property you want to overrideprimitiveName: "textGraphic",
propertyName: "TextString", // name of the property to overridevalueExpressionInfo: {
type: "CIMExpressionInfo",
title: "Custom",
expression: "$feature.text",
returnType: "Default" }
}
],
...