arcgis api的三种查询实现

1. 引言

FindTask：Search a map service exposed by the ArcGIS Server REST API based on a string value. The search can be conducted on a single field
of a single layer, on many fields of a layer, or on many fields of
many layers.

QueryTask：Executes different types of query operations on a layer. The most common method used in this class is execute(), which executes the query as defined in the Query object that is passed as a parameter to the function. QueryTask.execute() returns a Promise that resolves to a FeatureSet, which contains the features in the layer that satisfy the Query.

IdentifyTask: Performs an identify operation on the layers of a map service exposed by the ArcGIS Server REST API. Use IdentifyParameters to set the parameters for the identify operation and IdentifyResult to work with the results.

三种查询方式区别

	FindTask	IdentifyTask	QueryTask
查询方式	属性查询	属性查询/空间查询	属性查询/空间查询
查询图层	单个图层/多个图层	单个图层/多个图层	单个图层
统计	否	否	是
			针对featureLayer

说明
网上会有很多相关的文档，推荐大神王培晓的 ArcGIS API For Javascript之查询功能.此篇博客使用vue实现，api版本为4.10

2. 需求

2.1 利用FindTask实现简单的属性查询

文档的dom节点加载完毕后，即vue中的mounted添加相关的模块

	"esri/tasks/FindTask",
	"esri/tasks/support/FindParameters"

添加属性查询控件,自定义input框，添加到view的右上角

	let element = document.createElement("input");
	element.className = "inputFindTask";
	this.currentView.ui.add(element, "top-right");

初始化查找

	let findTask = new FindTask({
		// 此处为自定义的地图服务，需要开启featureServices
		url: this.mapService.findTask
	});
	let findParameters = new FindParameters({
		// 查询字符串，默认会模糊查找
		searchText: "J68",
		// 查询的图层数组，对应序号可通过浏览器打开地图服务查看
		layerIds: [4],
		// 查询字段名称字符串数组
		searchFields: ["NAME"],
		// 如果做高亮显示需要返回geometry，即把要素返回
		returnGeometry: true
	});

添加input元素绑定事件

	element.onkeyup = function(e) {
		if (e.keyCode == 13) {
			findTask.execute(findParameters)
				.then(result => {
				    // 解析查询结果，将graphic数组渲染在view中
					getGraphics(result.results).forEach(graphic => {
						_this.currentView.graphics.add(graphic);

					})
				})
				.catch(error => console.log(error.message))
		}
	}

额外事件

     /**
      * 创建graphic
      */
     createGraphic:function(geometry,symbol,attribute,popupTemplate ){
         return new this.Grahic({
             geometry: geometry,
             symbol: symbol,
             attributes: attribute,
             popupTemplate: popupTemplate 
         })
     }

	// 解析findResult 获取graphic的数组
	let getGraphics = function(results){
		let graphics = [];
		results.forEach(item => {
			let geometry = item.feature.geometry;
			let symbol = {
				type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
				color: "blue",
				size: 8,
			};
			let attributes = item.feature.attributes;
			// popupTemplate 由两部分组成，title，content
			let popupTemplate = {
				title: "概览",
				// content中的内容可以手写，也可以利用内置表格展示字段值，这里采用第二种
				content: [{
					type: "fields", 
					fieldInfos: [{
						fieldName: "名称",
						label: "名称",
					}, 
					{
						fieldName: "内底标高",
						label:'内底标高'
					}]
				}]
			};
			let graphic = _this.createGraphic(geometry,symbol,attributes,popupTemplate);
			graphics.push(graphic)
		})
		return graphics;
	};

在这里插入图片描述

2.2 利用QueryTask实现空间查询

2.2.1 说明

功能类似于ArcGIS中绘制矩形识别要素功能
[外链图片转存失败(img-M80sF5P7-1564050286782)(./images/queryTask2.png)]

2.2.2 实现

引入模块，初始化查询

	let queryTask = new QueryTask({
		// 自定义的rest地图服务
		url: _this.mapService.QueryTask
	});
	let query = new Query({
		// 绘制的要素
		geometry:geometry,
		// 空间包含关系
		spatialRelationship:"contains",
		// 是否返回要素，可做后续的feature要素操作
		returnGeometry:true,
		// 返回要素内部的属性字段字符串数组，全选为["*"]
		outFields:["NAME"]
	});

