当前位置：网站首页>arcgis for js api(1) 获取featureLayer的所有字段名

arcgis for js api(1) 获取featureLayer的所有字段名

2022-07-27 05:20:00 【LEILEI18A】

目录

0. 前提

1. 解决方法

2. 感谢

0. 前提

        由于search需要，想要搜索任意字段，那么就不能写死搜索字段，因此探索如何获取FeatureLayer图层的所有字段

        由于JavaScript推荐异步，因此.when  .then都是Promise的思路，只能在内部处理，外部由于不同线程，所以不能按照顺序来！！！

        建议：API版本4.18开始！

        系列总览

1. 解决方法

        【1】采用query查询思路

// 引入2个arcgis js的库
// "esri/rest/query",
// "esri/rest/support/Query"

const params = new Query({
    returnGeometry: false, 
    outFields: ["*"],
    where: "1=1" //sql语法，这是查询全部
});

query
.executeQueryJSON("FeatureLayerURL", params) //FeatureLayerURL需要是URL
.then((getResults) => {
    var fields = getResults.fields;
    console.log("测试");
    console.log(fields);  //这就是获取全部的字段array
    console.log("测试");
})
.catch((error) => {
    console.log(error);
});

        【2】采用layer.fields这种属性"."的形式

// 有个缺点，featureLayer必须包含在map里面！！！
featureLayer.when(function () {
    console.log(featureLayer.fields);
});

// 这样获取 是 错误的， 严重错误的；可以获取layers；但是获取不到layer.fields 只能从featureLayer.when获取
mapView.when(function () {
    console.log(mapView.map.layers.items[i].layers.items[j].fields);
    //自己打印mapView.map.layers看看即可
});

       【3】**推荐**采用js+arcgis js关联(联合)的思路；这种思路小白很少知道，大佬们都会用，但是网上很少说！！

// 由于.when .then都是Promise异步，官方样例对Promise<*>的处理思路是“链式调用”，但是限制，不方便；

//定义异步函数   await只能在async异步函数中使用；因此这种操作整个过程需要在async函数中，不过arcgis js支持！

async function getFields(featureLayer){
    // 查看API，queryFeatures函数返回Promise<FeatureSet>，因此可以使用await同步，再调用.fields
    var result = await featureLayer.queryFeatures();
    var fields = result.fields;
    return fields 
}

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

test();//需要不断的这样操作即可！

        整体代码：

<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) {
            // 不是必须的
            esriConfig.apiKey =
                "AAPKb6250197a40e497ea9f47f26cf86afad4D7n1PjA_48vNAZ6UDWAHPZwPgvhXXrbTMgdJnXk5c72F3fgInrvB7PZ4r0Gfoy3";
            // 如果设置了展示的popup，那么缓冲区的popup不展示；如果没有设置默认popup，但是map里面有，同样不展示
            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],  //第2种方法  必须包含；否则可以注释掉
            });
            const view = new MapView({
                container: "viewDiv",
                map: map,
                center: [-118.80543, 34.03000], //Longitude, latitude
                zoom: 13,
                popup: {
                    defaultPopupTemplateEnabled: true,
                },
            });
            // 第2种 图层字段查询方法
            parcelLayer.when(function () {
                console.log("第一次");
                console.log(parcelLayer.fields);
                console.log("第一次");
                var tempFields = parcelLayer.fields.map((w)=>{
                    return w.name;
                });
                console.log(tempFields);

            });
            // 第1种 图层字段查询方法
            const params = new Query({
                returnGeometry: false,
                outFields: ["*"],
                where: "1=1" //sql语法，这是查询全部
            });
            query
            .executeQueryJSON("https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0", params)
            .then((getResults) => {
                console.log("测试");
                console.log(getResults);
                var fields = getResults.fields;
                console.log("测试");
                console.log(fields);
                console.log("测试");
            })
            .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("第二次")
                console.log(parcelLayer.fields);
            });

        });
    </script>
</head>

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

</html>

2. 感谢

        十分感谢“280120168”这个arcgis-js群的帮忙！

原网站

版权声明
本文为[LEILEI18A]所创，转载请带上原文链接，感谢
https://blog.csdn.net/LEILEI18A/article/details/121703938

边栏推荐

猜你喜欢

随机推荐