利用ArcGIS API for JavaScript 4.x实现空间查询总结

其他 2021-01-31 10:13:37 阅读次数: 0

实现空间查询的整体思路：

1.实例化图形图层，用于放绘制的图形

//实例化一个图形图层
const layer = new GraphicsLayer();

 2.创建全国矢量图层并加载到MapView中

//创建全国矢量图层（feature）
var countrylayer = new FeatureLayer({
    url: "https://xxxxxx.arcgis.cn/arcgis/rest/services/Hosted/%E5%85%A8%E5%9B%BD%E7%9F%A2%E9%87%8F1/FeatureServer",
    visible: true,
    outFields: ["*"],
});

//创建地图对象
const map = new Map({
    basemap: 'osm',
    layers: [countrylayer, layer]
});
//渲染二维地图
const view = new MapView({
    container: "viewDiv",
    map: map,
    zoom: 6,
    center: [108, 33]
});

3.添加sketch小部件

（要给小部件添加监听事件，并获取geometry，根据geometry进行空间查询） 

//向视图中添加绘图小部件
view.ui.add(sketch, "top-right");
//给视图小部件添加监听事件，监听它完成的时候
sketch.on("create",
function(event) {
    if (event.state === "complete") {
        //console.log(event);
        //使用graphic.geometry 去查询相交特征
        //console.log(event.graphic.geometry);
        //使用geometry（QueryTask）
        queryTask(event.graphic.geometry);
    }
});

4.定义空间查询方法（将小部件得到的geometry作为参数传入）

//空间查询（QueryTask）
function queryTask(geometry) {
    // console.log(geometry);
    var china = "https://xxxxx.arcgis.cn/arcgis/rest/services/Hosted/%E5%85%A8%E5%9B%BD%E7%9F%A2%E9%87%8F1/FeatureServer/0";
    var qTask = new QueryTask({
        url: china //全国矢量
    });
    var query = new Query({
        returnGeometry: true,
        outFields: ["*"],
        //结果要素包含的属性字段  
    });
    query.geometry = geometry;
    //console.log(query.geometry);
    //空间参考信息
    query.outSpatialReference = map.spatialReference;
    //查询的标准，此处代表和geometry相交的图形都要返回
    query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
    //执行空间查询
    qTask.execute(query).then(showQueryResult);
}

5.定义展示查询结果方法

//执行查询
function showQueryResult(queryResult) {
    //console.log(queryResult)
    //创建线符号					
    var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([0, 255, 0, 0.5]));
    //创建面符号
    var fill = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new Color([0, 255, 0]));
    if (queryResult.features.length == 0) {
        dom.byId("divShowResult").innerHTML = "查询结果为空！";
        return;
    };
    var htmls = "";
    if (queryResult.features.length >= 1) {
        htmls = htmls + "<table style=\"width: 900px\">"; //创建一个表，使用了转义字符
        htmls = htmls + "<tr><td>名称</td></tr>"; //创建数据行
        for  (var i = 0; i < queryResult.features.length; i++) {
            //得到graphic	
            var graphic = queryResult.features[i];
            //给图形赋予符号	
            //graphic.setSymbol(fill);  //api3.×
            graphic.symbol = fill; //api 4.x				
            //添加到地图从而实现高亮效果						
            view.graphics.add(graphic); //api 4.x
            //map.graphics.add(graphic); //api3.×
            //获得名称信息，此处应和shp的属性表对应						
            var ptName = graphic.attributes["nl_name_1"];
            ptName += graphic.attributes["nl_name_2"];
            htmls = htmls + "<td><a href=\"#\">"  + ptName + "</a></td>";
            htmls = htmls + "</tr>";
        }
        htmls = htmls + "</table>";
        dom.byId("divShowResult").innerHTML = htmls;
    }
}

