<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>坐标转换测试</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/soria/soria.css" />
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css" />
<style>
html, body, #main {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
</style>
<script src="http://js.arcgis.com/3.9/"></script>
<script>
var map, gsvc;
require(["dojo/parser", "esri/geometry/Extent", "esri/map", "esri/layers/ArcGISTiledMapServiceLayer",
"esri/SpatialReference", "esri/tasks/GeometryService", "esri/geometry/webMercatorUtils", "esri/geometry/Point",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dojo/domReady!"],
function (parser, Extent, Map, ArcGISTiledMapServiceLayer, SpatialReference, GeometryService, webMercatorUtils, Point) {
parser.parse();
map = new esri.Map("mapDiv");
var layer = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");
map.addLayer(layer);
map.setExtent(new Extent(-144.13, 7.98, -52.76, 68.89, new SpatialReference({ wkid: 4326 })));
gsvc = new GeometryService("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
map.on("click", projectToWebMercator);
function projectToWebMercator(evt) {
map.graphics.clear();
var point = evt.mapPoint;
var outSR = new SpatialReference({ wkid: 102113 });
// 利用webMercatorUtils模块转换坐标
var wm = webMercatorUtils.geographicToWebMercator(point);
// 利用我们自己的计算方法转换坐标
var we = toWebMercator(point);
gsvc.project([point], outSR, function (projectedPoints) {
pt = projectedPoints[0];
var desc1 = "通过服务得到的坐标:<br/>" + pt.x.toFixed(3) + ";" + pt.y.toFixed(3);
var desc2 = "功能函数计算的坐标:<br/>" + wm.x.toFixed(3) + ";" + wm.y.toFixed(3);
var desc3 = "自己函数计算的坐标:<br/>" + we.x.toFixed(3) + ";" + we.y.toFixed(3);
document.getElementById("spatialReference").innerHTML = desc1 + "<br/>" + desc2 + "<br/>" + desc3;
});
}
function toWebMercator(pt) {
var num = pt.x * 0.017453292519943295;
var x = 6378137.0 * num;
var a = pt.y * 0.017453292519943295;
var y = 3189068.5 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
return new Point({ "x": x, "y": y, "spatialReference": { "wkid": 102113 } });
}
});
</script>
</head>
<body class="soria">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" id="main">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="height: 60px;">
<h3>功能:投影测试</h3>
</div>
<div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
</div>
<div id="spatialReference" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right', splitter:true" style="width:200px; border:1px solid #000;"></div>
</div>
</body>
</html>