ArcGIS API for JavaScript 通过identifyTask实现按区域选取截图

来源：互联网发布：陕西广电网络换门庭编辑：程序博客网时间：2024/04/30 10:59

需求

在浏览器中，自己选择区域，只保留与选中区域的要素

思路

对于这个需求，目前有两个思路：    1.利用GP服务操作    2.先利用identifyTask进行对选中区域进行查询，再把查询到的元素加载到地图上现在是采用第二种方法

效果截图

截取前
这里写图片描述

截取中
这里写图片描述

截取后
这里写图片描述

实现代码

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>图形查询属性</title>    <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">    <script src="https://js.arcgis.com/3.22/"></script>    <script>        var map,identifyTask,identifyParams;        var pointSym, lineSym, polygonSym;        var layer2results, layer1results, layer0results;        var symbolContainer={};        require(["dojo/parser",                "dojo/_base/array",                "dijit/registry",                "dojo/_base/lang",                "esri/layers/FeatureLayer",                "esri/layers/GraphicsLayer",                "esri/map",                "esri/layers/ArcGISDynamicMapServiceLayer",                "esri/toolbars/draw",                "esri/symbols/SimpleMarkerSymbol",                "esri/symbols/SimpleLineSymbol",                "esri/symbols/SimpleFillSymbol",                "esri/tasks/GeometryService",                "esri/Color",                "esri/tasks/IdentifyTask",                "esri/tasks/IdentifyParameters",                "esri/geometry/Polyline",                "dojo/domReady!"],            function (parser,arrayUtils, registry,lang,FeatureLayer,GraphicsLayer, Map, ArcGISDynamicMapServiceLayer, Draw,                      SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, GeometryService,Color,                      IdentifyTask, IdentifyParameters,Polyline) {                parser.parse();                map = new Map("mapDiv");                var rivers = new FeatureLayer("http://localhost:6080/arcgis/rest/services/*********/MapServer/1", {                    mode: FeatureLayer.MODE_ONDEMAND,                    outFields: ["*"]                });                var waterbodies = new FeatureLayer("http://localhost:6080/arcgis/rest/services/*********/MapServer/0", {                    mode: FeatureLayer.MODE_ONDEMAND,                    outFields: ["*"]                });                map.addLayers([rivers,waterbodies]);                map.on("layers-add-result", function (evt) {                    var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {                        symbolContainer[index]=layer.layer.renderer._symbols;                    });                });                map.on("load", initIdentify);                var tb = new Draw(map);                tb.on("draw-end", doIdentify);                tb.activate(Draw["POLYGON"]);                function initIdentify(evt) {                    // 实例化IdentifyTask                    identifyTask = new IdentifyTask(url);                    // IdentifyTask参数设置                    identifyParams = new IdentifyParameters();                    // 冗余范围                    identifyParams.tolerance = 3;                    // 返回地理元素                    identifyParams.returnGeometry = true;                    // 进行Identify的图层                    identifyParams.layerIds = [ 1, 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);                    });                }                function addToMap(idResults, geometry) {                    map.removeAllLayers();                    layer0results = {features: []};                    layer1results = {features: []};                    for (var i = 0, il = idResults.length; i < il; i++) {                        var idResult = idResults[i];                        if (idResult.layerId === 1) {                        idResult.feature.setSymbol(symbolContainer[0]["1-10"]);                        layer1results.features.push(idResult.feature);                        } else if (idResult.layerId === 0) {                            idResult.feature.setSymbol(symbolContainer[1]["1-10"]);                            layer0results.features.push(idResult.feature);                        }                    }                    for(var j=0;j<layer1results.features.length;j++){                        map.graphics.add(layer1results.features[j]);                    }                    for(var k=0;k<layer0results.features.length;k++){                        map.graphics.add(layer0results.features[k]);                    }                }            })    </script></head><body class="claro"><div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div></body></html>

阅读全文

0 0