天天看點

ArcGIS API for JavaScript 通過identifyTask實作畫線批量選擇要素

需求

在浏覽器界面中,點選地圖中的某個要素,使其高亮顯示
           

思路

先利用identifyTask根據自己畫的要素實作圖層查詢,将選中的要素以自己執行個體化的符号顯示出來
           

效果截圖

ArcGIS API for JavaScript 通過identifyTask實作畫線批量選擇要素
ArcGIS API for JavaScript 通過identifyTask實作畫線批量選擇要素

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([, , ]);
                var halfFillYellow = new Color([, , , ]);
//                pointSym = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_DIAMOND, 10,
//                    new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, redColor, 1),
//                    halfFillYellow);
                lineSym = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, redColor, );
//                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 = ;
                    // 傳回地理元素
                    identifyParams.returnGeometry = true;
                    // 進行Identify的圖層
                    identifyParams.layerIds = [];
                    // 進行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 = , il = idResults.length; i < il; i++) {
                        var idResult = idResults[i];
                        if (idResult.layerId === ) {
                            idResult.feature.setSymbol(lineSym);
                            if (!layer0results.displayFieldName) {
                                layer0results.displayFieldName = idResult.displayFieldName;
                            }
                            layer0results.features.push(idResult.feature);
                        }
                    }
                    for(var i=;i<layer0results.features.length;i++){
                        map.graphics.add(layer0results.features[i]);
                    }
                }

            });
           

執行個體下載下傳位址

identifyTask 畫線選取元素

繼續閱讀