arcgis api for javascript學習-使用FeatureLayer結合FeatureTable實現查詢並能根據查詢結果將檢視縮放至結果的範圍

Zzzpiu發表於2020-11-28
APIJavaScript

本文主要實現的功能是:
輸入查詢的條件(這裡是模糊查詢)
在這裡插入圖片描述

點選查詢得到查詢結果,並在屬性中顯示屬性(FeatureTable)
在這裡插入圖片描述

主要的思路:
1. 定義FeatureLayer和FeatureTable,FeatureTable中有個屬性zoomToSelection:true可以設定是否根據表和地圖聯動.(點選表中屬性縮放至所選擇的要素)點選圖中的查詢到的結果,表中屬性被選中.
2. 點選按鈕獲取文字框中的查詢條件,並將查詢條件通過myFeatureLayer.setDefinitionExpression(sql)來篩選得到FeatureLayer的結果.
3. 通過FeatureLayer的點選事件實現點選地圖對應表內容被選中.
4. 遍歷篩選得到的FeatureLayer並獲得最大的範圍(union()方法),再通過Map.setExtent(方法縮放到檢視.
5. 通過render渲染查詢的FeatureLayer

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>FeatureTable - related records</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.34/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.34/esri/css/esri.css">
    <script src="https://js.arcgis.com/3.34/"></script>
    <style>
        html, body, #map
        {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script>
        var map;
        require([
            "esri/map",
            "esri/layers/ArcGISDynamicMapServiceLayer",
            "esri/layers/ArcGISTiledMapServiceLayer",
            "esri/layers/FeatureLayer",
            "esri/dijit/FeatureTable",
            "dojo/on",
            "dojo/dom",
            "esri/tasks/query",
            "esri/symbols/SimpleFillSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/renderers/SimpleRenderer",
            "esri/geometry/Extent"
        ], function (
            Map,ArcGISDynamicMapServiceLayer,ArcGISTiledMapServiceLayer,FeatureLayer,FeatureTable,on,dom,Query,SimpleFillSymbol,SimpleLineSymbol,SimpleRenderer,Extent
        ) {
            map = new Map("map",{
                logo: false,
                slider: false,
                zoom: 5
            });
            var layer = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/TestServer/mytile2/MapServer/");
            map.addLayer(layer);
            // 要素圖層
            var myFeatureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/TestServer/mytile2/MapServer/1",{
                mode: FeatureLayer.MODE_ONDEMAND,
                outFields: ["*"],
                visible: true,
                id : "fLayer",
                opacity: 0.7
            });

            // 要素表格
            var myFeatureTable = new FeatureTable({
                featureLayer: myFeatureLayer,
                map: map,
                editable: true,
                syncSelection: true,
                showRelatedRecords: true,
                showAttachments: true,
                // zoomToSelection: true,
                // outfields 顯示要素屬性
                outFields: ["name","Shape_Leng"]
            },"myTable");

            myFeatureTable.startup();

            on(dom.byId("selectBtn"),"click",function (e) {
                // myFeatureTable.startup();
                //移除之前的查詢結果
                map.removeLayer(myFeatureLayer);
                var selectText = dom.byId("selectText").value;
                var sql = "name like '%" + selectText + "%'"; // 注意sql語句格式,錯了就查詢不到
                // console.log(sql);

                myFeatureLayer.setDefinitionExpression(sql);
                var selectionSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                    new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                        new dojo.Color("blue"), 1),
                    new dojo.Color("blue"));

                myFeatureLayer.setSelectionSymbol(selectionSymbol); // 設定要素圖層被選中標誌
                // 監聽要素圖層點選事件,並傳送相應的引數給表格
                // 當地圖中要素被點選選中時,與之相關的屬性記錄也會在要素表格中被選中
                myFeatureLayer.on("click",function (evt) {
                    var idProperty = myFeatureLayer.objectIdField;
                    // console.log(idProperty);
                    var feature, featureId, query;
                    if (evt.graphic && evt.graphic.attributes && evt.graphic.attributes[idProperty]){
                        feature = evt.graphic; //獲取要素
                        //點選地圖上的要素高亮顯示
                        feature.setSymbol(selectionSymbol);
                        map.graphics.add(feature);
                        featureId = feature.attributes[idProperty]; //獲取要素id
                        //例項化查詢
                        query = new Query();
                        query.returnGeometry = true;
                        query.objectIds = [featureId];
                        query.where = "1=1";
                        myFeatureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW);
                    }
                });
                var selExtent = new Extent();
                var query = new Query();
                query.where='1=1';
                query.returnGeometry = true;
                query.outFields = ['name'];
                myFeatureLayer.queryFeatures(query, function (featureSet) {
                    var features = featureSet.features;
                    selExtent = features[0].geometry.getExtent();
                    console.log("selExtent start-->",selExtent);
                    for (var i = 0, len = features.length; i < len; i++) {
                        console.log(i,features[i].geometry.getExtent());
                        selExtent = selExtent.union(features[i].geometry.getExtent());
                    }
                    map.setExtent(selExtent);
                });

                // map.setExtent(selExtent);//為啥這個地方不能訪問selExtent
                //查詢結果進行渲染
                var render = new SimpleRenderer(selectionSymbol);
                myFeatureLayer.setRenderer(render);
                map.addLayer(myFeatureLayer);
                myFeatureTable.refresh();

            });
        });
    </script>
</head>
<body>
<div id="map">
    <input type="text" id="selectText" />
    <input type="button" id="selectBtn" value="查詢" />
</div>
<div id="selectRe" style="z-index: 9999; background-color: pink; width: 500px; height: 200px; position: absolute; bottom: 0;left: 0;">
    <div id="myTable"></div>
</div>
</body>
</html>

相關文章