当前位置：网站首页>ArcGIS for JS API (1) get all field names of FeatureLayer

ArcGIS for JS API (1) get all field names of FeatureLayer

2022-07-27 06:35:00 【LEILEI18A】

Catalog

0. Premise

because search need , Want to search any field , Then you can't write the search field , So explore how to get FeatureLayer All fields of the layer

because JavaScript Recommend asynchronous , therefore .when .then All are Promise The idea of , It can only be handled internally , External due to different threads , So we can't follow the order ！！！

Suggest ：API edition 4.18 Start ！

Series overview

1. resolvent

【1】 use query Query ideas

//  introduce 2 individual arcgis js The library of 
// "esri/rest/query",
// "esri/rest/support/Query"

const params = new Query({
    returnGeometry: false, 
    outFields: ["*"],
    where: "1=1" //sql grammar , This is the query all 
});

query
.executeQueryJSON("FeatureLayerURL", params) //FeatureLayerURL Need to be URL
.then((getResults) => {
    var fields = getResults.fields;
    console.log(" test ");
    console.log(fields);  // This is to get all the fields array
    console.log(" test ");
})
.catch((error) => {
    console.log(error);
});

【2】 use layer.fields This attribute "." In the form of

//  There is a drawback ,featureLayer Must be included in map Inside ！！！
featureLayer.when(function () {
    console.log(featureLayer.fields);
});

//  So get   yes   FALSE ,  Seriously wrong ; Can get layers; But you can't get layer.fields  Only from featureLayer.when obtain 
mapView.when(function () {
    console.log(mapView.map.layers.items[i].layers.items[j].fields);
    // Print yourself mapView.map.layers Just look at it 
});

【3】** recommend ** use js+arcgis js relation ( union ) The idea of ; This kind of thinking little white knows , Big guys can use , But it is seldom said on the Internet ！！

//  because .when .then All are Promise asynchronous , The official example is right Promise<*> The idea is “ call chaining ”, But restrictions , inconvenient ;

// Define asynchronous functions    await Only in async Used in asynchronous functions ; Therefore, the whole process of this operation needs to be in async Function , however arcgis js Support ！

async function getFields(featureLayer){
    //  see API,queryFeatures The function returns Promise<FeatureSet>, So you can use await Sync , Call again .fields
    var result = await featureLayer.queryFeatures();
    var fields = result.fields;
    return fields 
}

async function test(){
    var fields = await getFields();
    console.log(fields);
}

test();// You need to do this constantly ！

