在没有地图的情况下使用 JavaScript 为 ArcGIS popupInfo 生成 html

Question

在 ArcGIS JS API 4.8 中，是否可以使用 PopupTemplate、PopupViewModel 或类似工具并从图层中手动添加 popupInfo 以及所需的功能并生成原始 HTML 以供在地图外使用？

我们有一个应用程序，我们使用 layer.popupInfo.description 并手动填充属性来生成我们的 HTML，但我们想更进一步，并应用层下可用的丰富格式。 popupInfo.fieldInfos[].format.

也许在 JS API 的某个地方有一个公开的方法，它允许我们手动将 fieldInfos 应用到一个属性值以实现结果？

我搜索了ArcGIS API for JavaScript docs，但没有发现任何明显的东西可以用来完成此操作。

Answer 1

事实证明，esri/widgets/Feature 类正是我所需要的。

下面是一些在 AngularJS 上下文中使用它的示例代码：

function onLayerChanged(layer, esri) {
    var fieldInfos;
    if (layer.popupInfo) {
        fieldInfos = _.map(layer.popupInfo.fieldInfos,
            function (fieldInfo) {
                if (fieldInfo.format && fieldInfo.format.dateFormat) {
                    // Transform any old dateFormat values to new equivalent e.g. "dayShortMonthYear" becomes "day-short-month-year"
                    fieldInfo.format.dateFormat = getDateFormat(fieldInfo.format.dateFormat);
                }

                return fieldInfo;
            });
    }

    _graphic = new esri.Graphic({ // esri/Graphic
        popupTemplate: {
            content: layer.popupInfo ? layer.popupInfo.description : '',
            fieldInfos: fieldInfos
        }
    });
}

function onFeaturesChanged(features, esri) {
    _this.parsedFeatures.length = 0;

    _this.parsedFeatures = _.map(features,
        function (feature) {
            var div = document.createElement('div');

            _graphic.attributes = feature.attributes;

            var featureWidget = new esri.Feature({ // esri/widgets/Feature
                graphic: _graphic,
                container: div
            });
            featureWidget.renderNow();

            return {
                id: feature.uid,
                html: div.outerHTML
            };
        });
}

function getDateFormat(dateFormat) {
    // Swap any older style dateFormats for newer version
    switch (dateFormat) {
        case 'shortDate':
            return 'short-date';
            break;
        case 'shortDateLE':
            return 'short-date-le';
            break;
        case 'longMonthDayYear':
            return 'long-month-day-year';
            break;
        case 'dayShortMonthYear':
            return 'day-short-month-year';
            break;
        case 'longDate':
            return 'long-date';
            break;
        case 'shortDateLongTime':
            return 'short-date-long-time';
            break;
        case 'shortDateLELongTime':
            return 'short-date-le-long-time';
            break;
        case 'shortDateShortTime':
            return 'short-date-short-time';
            break;
        case 'shortDateLEShortTime':
            return 'short-date-le-short-time';
            break;
        case 'shortDateShortTime24':
            return 'short-date-short-time-24';
            break;
        case 'shortDateLEShortTime24':
            return 'short-date-le-short-time-24';
            break;
        case 'shortDateShortTime24':
            return 'short-date-short-time-24';
            break;
        case 'shortDateLEShortTime24':
            return 'short-date-le-short-time-24';
            break;
        case 'longMonthYear':
            return 'long-month-year';
            break;
        case 'shortMonthYear':
            return 'short-month-year';
            break;
        case 'year':
            return 'year';
            break;
        default:
            return dateFormat;
    }
}

在代码示例中，我为每个功能生成 html 并将其存储在 _this.parsedFeatures 中。