描述

本例允许用户输入一个地址，然后显示匹配的地址的位置。这通常地被称为地理编码。在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. GatewayWorker 版本升级过程和注意点

    公司开发用到WorkerMan框架,开发RPC服务,用于拉取用户信息和协助用户注册. workman 官网:http://www.workerman.net/workerman 老版本: worker ...

  2. python对比图片

    通过python的PIL模块可以对比两张图片是否相同,具体源码如下 from PIL import Image from PIL import ImageChops def compare_image ...

  3. Session与Token认证机制 前后端分离下如何登录

     字号 1 Web登录涉及到知识点 1.1 HTTP无状态性 HTTP是无状态的,一次请求结束,连接断开,下次服务器再收到请求,它就不知道这个请求是哪个用户发过来的.当然它知道是哪个客户端地址发过来的 ...

  4. PHP通过DOM操作XML

    PHP XML操作类DOMDocument属性及方法 注意大小写一定不能弄错. 属性: Attributes 存储节点的属性列表(只读) childNodes 存储节点的子节点列表(只读) dataT ...

  5. sql 技巧

    1.想把一张表的 某个字段或多个字段 的 所有数据 复制到另外一张表里  insert into 表名(字段) select (字段) from 表名 2.from Users u , IN(u.ro ...

  6. 如何在ssh远程linux服务器时不需要输入密码

    目的: 期望A服务器在对B服务器执行ssh或者scp等命令的时候不需要输入密码 实现方法: 1.通过安装sshpass服务 2.通过密钥验证的方式 操作过程: 一.通过sshpass的方式达到密码非交 ...

  7. 紫书 例题 11-5 UVa 10048 （Floyd求最大权值最小的路径）

    这道题是Floyd的变形 改成d[i][j] = min(d[i][j], max(d[i][k], d[k][j]))就好了. #include<cstdio> #include< ...

  8. CodeForces 52B Right Triangles 矩阵上的计数

    题目链接:点击打开链接 题意: 问有多少个与矩阵边平行的直角三角形.且三角形的3个顶点都是* 对于 L形 或者_| 形的三角形.我们仅仅须要知道在_ 上方有多少个*就可以,下底边则任取2个 所以用l[ ...

  9. Linux 文件系统初步

         在Linux系统中,假设我们想要知道一个文件的详细信息,那么最简便的方法自然就是ls命令了.例如以下图所看到的:当在shell输入命令"ls -l old"时,在下方就会 ...

  10. spark 类标签的稀疏 特征向量

    一个向量(1.0,0.0,3.0)它有2中表示的方法 密集:[1.0,0.0,3.0]    其和一般的数组无异 稀疏:(3,[0,2],[1.0,3.0])     其表示的含义(向量大小,序号,值 ...