Question

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

我们有一个应用程序，其中我们使用layer.popupInfo.description并手动填充属性以生成我们的HTML，但是我们想更进一步，还应用在layer下可用的丰富格式。 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中。

使用没有地图的JavaScript为ArcGIS popupInfo生成HTML

1 个答案: