• 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> 
  • 相关阅读:
    Leetcode 58. 最后一个单词的长度 双指针
    Leetcode 125. 验证回文串 双指针
    拜托,大厂做项目可不简单!
    被问懵了:一个进程最多可以创建多少个线程?
    面对祖传屎山代码应该采用的5个正确姿势
    VUE代码格式化配置vetur、eslint、prettier的故事
    如何快速实现一个虚拟 DOM 系统
    NodeJS 进程是如何退出的
    [堆][启发式合并]luogu P3261 [JLOI2015]城池攻占
    [Trie][堆]luogu P5283 [十二省联考2019]异或粽子
  • 原文地址:https://www.cnblogs.com/xiaotian-222/p/6555037.html
Copyright © 2020-2023  润新知