经纬网和地图的理论总结（OpenlayersGPS度分秒）
在地图开发过程中，尤其是涉及手持设备，有时会遇到GPS原始坐标数据（116°23’28.44",39°54’25.77"），为了方便使用，需要转换为经纬度（116.39123,39.9071583），今天小编就来说说关于经纬网和地图的理论总结?下面更多详细答案一起来看看吧!
经纬网和地图的理论总结
openlayers教程在地图开发过程中，尤其是涉及手持设备，有时会遇到GPS原始坐标数据（116°23’28.44",39°54’25.77"），为了方便使用，需要转换为经纬度（116.39123,39.9071583）。
这里介绍一下GPS坐标和经纬度坐标互转。
OpenLayers GPS（度分秒）和经纬度坐标相互互转换
<html lang="en">
<head>
<meta charset="utf-8">
<!--注意：openlayers 原版的比较慢，这里引起自己服务器版-->
<link rel="stylesheet" href="http://openlayers.vip/examples/css/ol.css" type="text/css">
<style>
/* 注意：这里必须给高度，否则地图初始化之后不显示；一般是计算得到高度，然后才初始化地图 */
.map {
height: 400px;
width: 100%;
float: left;
}
</style>
<!--注意：openlayers 原版的比较慢，这里引起自己服务器版-->
<script src="http://openlayers.vip/examples/resources/ol.js"></script>
<script src="./tiandituLayers.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>Feature transfer</h2>
<!--地图容器，需要指定 id -->
<div id="map" class="map"></div>
<!--注意：本示例将 高德腾讯坐标设置为黑色；将百度坐标设置为黄色 -->
<!--注意：本示例将 高德腾讯坐标转为WGS84颜色设置为粉色；将百度坐标转为WS84颜色设置为绿色 -->
<script type="text/javascript">
var map = new ol.Map({
// 地图容器
target: 'map',
// 地图图层，比如底图、矢量图等
layers: [
getIMG_CLayer(),
getIBO_CLayer(),
getCIA_CLayer(),
],
// 地图视野
view: new ol.View({
projection: "EPSG:4326",
// 定位
center: [116, 39],
// 缩放
zoom: 4,
maxZoom: 18,
minZoom: 1,
})
});
var xy = [116.391232637988, 39.907157016256974];
// 初始点
var originPoint = new ol.Feature({
geometry: new ol.geom.Point(xy),
name: 'My Point'
});
// 矢量图层
var layer = initVectorLayer();
/**
* @todo 矢量图层
* @returns {VectorLayer}
* @constructor
*/
function initVectorLayer() {
//实例化一个矢量图层Vector作为绘制层
let source = new ol.source.Vector();
//创建一个图层
let customVectorLayer = new ol.layer.Vector({
source: source,
zIndex: 2,
//设置样式
style: new ol.style.Style({
//边框样式
stroke: new ol.style.Stroke({
color: 'red',
width: 5,
lineDash: [3, 5]
}),
//填充样式
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.3)',
}),
image: new ol.style.Circle({
radius: 9,
fill: new ol.style.Fill({
color: 'red',
})
})
}),
});
//将绘制层添加到地图容器中
map.addLayer(customVectorLayer);
customVectorLayer.getSource().addFeatures([originPoint]);
var extent = customVectorLayer.getSource().getExtent();
map.getView().fit(extent, {
duration: 1,//动画的持续时间,
callback: null,
});
return customVectorLayer;
}
/**
* 添加点到地图
* @param geom
* @param color 颜色
* @returns {Feature|Feature|null}
*/
function addFeature(geom, color) {
let temp = new ol.Feature({
geometry: new ol.geom.Point(geom),
name: 'My Point'
});
let style = new ol.style.Style({
image: new ol.style.Circle({
radius: 9,
fill: new ol.style.Fill({
color: color || 'blue',
})
})
});
temp.setStyle(style);
layer.getSource().addFeatures([temp]);
move();
return temp;
}
//============转换方法 start ===================================================================================
/**
* 度分秒转经纬度
* @param dfm
* @returns {number}
*/
function convertGPSToXY(dfm) {
const arr1 = dfm.split('°');
const d = arr1[0];
const arr2 = arr1[1].split("'")
let f = arr2[0] || 0;
const m = arr2[1].replace('"', '') || 0;
f = parseFloat(f) parseFloat(m / 60);
var du = parseFloat(f / 60) parseFloat(d);
return du;
}
/**
* 经纬度转度分秒
* @param point
* @returns {*}
*/
function convertXYToGPS(point) {
let xy;
if (point instanceof Array) {
xy = point;
} else {
point = point "";
xy = point.split(',');
}
let dPoint = [];
let dPointStr = "";
for (let i = 0; i < xy.length; i ) {
const mElement = xy[i] "";
const arr1 = mElement.split(".");
const d = arr1[0];
let tp = "0." arr1[1]
tp = String(tp * 60); //这里进行了强制类型转换
const arr2 = tp.split(".");
const f = arr2[0];
tp = "0." arr2[1];
tp = tp * 60;
const m = tp.toFixed(2);
const dfm = d "°" f "'" m "\"";
dPointStr = "," dfm;
dPoint.push(dfm);
}
dPointStr = dPointStr.replace(',', '');
return point instanceof Array ? dPoint : dPointStr;
}
var gps;
/**
* @todo gps坐标转为WKT格式
*/
function GPSToXY() {
if (!gps) {
alert("请先点击 XY坐标转为GPS坐标！");
return;
}
// 参数包含x和y，并且以 , 拼接
if (gps instanceof Array) {
alert("XY数组：" [convertGPSToXY(gps[0]), convertGPSToXY(gps[1])]);
// 参数只有x或者y
} else {
alert("X或Y：" convertGPSToXY(gps));
}
}
/**
* @todo WKT坐标转为gps格式
*/
function XYToGPS() {
// 获取坐标
// var point = xy;
var point = originPoint.getGeometry().getCoordinates();
gps = convertXYToGPS(point);
alert("gps数组：" gps);
}
//===========转换方法 end ====================================================================================
</script>
<button id="WKTToGPS" onclick="XYToGPS()">XY坐标转为GPS坐标</button>
<button id="GPSToWKT" onclick="GPSToXY()">GPS坐标转为XY坐标</button>
</body>
</html>
在线示例
Openlayers GPS（度分秒）和经纬度坐标相互互转换：OpenLayers example
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
