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

爱被打了一巴掌 2021-09-14 09:30 298阅读 0赞

## 需求 ##

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

## 思路 ##

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

## 效果截图 ##

截取前  
![这里写图片描述][SouthEast]

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

截取后  
![这里写图片描述][SouthEast 2]

实现代码

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

[SouthEast]: /images/20210726/5ea4dfd93d5a421bb8959ba6eed27976.png
[SouthEast 1]: /images/20210726/1e2f2540ab9c47108f4dbe6b35e8c8dc.png
[SouthEast 2]: /images/20210726/9c7e4e05f464495b823ce06344b37263.png