[FingerEyes-Xr for HTML5] 여러 개의 필드 값으로 라벨 문자열 표시하기

예를 들어, 필드 이름이 fieldNm1과 fieldNm2인 2개의 필드값을 조합하여 라벨로 표시 하고자할때에 해당 레이어의 라벨의 포맷터(Formatter)에 Custom Formatter를 만들어 지정해 주면 됩니다. 아래의 코드는 수치지도 레이어에 사용자 정의 포맷터를 지정한 코드 예입니다.

var lyr = lm.layer('layerNm'); // 이름이 layerNm인 레이어에 대해서 ...
if (lyr) {
    var label = lyr.label();

    label.enable(true); //.offsetY(20);
    label.visibility().visibleByScale(true).fromScale(0).toScale(3000);

    // 사용자 정의 포맷터 클래스 정의
    CustomLabelFormatter = Xr.Class({
        name: 'CustomLabelFormatter',
        extend: Xr.label.ProgrammableLabelFormatter,
        requires: [Xr.label.ILabelFormatter],

        construct: function (/* ShapeMapLayer */ layer) {
            this.superclass(layer);
            this._fieldIndex1 = -1;
            this._fieldIndex2 = -1;
        },

        methods: {
            /* string */ value: function (/* ShapeRow */ shapeRow,
                    /* FieldSet */ fieldSet, /* AttributeRow */ attributeRow) {
                if (this._fieldIndex1 == -1) {
                    this._fieldIndex1 = fieldSet.fieldIndex('fieldNm1');
                }

                if (this._fieldIndex2 == -1) {
                    this._fieldIndex2 = fieldSet.fieldIndex('fieldNm2');
                }

                var value1 = attributeRow.valueAsString(this._fieldIndex1);
                var value2 = attributeRow.valueAsString(this._fieldIndex2);

                return value1 + '(' + value2 + 'kW)';
            }
        }
    });

    var formatter = new CustomLabelFormatter(lyr);
    label.formatter(formatter);

    var labelTheme = label.theme();
    labelTheme.symbol().strokeColor('#ffffff').strokeWidth(3).size(10)
        .fontFamily('맑은 고딕').color('#0000ff').weight('600');
}

위의 경우 fieldNm1 필드값이 ‘아궁이’이고 fieldNm2 필드값이 ‘1000’일 경우, ‘아궁이(1000kW)’의 문자열로 라벨이 표시된다.