使用"esri/tasks/GeometryService"的project方法进行坐标转换获取坐标

我想在osm上面任意点击一个位置，获取到该位置的CGCS2000的坐标，由于osm是102100坐标系，所以需要用到坐标转换，而Esri为我们提供了一个坐标转换的功能，我们可以使用ArcGIS server中GeometryService（几何服务）有坐标转换的功能

效果图：

如果使用的不是Esri提供的GeometryService，必须将自己的GeometryService开启！！！！我就是一开始没开启，才一直报错的

一、引入模块

["esri/map", "esri/SpatialReference",
"esri/tasks/GeometryService",
"esri/tasks/ProjectParameters",
"esri/geometry/Point",
"dojo/domReady!"],
function (Map, SpatialReference, GeometryService, ProjectParameters, Point)

二、初始化地图

map = new Map("map", {
    basemap: "osm",
    center: [118.8, 32],
    zoom: 10
});

三、实例几何服务

url = "http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer";
geoservice = new GeometryService(url);

四、核心转换部分

$("#getloc").click(function () {
    //点击地图，获取evt
    map.on("click", function (evt) {
        //获取Geometry
        var point = new Point(evt.mapPoint.x, evt.mapPoint.y,new SpatialReference(102100));
        //设置转换参数
        var params = new ProjectParameters();
        //Geometry[]，可以多个点集合一起转
        params.geometries = [point];
        //SpatialReference，要转换成的坐标系
        params.outSR = new SpatialReference({ wkid: 4490 });
        //左边转换方法，添加两个回调函数（成功/失败）
        geoservice.project(params, 
            function (res) {
                //返回的其实是一个数组，因为只有一个点位置，就用下标[0]
                console.log(res[0].x, res[0].y)
            }, 
            function (err) {
                console.log(err)
            }
        );
    })
})

完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>Simple Map</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css">
    <script src="https://js.arcgis.com/3.25/"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <style>
        html, body, #map {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #txt {
            position: absolute;
            left: 60px;
            top: 25px;
            z-index: 999;
        }

        #getloc {
            position: absolute;
            top: 60px;
            left: 60px;
            z-index: 999;
        }
    </style>

</head>

<body>
    <div id="map">
        <input type="text" id="txt" />
        <input type="button" id="getloc" value="获取坐标" />
    </div>
    <script>
        var map;
        var url;
        var geoservice;
        require(["esri/map", "esri/SpatialReference",
            "esri/tasks/GeometryService",
            "esri/tasks/ProjectParameters",
            "esri/geometry/Point",
            "dojo/domReady!"], function (Map, SpatialReference, GeometryService, ProjectParameters, Point) {
                map = new Map("map", {
                    basemap: "osm",
                    center: [118.8, 32],
                    zoom: 10
                });
                url = "http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer";
                geoservice = new GeometryService(url);

                $("#getloc").click(function () {
                    //点击地图，获取evt
                    map.on("click", function (evt) {
                        //获取Geometry
                        var point = new Point(evt.mapPoint.x, evt.mapPoint.y, new SpatialReference(102100));
                        //设置转换参数
                        var params = new ProjectParameters();
                        //Geometry[]，可以多个点集合一起转
                        params.geometries = [point];
                        //SpatialReference，要转换成的坐标系
                        params.outSR = new SpatialReference({ wkid: 4490 });
                        //左边转换方法，添加两个回调函数（成功/失败）
                        geoservice.project(params, function (res) {
                            //返回的其实是一个数组，因为只有一个点位置，就用下标[0]
                            console.log(res[0].x, res[0].y)
                        }, function (err) {
                            console.log(err)
                        });
                    })
                })
            });


    </script>
</body>
</html>

使用"esri/tasks/GeometryService"的project方法进行坐标转换获取坐标

猜你喜欢