使用HTML5定位的经纬度来实现ArcGIS API for js 中的定位
文章目录
- 前言
- 一、arcgis api定位
- 二、HTML5+Arcgis JS实现定位
-
- 2.1 利用HTML5获取当前位置的经纬度
- 2.2 点击按钮执行定位
- 2.3 全部代码
- 总结
前言
定位功能的实现方法有很多：
- 使用arcgis api for js中自带的api
- 使用HTML5中的定位来获取当前位置的经纬度，结合arcgis api 实现定位功能
- 使用其他api获取当前位置，如百度、谷歌。
本文使用arcgis api实现定位功能；同时使用HTML5+arcgis api实现定位功能。
提示：以下是本篇文章正文内容，下面案例可供参考
一、arcgis api定位
直接调用arcgis官方api实现定位功能：这个很简单，直接new 一个LocateButton对象，调用startup方法即可，代码如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Locationtitle>
<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 全部代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Locationtitle>
<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">locationByHTMLbutton>
body>
html>
总结
两种方式均实现了定位。