ArcGIS API for JavaScript 通过identifyTask实现点击选择要素-蒲公英云

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

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

需求

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

思路

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

效果截图

在这里插入图片描述

实现代码

<!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>