描述

本例允许用户输入一个地址，然后显示匹配的地址的位置。这通常地被称为地理编码。在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定义了在信息窗口中显示的文本的格式。本例中，信息模板被定义显示匹配地址和匹配度。

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

 <html>

   <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <meta http-equiv="X-UA-Compatible" content="IE=7" />

     <title>Find Address</title>

     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css">

     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>

     <script type="text/javascript">

       dojo.require("esri.map");

       dojo.require("esri.tasks.locator");

       var map, locator;

       function init() {

         map = new esri.Map("map", { extent: new esri.geometry.Extent(-125, 28, -62, 45, new esri.SpatialReference({wkid:4326})) });

         var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");

         map.addLayer(tiledMapServiceLayer);

         locator = new esri.tasks.Locator("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Locators/ESRI_Geocode_USA/GeocodeServer");

         dojo.connect(locator, "onAddressToLocationsComplete", showResults);// onAddressToLocationsComplete事件的监听器调用函数showResults，该函数增加匹配度超过70的候选地址到地图

       }

       function locate() {

         map.graphics.clear();

         var add = dojo.byId("address").value.split(",");

         var address = {

           Address : add[0],

           City: add[1],

           State: add[2],

           Zip: add[3]

         };

         locator.addressToLocations(address,["Loc_name"]);//开始搜索匹配值

       }

       //该函数增加匹配度超过70的候选地址到地图

       function showResults(candidates) {

         var candidate;

         //简单注记样式。用于表示点和多点。 SimpleMarkerSymbol是用来显示点作为一个简单的形状，例如，一个圆圈。此外，符号可以有一个可选的轮廓。

         var symbol = new esri.symbol.SimpleMarkerSymbol();

         //设置信息窗口显示的格式

         var infoTemplate = new esri.InfoTemplate("Location", "Address: ${address}<br />Score: ${score}<br />Source locator: ${locatorName}");

         //设置样式为菱形

         symbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND);

         //设置颜色为红色

         symbol.setColor(new dojo.Color([255,0,0,0.75]));

         var points =  new esri.geometry.Multipoint(map.spatialReference);

         for (var i=0, j=candidates.length; i<j; i++) {

           candidate = candidates[i];

           if (candidate.score > 70) {//如果匹配值大于70的话，将他加入到地图中

             var attributes = { address: candidate.address, score:candidate.score, locatorName:candidate.attributes.Loc_name };

             var graphic = new esri.Graphic(candidate.location, symbol, attributes, infoTemplate);

             map.graphics.add(graphic);

             map.graphics.add(new esri.Graphic(candidate.location, new esri.symbol.TextSymbol(attributes.address).setOffset(0, 8)));

             points.addPoint(candidate.location);

           }

         }

         map.setExtent(points.getExtent().expand(3));//用原来的基础上扩展范围

       }

       dojo.addOnLoad(init);

     </script>

   </head>

   <body class="tundra">

     Address : <input type="text" id="address" size="60" value="380 New York St, Redlands, CA, 92373" /> <i>(Address, City, State, Zip)</i>

     <input type="button" value="Locate" onclick="locate()" /><br />

     <br />

     <div id="map" style="width:1200px; height:600px; border:1px solid #000;"></div>

   </body>

 </html>

