使用HTML5定位的经纬度来实现ArcGIS API for js 中的定位

最新推荐文章于 2024-05-10 22:31:13 发布

blog12138

最新推荐文章于 2024-05-10 22:31:13 发布

阅读量2.1k

点赞数 1

分类专栏： arcgis for js 3.x学习笔记文章标签： arcgisJS

本文链接：https://blog.csdn.net/Zzzpiu/article/details/109338243

版权

arcgis for js 3.x学习笔记专栏收录该内容

30 篇文章 7 订阅

订阅专栏

文章目录

前言
一、arcgis api定位
二、HTML5+Arcgis JS实现定位
总结

前言

定位功能的实现方法有很多：

使用arcgis api for js中自带的api
使用HTML5中的定位来获取当前位置的经纬度，结合arcgis api 实现定位功能
使用其他api获取当前位置，如百度、谷歌。
本文使用arcgis api实现定位功能；同时使用HTML5+arcgis api实现定位功能。

提示：以下是本篇文章正文内容，下面案例可供参考

一、arcgis api定位

直接调用arcgis官方api实现定位功能：这个很简单，直接new 一个LocateButton对象，调用startup方法即可，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Location</title>
    <script src="https://js.arcgis.com/3.34/"></script>
    <link rel="stylesheet" href="https://js.arcgis.com/3.34/esri/css/esri.css">
    <style>
        #location {
            position: absolute;
            top: 100px;
            left: 30px;
            z-index: 50;
        }
    </style>
    <script>
        require(["esri/map","esri/dijit/LocateButton","esri/graphic","esri/geometry/Point"], function (Map,LocateButton,Graphic,Point) {
            // 加载地图
            var map = new Map("mapDiv",{
                basemap: "topo",
                logo:false
            });
            //使用arcgis api实现定位，主要使用的是LocateButton控件。
            var locateButton = new LocateButton({
                map:map
            }, "location");
            locateButton.startup();
        });
    </script>
</head>
<body>
    <div id="mapDiv">
        <div id="location"></div>
    </div>
</body>
</html>

结果如下：
定位前：
在这里插入图片描述
定位后：

二、HTML5+Arcgis JS实现定位

2.1 利用HTML5获取当前位置的经纬度

代码如下（示例）：
定位：

//从HTML5上获取得到浏览器定位位置的经纬度。
            function getLocation(){
                if (navigator.geolocation){
                    navigator.geolocation.getCurrentPosition(showPosition,showError);
                }else{
                    alert("浏览器不支持地理定位。");
                }
            }

定位成功，获取定位信息：

//成功获取到定位的经纬度，利用arcgis api跳转到定位所在的位置
            function showPosition(position){
                console.log(position);
                var lat = position.coords.latitude; //纬度
                var lag = position.coords.longitude; //经度
                console.log('纬度:'+lat+',经度:'+lag);
                map.centerAndZoom(new Point(lag, lat), 12);
                map.graphics.add(new Graphic(new Point(lag, lat), new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,17,
                    new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                        new Color([255,0,0,0.75]), 1),
                    new Color([0,0,255,0.25]))));
                console.log("map-->",map);
            }

定位失败

//获取失败的回调函数
            function showError(error){
                switch(error.code) {
                    case error.PERMISSION_DENIED:
                        alert("定位失败,用户拒绝请求地理定位");
                        break;
                    case error.POSITION_UNAVAILABLE:
                        alert("定位失败,位置信息是不可用");
                        break;
                    case error.TIMEOUT:
                        alert("定位失败,请求获取用户位置超时");
                        break;
                    case error.UNKNOWN_ERROR:
                        alert("定位失败,定位系统失效");
                        break;
                }
            }

2.2 点击按钮执行定位

代码如下（示例）：

//点击定位按钮，执行获取HTML5的定位信息，并在获取成功的回调函数中进行跳转到定位位置
            document.getElementById("locationByHTML").onclick = function () {
                getLocation();
            };

2.3 全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Location</title>
    <script src="https://js.arcgis.com/3.34/"></script>
    <link rel="stylesheet" href="https://js.arcgis.com/3.34/esri/css/esri.css">
    <style>
        #location {
            position: absolute;
            top: 100px;
            left: 30px;
            z-index: 50;
        }
    </style>
    <script>
        require(["esri/map","esri/dijit/LocateButton","esri/graphic","esri/geometry/Point","esri/symbols/SimpleMarkerSymbol","esri/Color","esri/symbols/SimpleLineSymbol"], function (Map,LocateButton,Graphic,Point,SimpleMarkerSymbol,Color,SimpleLineSymbol) {
            // 加载地图
            var map = new Map("mapDiv",{
                basemap: "topo",
                logo:false
            });
            //使用arcgis api实现定位，主要使用的是LocateButton控件。
            var locateButton = new LocateButton({
                map:map
            }, "location");
            locateButton.startup();

            //从HTML5上获取得到浏览器定位位置的经纬度。
            function getLocation(){
                if (navigator.geolocation){
                    navigator.geolocation.getCurrentPosition(showPosition,showError);
                }else{
                    alert("浏览器不支持地理定位。");
                }
            }
            //成功获取到定位的经纬度，利用arcgis api跳转到定位所在的位置
            function showPosition(position){
                console.log(position);
                var lat = position.coords.latitude; //纬度
                var lag = position.coords.longitude; //经度
                console.log('纬度:'+lat+',经度:'+lag);
                map.centerAndZoom(new Point(lag, lat), 12);
                map.graphics.add(new Graphic(new Point(lag, lat), new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,17,
                    new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                        new Color([255,0,0,0.75]), 1),
                    new Color([0,0,255,0.25]))));
                console.log("map-->",map);
            }
            //获取失败的回调函数
            function showError(error){
                switch(error.code) {
                    case error.PERMISSION_DENIED:
                        alert("定位失败,用户拒绝请求地理定位");
                        break;
                    case error.POSITION_UNAVAILABLE:
                        alert("定位失败,位置信息是不可用");
                        break;
                    case error.TIMEOUT:
                        alert("定位失败,请求获取用户位置超时");
                        break;
                    case error.UNKNOWN_ERROR:
                        alert("定位失败,定位系统失效");
                        break;
                }
            }
            //点击定位按钮，执行获取HTML5的定位信息，并在获取成功的回调函数中进行跳转到定位位置
            document.getElementById("locationByHTML").onclick = function () {
                getLocation();
            };
        });
    </script>
</head>
<body>
    <div id="mapDiv">
        <div id="location"></div>
    </div>
    <button id="locationByHTML">locationByHTML</button>
</body>
</html>