arcgis of js 4.x 笔记（7）对 arcgis Server 发布的服务，进行属性查询，分类处理和渲染，弹窗

之前笔记有写过图层渲染和查询，只是简单的说明了一下，主要是针对FeatureLayer之类的用query进行查询，下面记录一下用queryTask进行查询官方API首先我们要对arcgis server发布的服务进行图层查询然后找到他的REST地址地址中有两个图层，我们选取其中一个进行查询，点击进入就可以看到图层属性 Fields然后我们主要是针对Fields 进行查询使用queryTask +q

Jose_Yang

859人浏览 · 2020-07-20 15:05:26

Jose_Yang · 2020-07-20 15:05:26 发布

之前笔记有写过图层渲染和查询，只是简单的说明了一下，主要是针对FeatureLayer之类的用query进行查询，下面记录一下用queryTask进行查询

官方API

首先我们要对arcgis server发布的服务进行图层查询
在这里插入图片描述

然后找到他的REST地址
在这里插入图片描述
地址中有两个图层，我们选取其中一个进行查询，点击进入就可以看到图层属性 Fields

然后我们主要是针对Fields 进行查询
使用queryTask +query 进行查询
主要代码如下：

var queryTask = new QueryTask({
	//在任务中使用的ArcGIS Server REST服务URL（通常是要素服务层或地图服务层）
	url: "http://localhost:6080/arcgis/rest/services/MASAIKE/MapServer/1"
});
//查询对象
var query = new Query();
query.returnGeometry = true; 
query.outFields = ["FID"];
query.where = "FID > 2500 ";  //这里是就是查询语句
query.returnGeometry = true;
// query.maxRecordCountFactor=5;  以为有用，实际没用

queryTask.execute(query).then(function(results) {
	var features = results.features; 
	for (var i = 0; i < features.length; i++) {
		//添加弹窗
		features[i].popupTemplate = templateHaiAnXianRG;
		//添加样式
		features[i].symbol = symbolClass; 
		//将graphics 添加到视图
		view.graphics.add(features[i]); 
	}  
});

然后对其中一些部分进行说明
1.查询的条件语句可以实现在arcgis server 上面进行测试刚才说的那个REST最下面有一个查询
在这里插入图片描述

可以在上面填写查询条件进行查询

2.查询数量返回不超过1000条，如果出现这个问题，需要调整这个位置的数量
在这里插入图片描述
保存并重新启动就行

3.查询出来的结果可以看到很多信息
输出打印 results.features;
你可以看到出现出来的结果集
在这里插入图片描述

其中
attributes 是属性集合，这个用于弹窗里面的内容显示，对应的你图层里面的属性表
geometry，针对的是view 就是图形信息，有点线面等多种图层信息，主要就是把这个加在地图上
layer 这个返回图层信息，主要都是图层的一些信息
popuTemplate 可以设置弹窗的模板
sourceLayer 还没找到怎么用
symbol 这个主要是用于渲染，给你需要的东西加上样式，
visible 是否可见

3.如果要统一控制就把所有的graphics 先添加到 GraphicsLayer上面，然后map.add 进行

4.如果查询本地的文件，就用我之前笔记上的内容

全部测试代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
		<title>Intro to MapView - Create a 2D map - 4.12</title>
		<style>
			html,
			body,
			#viewDiv {
				padding: 0;
				margin: 0;
				height: 100%;
				width: 100%;
			}
		</style>
		<!-- 本地化 -->
		<link rel="stylesheet" href="http://localhost/arcgis_js_v415_sdk/arcgis_js_api/library/4.15/dijit/themes/claro/claro.css" />
		<link rel="stylesheet" href="http://localhost/arcgis_js_v415_sdk/arcgis_js_api/library/4.15/esri/themes/light/main.css" />
		<script src="http://localhost/arcgis_js_v415_sdk/arcgis_js_api/library/4.15/dojo/dojo.js"></script>

		<script>
			require([
				"esri/Map",
				"esri/views/MapView",
				"esri/layers/FeatureLayer",
				"esri/tasks/QueryTask",
				"esri/tasks/support/Query"
			], function(Map, MapView, FeatureLayer, QueryTask, Query) {
				var map = new Map({
					basemap: "satellite"
				});

				var view = new MapView({
					container: "viewDiv",
					map: map,
					zoom: 4,
					center: [118.9634086609, 32.9595912264],
				});

				// var shplayer = new FeatureLayer({
				// 	url: "http://localhost:4567/arcgis/rest/services/SampleWorldCities/MapServer/dynamicLayer",
				// 	mode: FeatureLayer.MODE_SNAPSHOT,
				// 	dynamicDataSource: {
				// 		type: "data-layer",
				// 		dataSource: {
				// 			type: "table",
				// 			workspaceId: "coastline",
				// 			dataSourceName: "nature.shp"
				// 		}
				// 	}
				// });

				var templateHaiAnXianRG = {
					// autocasts as new PopupTemplate()
					title: "标题",
					content: [{
						type: "fields",
						fieldInfos: [{
							fieldName: "FID",
							label: "FID "
						}]
					}]
				};

				//样式文件
				var symbolClass = {
					type: "simple-line", // autocasts as new SimpleMarkerSymbol()
					color: [0, 255, 255],
					width: 2,
					outline: { // autocasts as new SimpleLineSymbol()
						width: 10,
						color: [0, 255, 255],
					}
				};

				//查询任务
				var queryTask = new QueryTask({
					//在任务中使用的ArcGIS Server REST服务URL（通常是要素服务层或地图服务层）
					url: "http://localhost:6080/arcgis/rest/services/MASAIKE/MapServer/1"
				});
				//查询对象
				var query = new Query();
				query.returnGeometry = true; 
				query.outFields = ["FID"];
				query.where = "FID > 2500 ";  //这里是就是查询语句
				query.returnGeometry = true;
				// query.maxRecordCountFactor=5;  以为有用，实际没用

				queryTask.execute(query).then(function(results) {
					var features = results.features; 
					console.log(features)
					for (var i = 0; i < features.length; i++) {
						//添加弹窗
						features[i].popupTemplate = templateHaiAnXianRG;
						//添加样式
						features[i].symbol = symbolClass; 
						//将graphics 添加到视图
						view.graphics.add(features[i]); 
						// map.add(features[i].layer);
					}  
				});

				// map.add(shplayer);


			});
		</script>
	</head>

	<body>
		<div id="viewDiv"></div>
	</body>
</html>

另外，上面主要演示query的查询方法，如果你是只单纯需要按不同层级渲染数据的话，你可以直接构建对应的Rendere，

例如

var RendererHaiAnXian = {
	type: "unique-value",  
	field: "岸线类型",
	defaultSymbol: {
		type: "simple-line"
	},  
	uniqueValueInfos: [{
		value: "基岩岸线",
		symbol: {
			type: "simple-line",  
			color: [0,255,255]
		}
	}, {
		 value: "淤泥质(生物)岸线 ",
		symbol: {
			type: "simple-line" 
			color: [153,153,0]
		}
	}, { 
		value: "砂质岸线",
		symbol: {
			type: "simple-line",  
			color: [255,102,0]
		} 
	} ]
};