arcgis-api-for-js-之参考系统的转换

1. 前言

对于简单的参考系统的转换，例如从地理坐标系统到 Web 墨卡托投影坐标系统，可以直接使用 "esri/geometry/webMercatorUtils" 模块中的功能函数即可，对于复杂的参考系统的转换，可以调用服务器的几何对象服务（esri/tasks/GeometryService），几何对象服务的 project 方法可用于实现投影或者投影转换。
下面通过代码来展示如何使用上面的两种方法准换，以及我们定义的公式来计算不同参考系统的坐标。

2. 实现思路

首先我们通过用户鼠标点击地图时发生的事件中的参数mapPoint 得到用户点击地图的地理位置的坐标，然后通过 webMercatorUtils 模块中的 geographicToWebMercator 方法计算该地理坐标通过投影后的坐标，同时调用我们自己的计算公式来计算投影坐标，最后调用几何对象服务的 project 方法，向服务器提交投影计算请求，要求转换的投影由第2个参数指定。当该方法执行完毕后，将调用 project 方法中指定的回调函数，这里的回调函数将3种方法得到的投影坐标分别显示在右侧的信息框中。

3. 代码如下

        var map,gsvs;
        require(["esri/geometry/Extent", "esri/map", "esri/layers/ArcGISTiledMapServiceLayer",
                "esri/SpatialReference", "esri/tasks/GeometryService", "esri/geometry/webMercatorUtils", "esri/geometry/Point",
                "dojo/domReady!"],
            function (Extent, Map, ArcGISTiledMapServiceLayer, SpatialReference, GeometryService, webMercatorUtils, Point) {
            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,
//                设置地理坐标系为WGS84
                new SpatialReference({ wkid: 4326 })));
//            调用服务器的几何对象服务
//            表示GeometryService的ArcGIS Server REST资源的URL https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer。有关构建URL的更多信息，请参阅ArcGIS Services目录

                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 } });
                }
            });

4. 代码解析

首先我们通过 map 对象的setExtent 方法进行设置显示的范围以及投影坐标，为下面代码：

            map.setExtent(
//                设置显示范围
                new Extent(-144.13, 7.98, -52.76, 68.89,
//                设置地理坐标系为WGS84
                new SpatialReference({ wkid: 4326 })));

然后创建一个GeometryService对象。其中 URL 是必需的参数。表示GeometryService的ArcGIS Server REST资源的URL
https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer。有关构建URL的更多信息，可以查看ArcGIS Services目录。
然后给地图添加 click 事件，并执行 projectToWebMercator 函数，projectToWebMercator 函数中，首先利用事件参数的 mapPoint 得到用户在地图点击位置的地理坐标，然后创建一个SpatialReference 空间参考对象，需要我们前面所介绍的 ID ，然后进行坐标转换，代码如下：

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;
                    });
                }

其中利用webMercatorUtils模块转换坐标调用他的geographicToWebMercator 方法，将几何体从地理单位转换为Web墨卡托单位。需要传入的参数为，需要转换的坐标。
利用服务器的几何对象服务进行转换时，调用几何对象服务的 project 方法，向服务器提交投影计算请求，其中 project 方法的原型为project(params, callback?, errback?)，第一个参数为投影参数，可以设置需要转换的点的数组，以及转换的坐标，第二个为方法完成后调用的函数，第三个参数为执行错误时返回的信息。我们在回调函数中将计算的结果显示在右侧的 div 中。
最后就是我们自己函数计算的坐标，代码：

return new Point({ "x": x, "y": y, "spatialReference": { "wkid": 102113 } });

其中 Point 类的构造函数如下：

require([
  "esri/geometry/Point", "esri/SpatialReference", ... 
], function(Point, SpatialReference, ... ) {
  new Point(-118.15, 33.80, new SpatialReference({ wkid: 4326 }));
  ...
});

我们把计算后的值然后通过 Point 类的构造函数中将地图单位中一个点的X坐标、地图单位中一个点的Y坐标。以及几何的空间参考。返回一个新的Point对象显示在右侧的转换信息中。

其中toFixed(3)把数字转换为字符串，结果的小数点后有指定位数的数字。

5. 实现效果

这里写图片描述

参考网址：
https://developers.arcgis.com/javascript/3/jsapi/esri.geometry.webmercatorutils-amd.html#geographictowebmercator
https://developers.arcgis.com/javascript/3/jsapi/spatialreference-amd.html#spatialreference2