The overall code ：

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>ArcGIS API for JavaScript Tutorials: Query a feature layer (spatial)</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">

    <script src="https://js.arcgis.com/4.21/"></script>
    <script>
        require([
            "esri/config",
            "esri/Map",
            "esri/views/MapView",
            "esri/widgets/Sketch",
            "esri/layers/GraphicsLayer",
            "esri/layers/FeatureLayer",
            "esri/layers/GroupLayer",
            "esri/widgets/LayerList",
            "esri/widgets/Expand",
            "esri/rest/query",
            "esri/rest/support/Query"
        ], function (esriConfig, Map, MapView, Sketch, GraphicsLayer, FeatureLayer, GroupLayer, LayerList,
            Expand, query, Query) {
            //  It's not necessary 
            esriConfig.apiKey =
                "AAPKb6250197a40e497ea9f47f26cf86afad4D7n1PjA_48vNAZ6UDWAHPZwPgvhXXrbTMgdJnXk5c72F3fgInrvB7PZ4r0Gfoy3";
            //  If the display is set popup, So buffer popup Don't show ; If the default is not set popup, however map There are , Also do not show 
            const parcelLayer = new FeatureLayer({
                url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0",
                visible: false,
            });
            const map = new Map({
                basemap: "arcgis-topographic", //Basemap layer service
                layers: [parcelLayer],  // The first 2 Methods    Must contain ; Otherwise, you can comment out 
            });
            const view = new MapView({
                container: "viewDiv",
                map: map,
                center: [-118.80543, 34.03000], //Longitude, latitude
                zoom: 13,
                popup: {
                    defaultPopupTemplateEnabled: true,
                },
            });
            //  The first 2 Kind of   Layer field query method 
            parcelLayer.when(function () {
                console.log(" for the first time ");
                console.log(parcelLayer.fields);
                console.log(" for the first time ");
                var tempFields = parcelLayer.fields.map((w)=>{
                    return w.name;
                });
                console.log(tempFields);

            });
            //  The first 1 Kind of   Layer field query method 
            const params = new Query({
                returnGeometry: false,
                outFields: ["*"],
                where: "1=1" //sql grammar , This is the query all 
            });
            query
            .executeQueryJSON("https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0", params)
            .then((getResults) => {
                console.log(" test ");
                console.log(getResults);
                var fields = getResults.fields;
                console.log(" test ");
                console.log(fields);
                console.log(" test ");
            })
            .catch((error) => {
                console.log(error);
            });

            // Add sketch widget
            const graphicsLayerSketch = new GraphicsLayer();
            map.add(graphicsLayerSketch);
            const sketch = new Sketch({
                layer: graphicsLayerSketch,
                view: view,
                creationMode: "update" // Auto-select
            });
            view.ui.add(sketch, "top-right");
            // Add sketch events to listen for and execute query
            sketch.on("update", (event) => {
                // Create
                if (event.state === "start") {
                    queryFeaturelayer(event.graphics[0].geometry);
                }
                if (event.state === "complete") {
                    graphicsLayerSketch.remove(event.graphics[
                        0]); // Clear the graphic when a user clicks off of it or sketches new one
                    // view.graphics.removeAll();
                }
                // Change
                if (event.toolEventInfo && (event.toolEventInfo.type === "scale-stop" || event
                        .toolEventInfo.type === "reshape-stop" || event.toolEventInfo.type ===
                        "move-stop")) {
                    queryFeaturelayer(event.graphics[0].geometry);
                }

            });


            // Reference query layer
            // const parcelLayer = new FeatureLayer({
            //     url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0",
            // });
            function queryFeaturelayer(geometry) {
                const parcelQuery = {
                    spatialRelationship: "intersects", // Relationship operation to apply
                    geometry: geometry, // The sketch feature geometry
                    outFields: ["APN", "UseType", "TaxRateCity", "Roll_LandValue"], // Attributes to return
                    returnGeometry: true
                };
                parcelLayer.queryFeatures(parcelQuery)
                    .then((results) => {
                        console.log("Feature count: " + results.features.length)
                        displayResults(results);
                    }).catch((error) => {
                        console.log(error);
                    });
            }
            // Show features (graphics)    
            function displayResults(results) {
                // Create a blue polygon
                const symbol = {
                    type: "simple-fill",
                    color: [20, 130, 200, 0.5],
                    outline: {
                        color: "white",
                        width: .5
                    },
                };
                const popupTemplate = {
                    title: "Parcel {APN}",
                    content: "Type: {UseType} <br> Land value: {Roll_LandValue} <br> Tax Rate City: {TaxRateCity}"
                };
                // Set symbol and popup
                results.features.map((feature) => {
                    feature.symbol = symbol;
                    feature.popupTemplate = popupTemplate;
                    return feature;
                });
                // Clear display
                view.popup.close();
                view.graphics.removeAll();
                // Add features to graphics layer
                view.graphics.addMany(results.features);
            }

            view.when(function () {
                const layerList = new LayerList({
                    view: view,
                });
                var expandLayer = new Expand({
                    view: view,
                    content: layerList,
                    expandIconClass: "esri-icon-layers",
                });
                view.ui.add(expandLayer, "top-right");

                console.log(" The second time ")
                console.log(parcelLayer.fields);
            });

        });
    </script>
</head>

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

</html>