您的位置：首页 > Web前端 > JavaScript

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

2017-11-12 19:50 555 查看

需求

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

思路

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航