描述

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

    <?php //禁用错误报告 error_reporting(0); //报告运行时错误 error_reporting(E_ERROR | E_WARNING | E_PARSE); //报告 ...

  2. oc消息转发机制本质

    第一级转发:主体不变,动态添加对应函数: 第二级转发:函数不变,切换接收主体: 第三极转发:函数签名不变,主体和函数都有可能变化: 1.使用函数的动态添加技术: 2.使用的类似is-a swzzing ...

  3. TP5 分页类，自定义样式

    结合X-admin 后台框架 在做项目,为了保持分页风格的一致,所以需要自定义 一个分页类. 一.在项目的 extend 目录,创建 cus 目录 二.创建 Page 分页类,代码如下 <?ph ...

  4. ueditor 编辑器，自定义图片上传

    <div> <h1>完整demo</h1> <form method="post" name="form"> & ...

  5. 【转载】spring boot 链接 虚拟机（Linux） redis

    原文:https://www.imooc.com/article/43279?block_id=tuijian_wz 前提是你已经安装redis且支持远程连接,redis的安装这里不再赘述,有需要的可 ...

  6. C指针思考-(1)

    首先记录下时间吧,@2016-08-18 23:26:22,这段时间看了同事的3本经典的书,<c缺陷和陷阱>,<c和指针>和<c专家编程>,感觉指针说的最多,多多少 ...

  7. caioj 1155 同余方程组(模版)

    第一步,和同余方程一样,转化一下 两式相减得 这就转化为了求不定方程,用exgcd 求出x,要化成最小正整数解,避免溢出 然后可以求出P出来. 这个时候要把前两个式子转化成一个式子 设求出来的是P' ...

  8. [luogu]P4364 [九省联考2018]IIIDX

    题目背景 Osu 听过没?那是Konano 最喜欢的一款音乐游戏,而他的梦想就是有一天自己也能做个独特酷炫的音乐游戏.现在,他在世界知名游戏公司KONMAI 内工作,离他的梦想也越来越近了. 这款音乐 ...

  9. myssql数据库表名转驼峰 - PLAY - ITeye博客

    原文:myssql数据库表名转驼峰 - PLAY - ITeye博客

  10. Java 8 Stream API具体解释

    Java 8 Stream API具体解释 一.Stream API介绍 Java 8引入了全新的Stream API,此Stream与Java I/O包里的InputStream和OutputStr ...