arcgis api for javascript学习-使用FeatureLayer结合FeatureTable实现查询并能根据查询结果将视图缩放至结果的范围

最新推荐文章于 2024-04-17 03:34:43 发布

blog12138

最新推荐文章于 2024-04-17 03:34:43 发布

阅读量1k

点赞数 1

分类专栏： arcgis for js 3.x学习笔记文章标签： arcgisorjs

本文链接：https://blog.csdn.net/Zzzpiu/article/details/110138565

版权

arcgis for js 3.x学习笔记专栏收录该内容

30 篇文章 7 订阅

订阅专栏

本文主要实现的功能是:
输入查询的条件(这里是模糊查询)
在这里插入图片描述

点击查询得到查询结果,并在属性中显示属性(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>