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

最新推荐文章于 2024-02-23 14:04:48 发布

idomyway

最新推荐文章于 2024-02-23 14:04:48 发布

阅读量948

点赞数

分类专栏： ArcGIS JS 开发实例文章标签： javascript arcgis 截图

本文链接：https://blog.csdn.net/idomyway/article/details/78514211

版权

ArcGIS JS 开发实例专栏收录该内容

21 篇文章 4 订阅

订阅专栏

需求

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

思路

对于这个需求，目前有两个思路：
    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>