引入模块，绘制要素

	"esri/views/draw/Draw";
	this.currentDraw = new Draw({view:this.currentView});

/**
 * 绘制多边形
 */
drawPolygon:function(){
	let _this=this;
	// 创建 graphic
	let createGraphic = function(vertices){
		// 创建多边形形状
		var polygon = new _this.Polygon({ 
			rings: [vertices],
			spatialReference: _this.currentView.spatialReference 
		}); 
		// 创建绘制线条
		var lineSymbol = {
			type: "simple-line",
			color: "#23E3E7",
			width: 3
		};
		// 创建多边形的graphic
		var polygonGraphic = new _this.Graphic({
			geometry: polygon,
			symbol: lineSymbol
		});
		return polygonGraphic;
	}
	this.currentView.graphics.removeAll();
	// 使用绘制工具开始绘制polygon
	const action = this.currentDraw.create("polygon");
	this.currentView.focus();
	// fires when a vertex is added
	action.on("vertex-add", function (evt) {
		_this.currentView.graphics.add(createGraphic(evt.vertices));
	});

	// fires when the pointer moves
	action.on("cursor-update", function (evt) {
		_this.currentView.graphics.removeAll(); 
		_this.currentView.graphics.add(createGraphic(evt.vertices));
	});

	// fires when the drawing is completed
	action.on("draw-complete", function (evt) {
		_this.currentView.graphics.removeAll();
		_this.currentView.graphics.add(createGraphic(evt.vertices));

		_this.geometry = createGraphic(evt.vertices).geometry;
	});

	// fires when a vertex is removed
	action.on("vertex-remove", function (evt) { 
		_this.currentView.graphics.removeAll();
		_this.currentView.graphics.add(createGraphic(evt.vertices));
	});
}

查询

	queryTask.execute(query)
	.then(result => {
		_this.currentView.graphics.removeAll();
		result.features.forEach(item => {
			_this.currentView.graphics.add(_this.createFeatures(item));
		})
	})
	.catch(error => console.log(error.message))

在这里插入图片描述

2.3 利用QueryTask进行属性查询

2.3.1 说明

功能类似于ArcGIS中的按属性选择

2.3.2 实现

引入模块，初始化查询

	// 引入模块
	"esri/tasks/QueryTask", 
	"esri/tasks/support/Query"
	// 初始化属性查询
	let queryTask = new QueryTask({
		// 这里选择自定义的rest地图服务
		url: _this.mapService.QueryTask
	});
	let query = new Query({
		// 查询条件，测试可使用arcgis属性表中的按属性选择
		where: "Invert_El >= 1",
		// 返回要素内部的属性字段字符串数组，全选为["*"]
		outFields: ["NAME"],
		// 是否返回要素，可做后续的feature要素操作
		returnGeometry: true
	});

queryTask执行execute操作

	queryTask.execute(query)
	.then(result => {
		result.features.forEach(item => {
			//后续操作
		})
	})
	.catch(error => console.log(error.message))

在这里插入图片描述

2.4 利用IdentifyTask实现空间查询

2.4.1 说明

功能与QueryTask的区别在于可以查询多个图层

2.4.2 实现

引入模块，初始化查询

	"esri/tasks/IdentifyTask",
	"esri/tasks/support/IdentifyParameters",

	let identifyTask = new IdentifyTask({
		url:_this.mapService.IdentifyTask
	});
	let identifyParameters = new IdentifyParameters({
		// 查询要素
		geometry:_this.geometry,
		// 容差，单位为像素
		tolerance:3,
		// 查询图层id数组
		layerIds:[1,2,3,4,5,6,7,8,9,10,11],
		// 定义查询图层，所有图层（"all"）,可视图层("visible"),顶层图层("top")
		layerOption: "all",
		width:_this.currentView.width,
		height:_this.currentView.height,
		mapExtent:_this.currentView.extent,
		returnGeometry: true
	});
	identifyTask.execute(identifyParameters)
	.then(result => console.log(result))
	.catch(error => console.log(error.message))

3. 说明

QueryTask模块有统计功能，此处没有展示
完整代码可访问 sean1224/blog-gis
对比arcgis api 的这三个查询模块有相似性：对应的任务和参数，使用excute函数运行得出结果；返回结果都是promise—