投影一个点

摘自http://www.mapgx.com/Portal/api/JS/help/jssamples/util_project.html

 

查看在线示例

描述

本例展示了如何用多个坐标系统查找一个点的坐标。在地图上单击一个点查看它的坐标（WGS 1984 Web Mercator投影坐标系统）。看到的这个坐标需要一个投影因为从鼠标单击得到的点的地理坐标（经度和纬度）。能够通过单击信息窗口上的按钮投影这个坐标回到地理坐标。

投影使用 ArcGIS Server几何服务实现。这个服务类型是在ArcGIS Server 9.3增加的，可以用使用几何服务在JavaScript应用中缓冲，投影和简化几何体。这行代码创建了几何服务:

gsvc = new esri.tasks.GeometryService("http://sampleserver1a.arcgisonline.com/arcgis/rest/services/Geometry/GeometryServer");

能使用服务目录查出自己的几何服务的URL。由于服务的名称必须是Geometry，因此URL和这个极其相似。

当单击点时间到的窗口是一个信息窗口。信息窗口通过InfoTemplate进行格式化，能够包含HTML，因此可以在信息窗口里面放置按钮。注意空的ID = 'latlong'的DIV被放在信息模板中。如果单击按钮将坐标转回经纬度，这个DIV被填充。

代码

 1  <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
 2  < html >
 3    < head >
 4      < meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8" />
 5      < meta  http-equiv ="X-UA-Compatible"  content ="IE=7"   />
 6    < title >Project a point </ title >
 7 
 8    < link  rel ="stylesheet"  type ="text/css"  href ="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css" >
 9    < script  src ="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"  type ="text/javascript" ></ script >
10 
11    < script  type ="text/javascript" >
12      dojo.require( " esri.map " );
13      dojo.require( " esri.tasks.geometry " );
14 
15       var  map  =   null ;
16       var  gsvc  =   null ;
17       var  pt  =   null ;
18 
19       function  initialize() {
20        map  =   new  esri.Map( " map " );
21         var  layer  =   new  esri.layers.ArcGISTiledMapServiceLayer( " http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer " );
22        map.addLayer(layer);
23        map.setExtent( new  esri.geometry.Extent( - 144.13584773952124 ,  7.981485927970198 ,  - 52.76454682003924 ,  68.8956865409582 ,  new  esri.SpatialReference({wkid:  4326 })));
24 
25        gsvc  =   new  esri.tasks.GeometryService( " http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer " );
26        dojo.connect(map,  " onClick " , projectToWebMercator);
27      }
28 
29       function  projectToWebMercator(evt) {
30        map.graphics.clear();
31         var  point  =  evt.mapPoint;
32         var  symbol  =   new  esri.symbol.SimpleMarkerSymbol().setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND);
33         var  graphic  =   new  esri.Graphic(point, symbol);
34         var  outSR  =   new  esri.SpatialReference({ wkid:  102113 });
35        map.graphics.add(graphic);
36 
37        gsvc.project([ graphic ], outSR,  function (features) {
38          pt  =  features[ 0 ].geometry;
39          graphic.setInfoTemplate( new  esri.InfoTemplate( " Coordinates " ,
40             " <p>&nbsp;X:  "   +  pt.x  +
41             " <br/>&nbsp;Y:  "   +  pt.y  +
42             " </p> "    +
43             " <input type='button' value='Convert back to LatLong' onclick='projectToLatLong();' /> "   +
44             " <div id='latlong'></div> " ));
45          map.infoWindow
46            .setTitle(graphic.getTitle())
47            .setContent(graphic.getContent())
48            .show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
49        });
50      }
51 
52       function  projectToLatLong() {
53         var  symbol  =   new  esri.symbol.SimpleMarkerSymbol();
54         var  graphic  =   new  esri.Graphic(pt, symbol);
55         var  outSR  =   new  esri.SpatialReference({ wkid:  4326 });
56 
57        gsvc.project([ graphic ], outSR,  function (features) {
58          pt  =  features[ 0 ].geometry;
59          dojo.byId( " latlong " ).innerHTML  =   " &nbsp;Latitude =  "   +  pt.y  +   " <br/>&nbsp;Longitude =  "   +  pt.x;
60        });
61      }
62 
63      dojo.addOnLoad(initialize);
64     </ script >
65 
66  </ head >
67 
68  < body  class ="tundra" >
69    < b >Click a location on the map to Project from LatLng -> Web Mercator: </ b >
70    < div  id ="map"  style ="width:600px; height:400px; border:1px solid #000;" ></ div >
71  </ body >
72 
73  </ html >