ArcGIS api for javascript——地理编码任务-地理编码地址

描述

本例允许用户输入一个地址,然后显示匹配的地址的位置。这通常地被称为地理编码。在ArcGIS JavaScript API中,使用Locator类执行地理编码。

定位器构造函数需要ArcGIS Server 地理编码服务的URL。一个地理编码服务表示一个在服务器上可用的地址定位器。本例使用ESRI sample server上的ESRI_Geocode_USA服务。可以使用服务目录来查出自己的地理编码服务的URL。

当用户单击Locate按钮,locate函数被调用。这个函数解析用户输入的地址文本到一个four-item的数组。这四个项目(地址,城市,州和邮编)相当于定义在定位器里的地址字段。可以通过查阅服务目录里的地理编码服务查出这些地址字段。例如, 这个页面显示本例使用的四个地理编码服务的地址字段。

addressToLocations方法被调用,定位器开始搜索匹配值:

locator.addressToLocations(address);

但定位器结束查找匹配值, onAddressToLocationsComplete事件的监听器调用函数showResults,该函数增加匹配度超过80的候选地址到地图。候选地址通过传递给监听器的回调函数的AddressCandidate对象数组表示。每个候选地址包含地址的位置点,关联的新的图形。

本例使用InfoTemplate定义如何将地址信息反馈给用户。匹配的地址通过几何体放置在地图上,几何体被单击时默认显示一个信息窗口。InfoTemplate定义了在信息窗口中显示的文本的格式。本例中,信息模板被定义显示匹配地址和匹配度。  

 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>Find Address</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.tasks.locator");
12 
13       var map, locator;
14 
15       function init() {
16         map = new esri.Map("map", { extent: new esri.geometry.Extent(-125, 28, -62, 45, new esri.SpatialReference({wkid:4326})) });
17         var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");
18         map.addLayer(tiledMapServiceLayer);
19 
20         locator = new esri.tasks.Locator("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Locators/ESRI_Geocode_USA/GeocodeServer");
21         dojo.connect(locator, "onAddressToLocationsComplete", showResults);// onAddressToLocationsComplete事件的监听器调用函数showResults,该函数增加匹配度超过70的候选地址到地图
22       }
23 
24       function locate() {
25         map.graphics.clear();
26         var add = dojo.byId("address").value.split(",");
27         var address = {
28           Address : add[0],
29           City: add[1],
30           State: add[2],
31           Zip: add[3]
32         };
33         locator.addressToLocations(address,["Loc_name"]);//开始搜索匹配值
34       }
35       //该函数增加匹配度超过70的候选地址到地图
36       function showResults(candidates) {
37         var candidate;
38         //简单注记样式。用于表示点和多点。 SimpleMarkerSymbol是用来显示点作为一个简单的形状,例如,一个圆圈。此外,符号可以有一个可选的轮廓。
39         var symbol = new esri.symbol.SimpleMarkerSymbol();
40         //设置信息窗口显示的格式
41         var infoTemplate = new esri.InfoTemplate("Location", "Address: ${address}<br />Score: ${score}<br />Source locator: ${locatorName}");
42         //设置样式为菱形
43         symbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND);
44         //设置颜色为红色
45         symbol.setColor(new dojo.Color([255,0,0,0.75]));
46 
47         var points =  new esri.geometry.Multipoint(map.spatialReference);
48 
49         for (var i=0, j=candidates.length; i<j; i++) {
50           candidate = candidates[i];
51           if (candidate.score > 70) {//如果匹配值大于70的话,将他加入到地图中
52             var attributes = { address: candidate.address, score:candidate.score, locatorName:candidate.attributes.Loc_name };
53             var graphic = new esri.Graphic(candidate.location, symbol, attributes, infoTemplate);
54             map.graphics.add(graphic);
55             map.graphics.add(new esri.Graphic(candidate.location, new esri.symbol.TextSymbol(attributes.address).setOffset(0, 8)));
56             points.addPoint(candidate.location);
57           }
58         }
59         map.setExtent(points.getExtent().expand(3));//用原来的基础上扩展范围
60       }
61 
62       dojo.addOnLoad(init);
63     </script>
64   </head>
65   <body class="tundra">
66     Address : <input type="text" id="address" size="60" value="380 New York St, Redlands, CA, 92373" /> <i>(Address, City, State, Zip)</i>
67     <input type="button" value="Locate" onclick="locate()" /><br />
68     <br />
69     <div id="map" style="1200px; height:600px; border:1px solid #000;"></div>
70   </body>
71 </html> 
原文地址:https://www.cnblogs.com/xiaotian-222/p/6555037.html