源码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
		<title>空间查询</title>

		<!-- <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
		<script src="https://js.arcgis.com/4.16/"></script> -->
		<link rel="stylesheet" type="text/css" href="https://10.10.10.104/4.15/esri/themes/light/main.css" />
		<script src="https://10.10.10.104/4.15/init.js"></script>
		<script src="jquery-1.7.2/jquery.min.js"></script>

		<style>
			html,
			body,
			#viewDiv {
				padding: 0;
				margin: 0;
				height: 100%;
				width: 100%;
			}
		</style>
		<script>
			require([
				"esri/widgets/Sketch",
				"esri/Map",
				"esri/layers/GraphicsLayer",
				"esri/views/MapView",
				"esri/Basemap",
				"esri/layers/FeatureLayer",
				"esri/views/draw/Draw",
				"esri/Graphic",
				"esri/tasks/IdentifyTask",
				"esri/tasks/support/IdentifyParameters",
				"esri/tasks/QueryTask",
				"esri/tasks/support/Query",
				"esri/symbols/SimpleLineSymbol",				
				"esri/symbols/SimpleFillSymbol",
				"dojo/dom",
				"dojo/on",
				"esri/Color"
			], function(Sketch, Map, GraphicsLayer, MapView, Basemap, FeatureLayer,
				Draw, Graphic,IdentifyTask, IdentifyParameters, QueryTask, Query,SimpleLineSymbol,SimpleFillSymbol,dom,on,Color) {
				//实例化一个图形图层
				const layer = new GraphicsLayer();

				//创建全国矢量图层（feature）
				var countrylayer = new FeatureLayer({
					url: "https://xqwportal.arcgis.cn/arcgis/rest/services/Hosted/%E5%85%A8%E5%9B%BD%E7%9F%A2%E9%87%8F1/FeatureServer",
					visible: true,
					outFields: ["*"],
				});

				//创建地图对象
				const map = new Map({
					basemap: 'osm',
					layers: [countrylayer, layer]
				});
				//渲染二维地图
				const view = new MapView({
					container: "viewDiv",
					map: map,
					zoom: 6,
					center: [108, 33]
				});
				//绘图小部件
				const sketch = new Sketch({
					layer: layer,
					view: view,
					// graphic will be selected as soon as it is created
					creationMode: "update"
				});
				//向视图中添加绘图小部件
				view.ui.add(sketch, "top-right");
				//给视图小部件添加监听事件，监听它完成的时候
				sketch.on("create", function(event) {
					if (event.state === "complete") {
						//console.log(event);

						//使用graphic.geometry 去查询相交特征
						//console.log(event.graphic.geometry);

						//使用geometry（QueryTask）
						queryTask(event.graphic.geometry);
					}
				});

				//空间查询（QueryTask）
				function queryTask(geometry) {
					// console.log(geometry);
					var china =
						"https://xqwportal.arcgis.cn/arcgis/rest/services/Hosted/%E5%85%A8%E5%9B%BD%E7%9F%A2%E9%87%8F1/FeatureServer/0";
					var qTask = new QueryTask({
					    url:china //全国矢量
					});
					var query = new Query({
					  returnGeometry: true,
					  outFields: ["*"],//结果要素包含的属性字段  
					});
					query.geometry=geometry;
					//console.log(query.geometry);
					//空间参考信息
					query.outSpatialReference = map.spatialReference;
					//查询的标准，此处代表和geometry相交的图形都要返回
					query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
					//执行空间查询
					qTask.execute(query).then(showQueryResult);
				}
				//执行查询
				function showQueryResult(queryResult) {
					//console.log(queryResult)
					//创建线符号					
					var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH ,new Color([0, 255, 0, 0.5]));
					//创建面符号
					var fill=new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new Color([0, 255, 0]));
					if (queryResult.features.length == 0) {
						dom.byId("divShowResult").innerHTML = "查询结果为空！";
						return;
					};
					var htmls = "";
					if (queryResult.features.length >= 1){
						htmls = htmls + "<table style=\"width: 900px\">"; //创建一个表，使用了转义字符
						htmls = htmls + "<tr><td>名称</td></tr>"; //创建数据行
						for (var i = 0; i < queryResult.features.length; i++) {						
							//得到graphic	
							var graphic = queryResult.features[i];	
							//给图形赋予符号	
							
							//graphic.setSymbol(fill);  //api3.×
							graphic.symbol = fill;		//api 4.x				
							//添加到地图从而实现高亮效果						
							view.graphics.add(graphic);	//api 4.x
					  
							//map.graphics.add(graphic); //api3.×
						    
							//获得名称信息，此处应和shp的属性表对应						
							var ptName = graphic.attributes["nl_name_1"];	
							    ptName += graphic.attributes["nl_name_2"];
							htmls = htmls + "<td><a href=\"#\">" + ptName+ "</a></td>";						
							htmls = htmls + "</tr>";						
						}						
						htmls = htmls + "</table>";
						dom.byId("divShowResult").innerHTML = htmls;
					}
				}
			});
		</script>
	</head>

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

最终成果如下 

 

 注意：

ArcGIS API For JavaScript提供的两个工具类都可以用于空间查询

IdentifyTask：利用该工具类可以对多个图层进行查询，主要利用IdentifyParameters对象来规定空间查询的参数。
QueryTask:该工具只能对一个图层进行查询，但是利用该类进行查询的时候课指定属性过滤，所以可以同时进行几何和属性查询。该工具主要利用Query类来设定查询参数。

具体使用那个类，根据底图类型决定

猜你喜欢

转载自blog.csdn.net/qq_42539194/article/details/107341532
今日推荐
Linus “吃狗粮”最积极！
开源日报 | Winamp播放器即将开源；生成式AI之战升级第二轮；Linus“吃狗粮”最积极；AI进入泡沫前期；吴泳铭为阿里云带来了什么？
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
周排行
SVN服务端安装在阿里云
实战 | 相机标定
webpack核心概念
note20——》只要肯低头吃苦，人生就会有救
PAT甲级 1062 Talent and Virtue （25 分）排序
NG Toolset开发笔记--5GNR Resource Grid（26）
如何对待上司
oracle命令
第9章 STL迭代器
logstash使用es映射模板
每日归档
更多
2024-05-20(36)
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022