ArcGIS API for JavaScript 3.x 属性条件查询

最新推荐文章于 2023-01-11 22:11:41 发布
一碗老面i
最新推荐文章于 2023-01-11 22:11:41 发布
阅读量572
点赞数
分类专栏： ArcGIS API for JavaScript
本文链接：https://blog.youkuaiyun.com/qq_29808089/article/details/108457575
版权
ArcGIS API for JavaScript 专栏收录该内容
22 篇文章 ¥9.90 ¥99.00
订阅专栏
超级会员免费看
本文将详细讲解如何使用ArcGIS API for JavaScript 3.x进行属性条件查询，通过示例代码展示如何筛选地图图层中符合特定属性条件的要素，帮助开发者更好地操作和展示地理数据。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>属性查询</title>
    <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.15/3.15/dijit/themes/claro/claro.css" />
	<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.15/3.15/esri/css/esri.css" />
	<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
	<script src="http://localhost/arcgis_js_api/library/3.15/3.15/init.js" type="text/javascript"></script>
    <style type="text/css">
        .MapClass{
            width:100%;
            height:600px;
            border:1px solid #000;
        }
    </style>
    <script type="text/javascript">

        require(["esri/map",
            "esri/layers/ArcGISDynamicMapServiceLayer",
			"dojo/dom",
			"dojo/on",
			"esri/geometry/Point",
            "esri/tasks/QueryTask",
            "esri/SpatialReference",
            "esri/tasks/query",
            "esri/InfoTemplate",
            "esri/symbols/SimpleMarkerSymbol",
			"esri/symbols/SimpleLineSymbol",
			"esri/symbols/SimpleFillSymbol", 
			"esri/layers/GraphicsLayer",
			"esri/graphic",
			"esri/layers/FeatureLayer",
            "dojo/domReady!"],
            function (Map, ArcGISDynamicMapServiceLayer,dom, on, Point, QueryTask,SpatialReference, Query,InfoTemplate,SimpleMarkerSymbol,SimpleLineSymbol,SimpleFillSymbol,GraphicsLayer,Graphic,FeatureLayer) {
				//根据div的id属性创建地图
				var startExtent = new esri.geometry.Extent(114.309, 30.578, 115, 37,
                	new esri.SpatialReference({ wkid:4326}) );
                var map = new Map("mapDiv",{
                	extent:startExtent,
					center: [114.309, 30.578], //地图加载后，初始位置
					zoom: 12, //放大级别，值越大放大的比例就越大
					slider: false,
					maxZoom: 16, //地图最大缩放级别
					minZoom: 7, //地图最小缩放级别
					logo: false //不显示Esri的logo
				});
	            var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetWarm/MapServer");
				map.addLayer(myTiledMapServiceLayer); //添加到地图中
				var infoTemplate = new InfoTemplate("${Name}", '<div class="content_info">' +               
				                '<span>x:'+ "${Display_X}" +'&nbsp;&nbsp;&nbsp;&nbsp;</span>' +
				                '<span>y:'+"${Display_Y}" +'</span>' +
				                '</div>' +
				                '<div class="content_bottom"></div>');
	            var layer = new GraphicsLayer("http://localhost/arcgis/rest/services/wuhan/wuhan_hospital/MapServer/0",{
	            	id:"_layer",
	            	mode: FeatureLayer.MODE_ONDEMAND,
				    infoTemplate: infoTemplate,
				    outFields: ["*"]
	            });
	            map.addLayer(layer)
				//给属性查询按钮添加click事件
				on(dom.byId("Btn"),"click",function(e){
//					layer.clear();
//					map.infoWindow.hide();
//					$(".checkMe,#mc").remove();
					//定义查询对象
					var queryTask = new QueryTask("http://localhost/arcgis/rest/services/wuhan/wuhan_hospital/MapServer/0");
					//定义查询参数对象
					var query = new Query();
					//查询条件，类似于sql语句的where子句
					var queryType = $("#search").val();
                    query.where = "Name like '%"+queryType+"%'";
					//返回的字段信息：*代表返回全部字段
                    query.outFields = ["*"];
					//是否返回几何形状
                    query.returnGeometry = true;
					//执行属性查询
                    queryTask.execute(query, showQueryResult);
				})
				on(dom.byId("Btn1"),"click",function(e){
					layer.clear();
					map.infoWindow.hide();
					$(".checkMe,#mc").remove();
				})
				//属性查询完成之后，用showQueryResult来处理返回的结果
                function showQueryResult(queryResult)
                {
					//创建线符号
					var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3);
					//创建面符号
					var fill=new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol);
                    if (queryResult.features.length == 0) {
                        dom.byId("divShowResult").innerHTML = "暂无查询结果";
                        return;
                    }
                    var htmls = "";
                    if (queryResult.features.length >= 1) {
                        htmls = htmls + "<table style=\"width: 100%\">";
                        htmls = htmls + "<tr><td id='mc'>名称</td></tr>";
                        for (var i = 0; i < queryResult.features.length; i++) {
                        	var P =  queryResult.features[i].attributes;
							//获得图形graphic
                            var graphic = queryResult.features[i];
							//赋予相应的符号
							graphic.setSymbol(fill);
							//将graphic添加到地图中，从而实现高亮效果
                            map.graphics.add(graphic);
							//获得教学楼名称（此处是和shp属性表对应的）
							var ptName = graphic.attributes["Name"];
                            if (i % 2 == 0)
                                htmls = htmls + "<tr>";
                            else
                                htmls = htmls + "<tr bgcolor=\"#F0F0F0\">";
                            htmls = htmls + "<td class='checkMe'><a href=\"#\" \">" + P.Name + "</a></td>";
                            htmls = htmls + "</tr>";
                            var point = new Point(P.Display_X, P.Display_Y, new SpatialReference({
			                    wkid: 4326
			                }));
			                var simpleMarkerSymbol = new SimpleMarkerSymbol({
			                    "color": [0, 0, 255],
			                    "size": 3,
			                    "angle": -30,
			                    "xoffset": 0,
			                    "yoffset": 0,
			                    "type": "esriSMS",
			                    "style": "esriSMSCircle",
			                    "outline": {
			                        "color": [0, 0, 255],
			                        "width": 5,
			                        "type": "esriSLS",
			                        "style": "esriSLSSolid"
			                    }
			                });
			                var attr = P;
			                var graphic = new Graphic(point, simpleMarkerSymbol, attr);   
			                layer.add(graphic);
                        }
                        htmls = htmls + "</table>";
						//将属性绑定在divShowResult上面
                        dom.byId("divShowResult").innerHTML = htmls;
					}
                    //var pointArray = queryResult.features;
		            $(".checkMe").on("click",function(evt){	

	        			var _layer = map.getLayer("_layer");//获取对应的layer
		            	for(var i=0;i<_layer.graphics.length;i++){
		            		var P = _layer.graphics[i];
		            		if(P.symbol.color == "#FF0000"){
		            			P.infoTemplate = sinfoTemplate;
				                P.symbol.color = "#0000FF";
				                P.symbol.outline.color = "#0000FF";
				                var point = new Point(P.geometry.x,P.geometry.y, new SpatialReference({
				                    wkid: 4326
				                }));
		            			map.centerAndZoom(point,15);
		            		}
		            		if(evt.currentTarget.innerText == P.attributes.Name){
		            			//获取对应的graphic
		            			var sinfoTemplate = new esri.InfoTemplate(P.attributes.Name, '<div class="content_info">' +
				                '<span>编号:'+P.attributes.Name+'</span>' +
				                '</div>' +'<div class="content_info">' +                
				                '<span>x:'+P.geometry.x+'&nbsp;&nbsp;&nbsp;&nbsp;</span>' +
				                '<span>y:'+P.geometry.y+'</span>' +
				                '</div>' +
				                '<div class="content_bottom"></div>');
				                P.infoTemplate = sinfoTemplate;
				                P.symbol.color = "#FF0000";
				                P.symbol.outline.color = "#FF0000";
				                var point = new Point(P.geometry.x,P.geometry.y, new SpatialReference({
				                    wkid: 4326
				                }));
		            			map.centerAndZoom(point,15);
		            			break;
		            		}
		            	}
		            });
				}
            });


    </script>
</head>
<body>
    <div id="mapDiv" class="MapClass"></div>
    <input id="search" type="text" placeholder="输入需要查询的名称" />
    <input type="button" value="属性查询" id="Btn"/>
    <input type="button" value="清除" id="Btn1"/>
    <div id="divShowResult" style="height: 30%;overflow-y: scroll;"></div>
</body>
</html>