Возвращает все атрибуты (поля) в векторном слое для PopupTemplate — ArcGIS Javascript

#javascript #angular #arcgis #arcgis-js-api #arcgis-server

#javascript #angular #arcgis #arcgis-js-api #arcgis-server

Вопрос:

Есть ли способ вернуть все атрибуты (поля) в векторном слое для PopupTemplate, не объявляя их все в fieldInfos объекте в Angular?

.ts

 const template = {
        title: "{NAME} in {COUNTY}",
        content: ,
        fieldInfos : fieldInfos
      };
      
              
     const layer = new FeatureLayer({
      url: this.featureLayerUrl,
      visible: true,
      popupTemplate : template
      });
      
      var fieldInfos = layer.map(layer.fields, function(field){
         return {
                "fieldName": field.name,
                "label": field.alias,
                "visible": true

    webmap.add(layer);
    
 

.html

     <!-- Map Div -->
 

Я использую arcgis-js-api версии 4.2.1.
Но когда я использую этот пример, он работает. (Но я хочу задать эти поля динамически.)

 const fields = [{
  name: "NAME",
  alias: "Name",
  type: "string"
    }, {
  name: "County",
  alias: "County",
  type: "string"
}, {
  
const config = {
  fields: fields,
  title: "County land"
}; 
 

Ответ №1:

Если вы просто хотите создать шаблон всплывающего окна по умолчанию (таблицу со всеми полями), то вам просто нужно использовать FeatureLayer функцию createPopupTemplate , она все сделает за вас (ArcGIS JS API — FeatureLayer createPopupTemplate).

Теперь, если вы хотите выполнить дополнительную настройку, вы можете использовать тот же метод или popupUtils метод, который имеет дополнительный параметр.

Вот пример, который я сделал для вас, чтобы показать возможное использование, там все, что я делаю, это меняю alias значения, чтобы сделать его более красивым.

 <!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <title>FeatureLayer field and popup example - 4.21</title>

    <link rel='stylesheet' href='https://js.arcgis.com/4.21/esri/themes/light/main.css' />
    <script src='https://js.arcgis.com/4.21/'></script>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <script>
        require([
            'esri/views/MapView',
            'esri/Map',
            'esri/layers/FeatureLayer',
            'esri/support/popupUtils'
        ], function (MapView, Map, FeatureLayer, popupUtils) {
            const layer1 = new FeatureLayer({
                url: 'https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/USGS_Seismic_Data_v1/FeatureServer/1'
            });
            const layer2 = new FeatureLayer({
                portalItem: {
                    id: "f9e348953b3848ec8b69964d5bceae02"
                }
            });
            const layersToCreateMyPopupTemplate = [layer2, layer1];
            const map = new Map({
                basemap: 'gray-vector',
                layers: layersToCreateMyPopupTemplate
            });

            const view = new MapView({
                map: map,
                container: 'viewDiv',
                center: [-98, 40],
                zoom: 4
            });
            const toNiceName = function(text) {
                if (!text) {
                    return null;
                }
                return text
                    .toLowerCase()
                    .split(/_|__|s/)
                    .join(' ');
            };
            const createMyPopupTemplate = function(layer) {
                console.log(layer.fields); // layer fields
                const config = {
                    fields: layer.fields.map(field => (
                        {
                            name: field.name,
                            type: field.type,
                            alias: toNiceName(field.alias)
                        }
                    )),
                    title: toNiceName(layer.title)
                };
                console.log(config); // config parameter
                return popupUtils.createPopupTemplate(config);
            }
            for (const layer of layersToCreateMyPopupTemplate) {
                view.whenLayerView(layer).then(function (layerView) {
                    const popupTemplate = createMyPopupTemplate(layer)
                    console.log(popupTemplate); // popup template
                    if (!popupTemplate) {
                        console.log("FeatureLayer has no fields.")
                    } else {
                        layer.popupTemplate = popupTemplate;
                    }
                });
            }
        });
    </script>
</head>

<body>
    <div id='viewDiv'></div>
</body>

</html> 

fields Свойство config переменной в примере автоадаптации в качестве экземпляра esri/layers/support/Field, которое отличается тем, что это fieldInfos свойство PopupTemplate имеет тип FieldInfo .

Комментарии:

1. Это здорово!! Но я получаю такого рода ошибки. config не может быть присвоен параметру типа ‘Config’. Типы свойств «поля» несовместимы. Кроме того, у меня есть еще 2 слоя, и я хочу также получить все поля этих слоев, и возможно ли это?

2. Я обновил вопрос. Пожалуйста, взгляните.

3. Я обновил фрагмент и добавил дополнительную информацию, связанную с .. Если вы хотите использовать его для непосредственного размещения в fieldInfos шаблоне всплывающего окна, вам необходимо его адаптировать, по крайней мере, 1) name для fieldName , 2) удалить type , 3) alias для label