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

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

2017-03-15 16:49 513 查看

描述

反向地理编码确定地图上给出点的地址。本例展示了如何通过ArcGIS JavaScript API做反向地理编码。

反向地理编码和常规的地理编码请求都使用Locator类和ArcGIS Server geocode service。调用 locationToAddress方法(和常规的地理编码相反 addressToLocations)进行反向地理编码。下面的监听器捕获鼠标单击事件并为单击的点调用locationToAddress方法:

dojo.connect(map, "onClick", function(evt) {

map.graphics.clear();

locator.locationToAddress(evt.mapPoint, 100);

});

onLocationToAddressComplete事件的监听器传递最好的AddressCandidate给一个回调函数。然后回调函数结合候选的点和图形并增加到地图里。函数也使用 InfoTemplate格式化一个单击图形显示的InfoWindow。注意为了定位信息窗口，地址结果的地图点必须被转换为一个屏幕点。

var screenPnt = map.toScreen(candidate.location);

map.infoWindow.show(screenPnt,map.getInfoWindowAnchor(screenPnt));

为了保持信息窗口总是可见的，信息窗口位于锚点所在的四分之一地图的相反方向。例如，如果点位于地图右上角，信息窗口显示在点的左下方。

 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       function init() {
14
15          //创建地图并添加
16           var map = new esri.Map("map",{ extent: new esri.geometry.Extent(-95.2991, 38.9379, -95.2476, 38.963, 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           var locator = new esri.tasks.Locator("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Locators/ESRI_Geocode_USA/GeocodeServer");
21
22           //设置显示窗口的格式
23           var infoTemplate = new esri.InfoTemplate("Location","Street: ${Address}<br />City: ${City}<br />State:${State}<br />Zip:${Zip}");
24           //设置样式：圆，实心，蓝色
25           var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 15, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,255]),2), new dojo.Color([0,0,255]));
26           //
27           dojo.connect(locator,"onLocationToAddressComplete",function(candidate) {//事件的监听器
28               if (candidate.address) {
29                   var graphic = new esri.Graphic(candidate.location, symbol, candidate.address, infoTemplate);
30                   map.graphics.add(graphic);
31                   map.infoWindow.setTitle(graphic.getTitle());
32                   map.infoWindow.setContent(graphic.getContent());
33                   var screenPnt = map.toScreen(candidate.location);
34                   map.infoWindow.show(screenPnt,map.getInfoWindowAnchor(screenPnt));
35               }
36
37           });
38
39         dojo.connect(map, "onClick", function(evt) {
40         map.graphics.clear();
41         locator.locationToAddress(evt.mapPoint, 100);
42         });
43       }
44       dojo.addOnLoad(init);
45     </script>
46   </head>
47   <body class="tundra">
48     Left click on the map to get address.
49     <div id="map" style="width:1200px; height:600px; border:1px solid #000;"></div>
50   </body>
51 </html>
52
53
54

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

标签：

相关文章推荐

新的分享

章节导航