描述

本例允许用户输入一个地址，然后显示匹配的地址的位置。这通常地被称为地理编码。在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. 利用SignalR来同步更新Winfrom

    之前写了个用Socket来更新多个Winfrom的试例,这两天看了下SignalR,也用这个来试一下 SignalR 地址:https://www.asp.net/signalr 我这个也是基于 ht ...

  2. 路飞学城Python-Day12

    7月10日安排  完成所有函数作业和思维导图整理   [45.函数-生成器] 如果数据是有规律的,就可以先生成一个数据,等数据执行的时候再执行,也就是在真正调用数据之前,拿到数据的生成规律,而是拿到生 ...

  3. PHP XML操作类DOMDocument

    不得不自已写一个.XML 的操作一直没有用过.下面是自己搜集的XML操作类 DOMDocument相关的内容. 属性: Attributes 存储节点的属性列表(只读) childNodes 存储节点 ...

  4. PCA一些性质的定性理解

    1.通过本征向量和本征值求主成分 关系:本征值是本征向量的缩放倍数,本征值大的对应的本征向量上的样本的数目就越多:相反本征值越小的,就本征向量上的样本数量就会少.因此可以求出PCA的主成分 主成分分析 ...

  5. CF1000G Two-Paths (树形DP)

    题目大意:给你一棵树,点有点权$a_{i}$,边有边权$w_{e}$,定义一种路径称为$2-path$,每条边最多经过2次且该路径的权值为$\sum _{x} a_{x}\;-\;\sum_{e}w_ ...

  6. 【Computer Vision】角点检测和匹配——Harris算子

    一.基本概念 角点corner:可以将角点看做两个边缘的交叉处,在两个方向上都有较大的变化.具体可由下图中分辨出来: 兴趣点interest point:兴趣点是图像中能够较鲁棒的检测出来的点,它不仅 ...

  7. mariadb数据库的链接查询和表格设计

    链接查询 练习准备: --创建学生表 create table students ( id int unsigned not null auto_increment primary key, name ...

  8. 一：1.2【print&input与变量和运算符】

    [路径] 绝对路径:从根目录开始链接的路径  --->cd C:\Windows\Boot\DVD\EFI\en-US 相对路径:不从根目录开始链接的路径 ----> cd Boot\DV ...

  9. hdu 4496 并查集 逆向 并查集删边

    貌似某大犇说过 正难则反,,, 题目说要对这张图进行删边,然后判断联通块的个数,那么就可以先把所有边都删掉,之后从后往前加边,若加的边两端点不在同一个联通块中, 那么此时联通快个数少一,否则不变 #i ...

  10. Android 开发者不得不面对的六个问题

    一份关于移动应用开发的调查报告显示,Androdid开发者对谷歌的移动操作系统平台的兴趣正在下降.尽管依然有79%的开发者表示对Android “非常感兴趣”,但调查报告显示,一些迹象表明在2012到 ...