ArcGIS api for javascript——地理编码任务-地理编码地址的更多相关文章

  1. ArcGIS API for JavaScript（2）-ArcGIS Server发布要素图层服务

    1.前言 上一篇该系列的文章我们主要讲了一下基础Web地图搭建,这篇我们主要讲一下ArcGIS Server发布服务,并且如何调用服务.将自己的数据加载到Web地图当中来,实现Web端浏览数据. 2. ...

  2. ArcGIS API for JavaScript介绍

    ArcGIS API for JavaScript中的类是按照模块组织的,主要包含esri.esri/geometry.esri/renderers.esri/symbols.esri/symbols ...

  3. ArcGIS API for JavaScript 4.2学习笔记[5] 官方API大章节概述与内容转译

    内容如上,截图自ESRI官网,连接:ArcGIS API for JavaScript 4.2 [Get Started] 类似于绪论一样的东西,抽取了最需要关注的几个例子.如:加载Map和View, ...

  4. ArcGIS API for JavaScript FeatureLayer服务属性编辑

    首先说一下感想吧,刚入行时感觉深似海,掉到了GIS开发的陨石大坑里了,首先是学了小半年的Flex,用到了ArcGIS API for Flex,接着又是半年的ArcEngine开发,现在终于摸到了一点 ...

  5. ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录

    放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 4.2全线基础学习请点击[直达] 4.3及更高版本的补充学习请关注我的博客. ArcGIS API for JavaScr ...

  6. ArcGIS API for JavaScript 入门教程[1] 渊源

    ->对于萌新,你可能需要了解一下这个东西是什么 ->对于已经知道要用这个东西的开发者,你可能需要了解一下它的底层机制 不针对大牛.龟速更新ing. 转载注明出处.博客园&CSDN& ...

  7. 使用Arcgis Api for Javascript 调用 本地Portal发布的WebMap

    1.环境搭建 安装Arcgis Portal 10.4,Server 10.4,DataStore ,WebAdaptor for IIS,搭建arcgis api for javascript 4. ...

  8. 基于ArcGIS API for Javascript的地图编辑工具

    最近工作上需要用ArcGIS API for Javascript来开发一个浏览器上使用的地图编辑工具,分享一下一些相关的开发经验. 我开发的地图编辑工具是根据ESRI提供的例子修改而来的,参考的例子 ...

  9. ArcGIS API for JavaScript 4.0（一）

    原文:ArcGIS API for JavaScript 4.0(一) 最近ArcGIS推出了ArcGIS API for JavaScript 4.0,支持无插件3D显示,而且比较Unity和Sky ...

  10. ArcGIS API for JavaScript开发环境搭建及第一个实例demo

    原文:ArcGIS API for JavaScript开发环境搭建及第一个实例demo ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3. ...

随机推荐

  1. img标签IE下有边距——2017/7/21

    设置css 在全局变量的是和给img标签设置 img{ border:0;} 1,img{float:left}2,img{display:block}

  2. Mybatis传递多个参数的解决办法(三种)

    第一种方案 DAO层的函数方法 Public User selectUser(String name,String area); 对应的Mapper.xml <select id="s ...

  3. 【BZOJ4826】【HNOI2017】影魔

    题意: Description 影魔,奈文摩尔,据说有着一个诗人的灵魂.事实上,他吞噬的诗人灵魂早已成千上万.千百年来,他收集了各式各样的灵魂,包括诗人.牧师.帝王.乞丐.奴隶.罪人,当然,还有英雄. ...

  4. tree编译

    没有tree命令,就需要下载源代码 [root@fyc tree-1.7.0]#cd /opt/src [root@fyc tree-1.7.0]# wget ftp://mama.indstate. ...

  5. C++容器（四）：map类型

    map 类型 map是键-值对的集合.map类型通常可以理解为关联数组:可以使用键作为下标来获取一个值,正如内置数组类型一样.而关联的本质在于元素的值与某个特定的键相关联,而非通过元素在数组内的位置来 ...

  6. Android清单文件具体解释(六) ---- &lt;activity&gt;节点的属性

    1.android:allowTaskReparenting android:allowTaskReparenting是一个任务调整属性,它表明当这个任务又一次被送到前台时,该应用程序所定义的Acti ...

  7. Datazen图表创建和公布

     Datazen是被微软收购的移动端全平台的数据展现解决方式.此篇主要介绍怎样创建和公布图表. 如前面介绍,Datazen图表的创建和公布是通过Publisher的应用,它是Windows 8应用 ...

  8. 基于IBM Bluemix的数据缓存应用实例

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:IBM® Data Cache for Bluemix 是快速缓存服务.支持 Web 和 ...

  9. hdu5371Hotaru&#39;s problem manacher算法

    //给一个序列.让求其最大子序列 //这个序列由三段组成.第一段和第二段对称,第一段和第三段一样 //manacher算法求得p[i] //枚举第二段的起点和长度,得到结果 #include<c ...

  10. Sql中把datetime转换成字符串（CONVERT）

    一.回想一下CONVERT()的语法格式: CONVERT (<data_ type>[ length ], <expression> [, style]) 二.这里注重说明一 ...