ArcGis for js——————拉框和多边形查询

50 阅读 0 评论 33 点赞

我是靠谱客的博主冷艳悟空，最近开发中收集的这篇文章主要介绍ArcGis for js——————拉框和多边形查询，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
	<title>框选查询</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
	<link rel="stylesheet" href="http://58.56.168.30:8013/arcgisjsapi/arcgis_js_api/library/3.19/3.19/esri/css/esri.css">
	<style>
	html,
	body,
	#map {
		height: 100%;
		margin: 0;
		padding: 0;
	}

	#panoDiv {
		display: none;
		position: absolute;
		right: 0;
		top: 0;
		width: 70%;
		height: 70%;
	}

	#tree {
		height: 35px;
	}
</style>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap-treeview.js" type="text/javascript" charset="utf-8"></script>
<script src="js/checkall.js" type="text/javascript"></script>
<script src="http://58.56.168.30:8013/arcgisjsapi/arcgis_js_api/library/3.19/3.19/init.js"></script>

<script>
	var map, tb;
	var GJurl = "http://58.56.168.30:6080/arcgis/rest/services/齐鲁交通/专题服务全/MapServer";
	require([
		"esri/map",
		"esri/toolbars/draw",
		"esri/symbols/SimpleMarkerSymbol",
		"esri/symbols/PictureMarkerSymbol",
		"esri/layers/FeatureLayer",
		"esri/tasks/query",
		"tdlib/SDTDTLayer",
		"esri/layers/ArcGISDynamicMapServiceLayer",
		"esri/symbols/PictureFillSymbol",
		"esri/symbols/SimpleLineSymbol",
		"esri/graphic",
		"esri/Color",
		"dojo/dom",
		"dojo/on",
		"dojo/domReady!"
		], function(Map, Draw, SimpleMarkerSymbol, PictureMarkerSymbol, FeatureLayer, Query, SDTDTLayer, ArcGISDynamicMapServiceLayer,
			PictureFillSymbol, SimpleLineSymbol, Graphic, Color, on, dom) {
			map = new Map("map", {
				wkid: 4326,
				center: [118.1, 36.1],
				zoom: 10,
				isDoubleClickZoom: false,
				logo: false,
			});
			map.disableDoubleClickZoom();
			map.on("load", initToolbar);
			var sdvecLayer = new SDTDTLayer();
			map.addLayer(sdvecLayer);
			var layer = new ArcGISDynamicMapServiceLayer(GJurl);
			map.addLayer(layer);
			var fillSymbol = new PictureFillSymbol(
				new SimpleLineSymbol(
					SimpleLineSymbol.STYLE_SOLID,
					new Color('#000'),
					1
					),
				42,
				42
				);
            //拉框或者是多边形
            function initToolbar() {
            	tb = new Draw(map);
            	tb.on("draw-end", addGraphic);
            	document.getElementById("info").onclick = function(evt) {
            		if(evt.target.id === "info") {
            			return;
            		}
            		var tool = evt.target.id.toLowerCase();
            		map.disableMapNavigation();
            		tb.activate(tool);
            	};
            }
            document.getElementById("clear").onclick = function() {
            	tb.deactivate();
            	map.graphics.clear();
            }
			//根据后台数据添加多选框
			$.ajax({
				url: 'http://58.56.168.30:6080/arcgis/rest/services/%E9%BD%90%E9%B2%81%E4%BA%A4%E9%80%9A/%E4%B8%93%E9%A2%98%E6%9C%8D%E5%8A%A1%E5%85%A8/MapServer?f=pjson',
				type: 'GET',
				dataType: 'json',
				success:function(res){
					var data = [
					{
						text: "选择查询图层",
						nodes: [
						]
					}
					];
					for (var i = 0; i < res.layers.length; i++) {						
						data[0].nodes[i]=new Object();
						data[0].nodes[i].text=res.layers[i].name;
					};
					$('#tree').treeview({
						data: data,
						levels: 5,
						showCheckbox: true,
						backColor: '#FFFFFF',
						color: '#428BCA',
						onNodeChecked: nodeChecked,
						onNodeUnchecked: nodeUnchecked
					});
				}
			});
		    //添加图层
		    var layerArr=new Array();
		    function addGraphic(evt) {
		    	tb.deactivate();
		    	map.enableMapNavigation();
		    	var symbol;
		    	if(evt.geometry.type === "line" || evt.geometry.type === "polyline") {
		    		symbol = lineSymbol;
		    	} else {
		    		symbol = fillSymbol;
		    	}
		    	map.graphics.add(new Graphic(evt.geometry, symbol));
                //获得要查询图层ID
                var nodeArr = new Array();
                var nodeId = $('#tree').treeview('getChecked', nodeId);
                for(var i = 1; i < nodeId.length; i++) {
                	nodeArr.push(nodeId[i].nodeId - 1)
                }
                //根据查询图层ID进行查询
                for(var i = 0; i < layer.layerInfos.length; i++) {
                	if(nodeArr.length == layer.layerInfos.length){
                		var layerId = layer.layerInfos[i].id;
                		if (layerId==19||layerId==20||layerId==21) {return;} //不查询路线               		
                		featureLayer = new FeatureLayer(GJurl + "/" + layerId);
                		var query = new Query();
                		query.geometry = evt.geometry;
                		query.where = "1=1";
                		query.outFields = ["*"];
                		featureLayer.queryFeatures(query, addTips);
                	}

                	else{
                		if(nodeArr.indexOf(layer.layerInfos[i].id) > -1) {
                			var layerId = layer.layerInfos[i].id;
                			if (layerId==19||layerId==20||layerId==21) {return;}   //不查询路线
                			featureLayer = new FeatureLayer(GJurl + "/" + layerId);
                			var query = new Query();
                			query.geometry = evt.geometry;
                			query.where = "1=1";
                			query.outFields = ["*"];
                			featureLayer.queryFeatures(query, addTips);
                		}
                	}
                }
            }

		    //添加标注
		    function addTips(res) {
		    	for(var i = 0; i < res.features.length; i++) {
		    		var long = res.features[i].geometry.x;
		    		var lat = res.features[i].geometry.y;
		    		var labelPoint = new esri.geometry.Point(long, lat);
		    		var labelSymbol = new SimpleMarkerSymbol(
		    			SimpleMarkerSymbol.STYLE_CIRCLE, 7, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
		    				new Color([255, 0, 0]), 1),
		    			new Color([255, 0, 0]));
		    		//添加展示信息
		    		var infoTemplate = new esri.InfoTemplate();
		    		infoTemplate.setTitle("                     "+res.features[i]._layer.name);
		    		infoTemplate.setContent("<b>编号: </b>" + res.features[i].attributes.ROADID + "<br/>");
		    		labelGraphic = new Graphic(labelPoint, labelSymbol);
		    		labelGraphic.setInfoTemplate(infoTemplate);
		    		map.graphics.add(labelGraphic);
		    	}
		    }

		});
	</script>
</head>

<body style="overflow-x: hidden; overflow-y: hidden; width: 100%; height: 100%">
	<div id="info" style="height: 40px;padding-top: 7px;">
		<button id="Extent">Rectangle</button>
		<button id="Polygon">Polygon</button>
	</div>
	<button id="clear" style="position: absolute;left: 153px;top: 7px;">清除查询</button>
	<div class="layerSelection" style="width: 300px;height:800px;overflow-y: scroll;position: absolute;z-index: 100;right: 0;top: 0;">
		<div id="tree" ></div>
	</div>
	<div id="map"></div>
</body>

</html>

ArcGis for js——————拉框和多边形查询；

代码都贴出来了，jQuery之类的文件引入即可实现；