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—