您的位置：首页 > Web前端 > JavaScript

ArcGIS api for javascript——图形-选择一个范围内的点

2017-03-13 16:44 411 查看

描述

本例展示了如何使用图形显示查询结果，如何使用draw toolbar在地图上选择图形和如何修改图形符号为“高亮”。

在地图上画一个矩形区域，加亮矩形范围内的城市。这个应用统计高亮的城市个数并列出城市名称。能够画另外一个矩形来改变高亮的城市集合。

初始的在地图上见到的城市集和是应用加载时生成的查询结果。查询找到ESRI_StatesCitiesRivers_USA地图服务的Cities layer的Washington州的所有城市。城市被加到地图的GraphicsLayer。

draw toolbar帮助用户在地图上画矩形。工具栏不是一个用户界面控件；工具栏仅仅是为了显示矩形和捕获范围保存JavaScript代码的帮助类。创建功能栏，激活绘制的类型，提供一个绘制完成时做些事情的事件监听器。在本例中，所以这些都在initToolbar函数中实现:

function initToolbar(map) {

var tb = new esri.toolbars.Draw(map);

dojo.connect(tb, "onDrawEnd", findPointsInExtent);

tb.activate(esri.toolbars.Draw.EXTENT);

当画矩形结束时回调函数findPointsInExtent被调用。这个函数循环访问地图里每个城市 graphic并确定它是否在绘制工具栏返回的范围内。如果在范围内，代码修改城市的图形为加亮符号并且增加城市信息到结果数组。结果数组被用于创建地图下面看到的城市名称列表。

注意InfoTemplate利用html在一个表格行中放置每个结果。 results.join()方法连结结果数组中的所有的元素为一个字符串。这个字符串被放置在<table>标签里面来创建一个表格。

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3   <head>
4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5     <meta http-equiv="X-UA-Compatible" content="IE=7" />
6     <title>Points in Extent</title>
7     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css">
8     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>
9     <script type="text/javascript">
10       dojo.require("esri.map");
11       dojo.require("esri.toolbars.draw");
12       dojo.require("esri.tasks.query");
13
14       //global variables
15       var map, defaultSymbol, highlightSymbol, resultTemplate;
16
17       function init() {
18         //create map, set initial extent and disable default info window behavior
19
20         //创建地图，设置初始化边界
21         map = new esri.Map("map", {
22           extent: new esri.geometry.Extent(-125.9016637859635, 44.600742276385304, -114.6516637859635, 50.225742276385304, new esri.SpatialReference({wkid:4326})),
23           showInfoWindowOnClick:false
24         });
25         dojo.connect(map, "onLoad", initToolbar);
26         map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));
27
28         //initialize symbology
29         defaultSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0,0,255]));
30         highlightSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([255,0,0]));
31
32         //initialize & execute query
33         var queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0");
34         var query = new esri.tasks.Query();
35         query.where = "STATE_NAME = 'Washington'";
36         query.returnGeometry = true;
37         query.outFields = ["CITY_NAME"];
38         queryTask.execute(query, addPointsToMap);
39
40         //info template for points returned
41         resultTemplate = new esri.InfoTemplate("City", "<tr><td>${CITY_NAME}</tr></td>");
42       }
43
44       //initialize drawing toolbar
45       function initToolbar(map) {
46       var tb = new esri.toolbars.Draw(map);
47
48         //find points in Extent when user completes drawing extent
49       dojo.connect(tb, "onDrawEnd", findPointsInExtent);
50
51         //set drawing mode to extent
52       tb.activate(esri.toolbars.Draw.EXTENT);
53       }
54
55       //add points to map and set their symbology + info template
56       function addPointsToMap(featureSet) {
57         var features = featureSet.features;
58         for (var i=0, il=features.length; i<il; i++) {
59           map.graphics.add(features[i].setSymbol(defaultSymbol).setInfoTemplate(resultTemplate));
60         }
61       }
62
63       //find all points within argument extent
64       function findPointsInExtent(extent) {
65         var graphics = map.graphics.graphics;
66         var results = [];
67         var graphic;
68         for (var i=0, il=graphics.length; i<il; i++) {
69           graphic = graphics[i];
70
71           //if point is contained within extent, highlight it and add for display in results list
72           if (extent.contains(graphic.geometry)) {
73             graphic.setSymbol(highlightSymbol);
74             results.push(graphic.getContent());
75           }
76           //else if point was previously highlighted, reset its symbology
77           else if (graphic.symbol == highlightSymbol) {
78             graphic.setSymbol(defaultSymbol);
79           }
80         }
81
82         //display number of points in extent
83         dojo.byId("inextent").innerHTML = results.length;
84
85         //display list of points in extent
86         dojo.byId("results").innerHTML = "<table><tbody>" + results.join("") + "</tbody></table>";
87       }
88
89       dojo.addOnLoad(init);
90     </script>
91
92   </head>
93   <body class="tundra">
94     Draw an Extent on the map to find all points within this extent
95
96     <!-- map div -->
97     <div id="map" style="width:800px; height:400px; border:1px solid #000;"></div>
98     <br />
99
100     <!-- display number of points in drawn extent -->
101     <b># of points in extent = <span id="inextent">0</span></b>
102
103     <!-- list points in extent -->
104     <div id="results" style="width:400px; height:200px; border:1px solid #000; overflow:auto;">
105     </div>
106   </body>
107 </html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航