ArcGIS API for JavaScript 通过identifyTask实现点击选择要素

小鱼儿 2021-09-14 09:30 419阅读 0赞

### 需求 ###

在浏览器界面中，在浏览器画定范围，使其高亮显示，查询当前空间中的要素。

### 思路 ###

先利用identifyTask根据自己画的要素实现图层查询，将选中的要素以自己实例化的符号显示出来

### 效果截图 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70]

### 实现代码 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
        <link rel="stylesheet" type="text/css" href="http://10.10.70.85:6090/arcgis_js_api/library/3.25/3.25/esri/css/esri.css" />
        <script type="text/javascript" src="http://10.10.70.85:6090/arcgis_js_api/library/3.25/3.25/init.js"></script>
        <style>
            *{
                padding: 0px;
                margin:0px;
            }
            table{
                margin-top: 10px;
                border-collapse: collapse;
                overflow-y: scroll;
            }
            th,td{
                padding: 0px;
                border:1px solid #000;
            }
        </style>
    </head>
    <body>
        <div id="mapDiv" style="width:calc(100% - 2px); height:800px; border:1px solid #000;"></div>
        <input id="btn" type="button" value="选择">
        <table >
            <thead>
                <tr>
                    <th width="100px">名称</th>
                    <th width="100px">类型</th>
                    <th width="100px">面积</th>
                </tr>
            </thead>
            <tbody id="infoBody">
            </tbody>
        </table>
        <script>
        require(["esri/map",
                "dojo/query",
                "dojo/dom",
                "dojo/on",
                "esri/toolbars/draw",
                "esri/layers/ArcGISDynamicMapServiceLayer",
                "esri/tasks/IdentifyTask",
                "esri/tasks/IdentifyParameters",
                "esri/symbols/SimpleMarkerSymbol",
                "esri/symbols/SimpleLineSymbol",
                "esri/symbols/SimpleFillSymbol",
                "esri/geometry/Point",
                "esri/Color",
                "esri/graphic",
                "dojo/domReady!"],
            function(Map,query,dom,on,Draw,ArcGISDynamicMapServiceLayer,IdentifyTask,IdentifyParameters,SimpleMarkerSymbol,
                     SimpleLineSymbol,SimpleFillSymbol,Point,Color,Graphic){
                var nameArr=[];//用于存储查询地点名称
                var shapeArr=[];//用于存储查询shape
                var areaArr=[];//用于存储面积
    
                var map = new Map("mapDiv");
                var layer=new ArcGISDynamicMapServiceLayer("http://10.10.70.50:6080/arcgis/rest/services/jsDemo/china/MapServer");
                map.addLayer(layer);
                var tb = new Draw(map);
                    
    
                var pointSymbol = new SimpleMarkerSymbol(//定义点符号
                            SimpleMarkerSymbol.STYLE_CIRCLE, 10,
                            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                                new Color([255,0,0]), 1),
                            new Color([255,0,0]));
                var outline= new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,new Color([255, 0, 0]), 1); //定义面的边界线符号
                var PolygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, outline,new Color([0, 255, 0, 1])); //定义面符号
    
                query("#btn").on("click",function(){
                    map.graphics.clear();//清空graphics
                    tb.activate(Draw["POLYGON"]);
                    tb.on("draw-end", doIdentify);
                });
                function doIdentify(evt){
                    tb.deactivate();
                    //添加draw画的区域
                    map.graphics.add(new Graphic(evt.geometry,PolygonSymbol));
                    // 实例化IdentifyTask
                    var identifyTask = new IdentifyTask("http://10.10.70.50:6080/arcgis/rest/services/jsDemo/china/MapServer");
                    // IdentifyTask参数设置
                    identifyParams = new IdentifyParameters();
                    // 冗余范围
                    identifyParams.tolerance = 3;
                    // 返回地理元素
                    identifyParams.returnGeometry = true;
                    // 进行Identify的图层
                    identifyParams.layerIds = [0];
                    // 进行Identify的图层为全部
                    identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
                    // Identify的geometry
                    identifyParams.geometry = evt.geometry;
                    // Identify范围
                    identifyParams.mapExtent = map.extent;
                    identifyTask.execute(identifyParams,showFindResult);
                };
                
                function showFindResult(queryResult){
                    //初始化信息暂存数组
                    nameArr=[];
                    shapeArr=[];
                    areaArr=[];
                    if (queryResult.length === 0) {
                        alert("查询无结果");
                        return;
                    }
                    for (var i = 0; i < queryResult.length; i++) {
                        nameArr[i]=queryResult[i].feature.attributes.name;
                        shapeArr[i]=queryResult[i].feature.attributes.Shape;
                        areaArr[i]=queryResult[i].feature.attributes.AREA;
                        //定义高亮图形的符号
                        var graphic ={}; //创建graphic
                        var locationPoint ={};//创建定位点
                        var geometry = queryResult[i].feature.geometry;//获得该图形的形状
                        if(geometry.type ==="polygon"){
                            graphic = new Graphic(geometry, PolygonSymbol);
                            locationPoint=geometry.getCentroid();
                        }
                        else if(geometry.type ==="point"){
                            graphic = new Graphic(geometry, pointSymbol);
                            locationPoint=geometry;
                        }
                        //将图形添加到map中
                        map.graphics.add(graphic);
                        map.centerAndZoom(locationPoint,1);
                    }
                    var html="";
                    for(var i=0;i<nameArr.length;i++){
                        html+="<tr>" +
                                " <td >"+nameArr[i]+"</td>" +
                                "<td >"+shapeArr[i]+"</td>" +
                                "<td >"+areaArr[i]+"</td>"+
                            "</tr>";
                    }
                    dom.byId("infoBody").innerHTML =html;
                }
            })
    </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70]: /images/20210726/3c364a8bba7f47aaad178f0942ec7e4d.png