描述

本例允许用户输入一个地址，然后显示匹配的地址的位置。这通常地被称为地理编码。在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. hiho1469 - 简单dp

    题目链接 题目大意: 从一个大正方形数组里面找一个小正方形,满足其中的每个位置上的数都恰好比他的左边的那个和上边的那个大1(如果左边或上边的那个不存在的话就无此要求). 比如 1 2 32 3 43 ...

  2. C语言中的作用域、链接属性与存储属性

    C语言中的作用域.链接属性与存储属性 一.作用域(scope) 代码块作用域 表示{}之间的区域,下例所示,a可以在不同的代码块里面定义. #include<stdio.h> int ma ...

  3. php——get与post方法（转）

    file_get_contents版本: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <?php /**  * 发送p ...

  4. js邮箱，汉字，数字 表单验证

    //电子邮箱验证 function isEmail(str) { var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_ ...

  5. 3ds Max实例教程-顽皮的小孩

    本教程介绍使用3ds Max制作设计一个顽皮的小孩,这个作品的灵感来源于作者的亲身经历,也是以真实人物为原型做出来这么一个小人. 作者: Claudius Vesting 使用软件:3ds Max,P ...

  6. 在javascript中对于this指向的再次理解

    总所周知,function () {}函数体内的this对象指向的是调用该函数的对象,那么我们看一下这个例子 <script> var length = 3; function fn () ...

  7. HTTP——学习笔记（8）

    HTTP中的一些协议内容会限制某些网站的功能使用 比如,Facebook这类的社交网站,需要实时地观察到海量用户公开发布的内容,而HTTP中的以下标准就会成为瓶颈: 一条连接上只可发送一个请求 请求只 ...

  8. 对于树的序列化，用了stream，很好

    https://leetcode.com/problems/serialize-and-deserialize-binary-tree/?tab=Description 下面这个解法里面的C++部分很 ...

  9. 【Hibernate学习】 —— 抓取策略(注解方式)

    当应用程序须要在关联关系间进行导航的时候.hibernate怎样获取关联对象的策略. 抓取策略的方式: FetchType.LAZY:懒载入.载入一个实体时.定义懒载入的属性不会立即从数据库中载入. ...

  10. SQL Server 性能调优2 之索引（Index）的建立

    前言 索引是关系数据库中最重要的对象之中的一个,他能显著降低磁盘I/O及逻辑读取的消耗,并以此来提升 SELECT 语句的查找性能.但它是一把双刃剑.使用不当反而会影响性能:他须要额外的空间来存放这些 ...