ArcGIS API for JavaScript 通过identifyTask实现画线批量选择要素

逃离我推掉我的手 2021-09-14 14:38 388阅读 0赞

### 需求 ###

在浏览器界面中，点击地图中的某个要素，使其高亮显示

### 思路 ###

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

### 效果截图 ###

![这里写图片描述][SouthEast]

![这里写图片描述][SouthEast 1]

### Js代码 ###

var map, identifyTask, identifyParams;
            var pointSym, lineSym, polygonSym;
            var layer2results, layer1results, layer0results;
    
            require([
            "dojo/parser", "dijit/registry","esri/geometry/Polyline", "esri/tasks/TrimExtendParameters","esri/tasks/GeometryService","esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/toolbars/draw",
                    "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/Color",
                    "esri/tasks/IdentifyTask", "esri/tasks/IdentifyParameters", "esri/geometry/screenUtils",
                    "dijit/form/Button", "dijit/layout/TabContainer", "dijit/layout/ContentPane", "dojo/domReady!"],
                function (parser, registry,Polyline,TrimExtendParameters,GeometryService, Map, ArcGISDynamicMapServiceLayer, Draw, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Color, IdentifyTask, IdentifyParameters, screenUtils) { 
    
                    parser.parse();
                    map = new Map("mapDiv");
                    var url = "http://localhost:6080/arcgis/rest/services/clipGP/clipTest01/MapServer";
                    var agoLayer = new ArcGISDynamicMapServiceLayer(url);
    
                    map.addLayer(agoLayer);
                    map.on("load", initIdentify);
    
                    var redColor = new Color([255, 0, 0]);
                    var halfFillYellow = new Color([255, 255, 0, 0.5]);
    // pointSym = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_DIAMOND, 10,
    // new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, redColor, 1),
    // halfFillYellow);
                    lineSym = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, redColor, 2);
    // polygonSym = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
    // new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, redColor, 2),
    // halfFillYellow);
    
                    var tb = new Draw(map);
                    tb.activate(Draw["POLYLINE"]);
                    map.hideZoomSlider();
                    tb.on("draw-end", doIdentify);
    
                    function initIdentify(evt) { 
                        // 实例化IdentifyTask
                        identifyTask = new IdentifyTask(url);
                        // IdentifyTask参数设置
                        identifyParams = new IdentifyParameters();
                        // 冗余范围
                        identifyParams.tolerance = 1;
                        // 返回地理元素
                        identifyParams.returnGeometry = true;
                        // 进行Identify的图层
                        identifyParams.layerIds = [0];
                        // 进行Identify的图层为全部
                        identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
    
    
                    }
    
                    // 进行Identify
                    function doIdentify(evt) { 
                        // 清除上一次的高亮显示
                        map.graphics.clear();
                        // Identify的geometry
                        identifyParams.geometry = evt.geometry;
                        // Identify范围
                        identifyParams.mapExtent = map.extent;
                        identifyTask.execute(identifyParams, function (idResults) { 
                            addToMap(idResults, evt.geometry);
                        });
                    }
    
                    // 在infoWindow中显示Identify结果
                    function addToMap(idResults, geometry) { 
                        layer0results = { displayFieldName: null, features: [] };
                        for (var i = 0, il = idResults.length; i < il; i++) {
                            var idResult = idResults[i];
                            if (idResult.layerId === 0) {
                                idResult.feature.setSymbol(lineSym);
                                if (!layer0results.displayFieldName) {
                                    layer0results.displayFieldName = idResult.displayFieldName;
                                }
                                layer0results.features.push(idResult.feature);
                            }
                        }
                        for(var i=0;i<layer0results.features.length;i++){
                            map.graphics.add(layer0results.features[i]);
                        }
                    }
    
                });

### 实例下载地址 ###

[identifyTask 画线选取元素][identifyTask]

[SouthEast]: /images/20210726/bf9bcbf01b5f4f48b487fd836cb1082d.png
[SouthEast 1]: /images/20210726/e419e60a19d14a569e157a16be65a725.png
[identifyTask]: http://download.csdn.net/download/idomyway/10210657