上面两篇讲解了如何实现中央子午线的计算，在该篇中我们会讲解如何实现角度到度分秒的互相转换。
侃侃而谈
角度与度分秒的转换虽然很简单，但是在测绘中是经常会用到的，说白了测绘其实就是玩坐标的，根据角度和距离推算出相应的坐标，所以角度在测绘中是超级重要的。
如果你想用Excel直接实现角度与度分秒的相互转换可以看看我之前写的《度与度分秒之间的相互转化》篇，这样你在用Excel表格计算时会比其他同学快很多，其实Excel表格中用的编程语言是VBA也算是较为简单的一种语言，如果你能用好VBA那么你就是Excel高手，那样你就能快速完成领导给的一些资料，赶快去了解VBA语法吧。
由于该篇中角度与度分秒的转换较为简单我不会做过多的说明，大家可以直接看JS代码的核心部分，你只要掌握了公式不管你用什么语言基本上都能编写出来只是需要的语法不同。
01、角度➙度分秒代码实现
因为代码中都有相应注释，这里我不会做过多的说明。你只需要在微信中任意创建一个page页面就可以编写运行，以下文件的名字只是一个参考。其中样式还是与之前第七篇的样式（centralmeridianis.wxss）一致，由于篇幅有限样式不再做过多说明。
degtodfm.wxml
<mynavbar back="true" home="true" tourl="../../../../../pageBar/component/index" color="rgba(0,0,0,.5)" titleText="角度转度分秒"></mynavbar>
<view class="header-text">
<image src="../../../../../icon/deg1.png" style=""></image> 10进制角度
</view>
<block wx:for="{{list}}" wx:key="id">
<view class="centralmerid" id="{{item.id}}">
<view class="centralmerid-border {{item.border ? 'selected-border' : '' }}">
<view class="centralmerid-left-icon">
<image class="img-icon" src="{{item.url}}"></image>
<text class="left-text">{{item.text}}</text>
</view>
<input class="{{item.border ? 'selected-border' : '' }}" type="digit" value="{{cleantext}}" bindblur="{{item.name}}" bindfocus="focusBorder" maxlength="{{item.maxlength}}"></input>
<view class="centralmerid-right-text">{{item.unit}}</view>
</view>
</view>
</block>
<!-- 计算按钮 -->
<view class="result-btn" bindtap="multipleTap">
<view class="results">
<button type="primary" style="width:90%;">计算</button>
</view>
</view>
<scroll-view class="footer" hidden="{{resultShow}}" scroll-y="true">
<view class="result-inner">
<view class="header-text close fixed-header">
<view class="close">
<image src="../../../../../icon/other.png"></image>结果
</view>
<image src="../../../../../icon/close.png" bindtap="myclose"></image>
</view>
<view class="result-inner-inner">度分秒：<text class="resultColor">{{dufenmiao}}</text> </view>
</view>
</scroll-view>
<view class="footer-text" wx:if="{{resultShow}}">
<view class="footer-text-inner">
<view class="footer-inner">小贴士：单击为计算，双击则为清空。</view>
<view class="footer-inner">我国领土跨22个3度投影带，即第24~45带。</view>
</view>
</view>
degtodfm.json
{
"usingComponents": {
"mynavbar":"../../../../../common/resources/navbar/navbar"
}
}
degtodfm.js
Page({
/**
* 页面的初始数据
*/
data: {
duValue: '',
dufenmiao: '',
selecteBorder: false,
resultShow: true,
list: [{
id: 0,
name: 'duValue',
unit: '°',
url: '../../../../../icon/ed.png',
text: "度",
border: false,
maxlength:14
}]
},
// 关闭答案
myclose() {
this.setData({
resultShow: true
})
},
// 获取度
duValue(e) {
this.setData({
duValue: e.detail.value,
'list[0].border': false
})
},
// 获取焦点后改变边框
focusBorder() {
this.setData({
'list[0].border': true
})
},
// 计算
calculations() {
var that = this
if (that.data.duValue == '') {
wx.vibrateShort() //开启震动
wx.showModal({
title: '友情提示！',
content: '请您输入值在进行计算！😂',
showCancel: false,
cancelText: "确定"
})
} else {
var duValue = Math.abs(that.data.duValue) //角度
var du = Math.floor(duValue) //度
var fen = Math.floor((duValue - du) * 60) //分
var miao = ((duValue - du) * 3600 % 60).toFixed(0) //秒四舍六入
that.setData({
resultShow: false,
dufenmiao: du + '°' + fen + '′' + miao + '″'
})
}
},
// 调用最终计算
//单击计算
multipleTap: function (e) {
var that = this
let curTime = e.timeStamp;
let lastTime = that.lastTapDiffTime;
that.lastTapDiffTime = curTime;
//两次点击间隔小于300ms, 认为是双击
let diff = curTime - lastTime;
if (diff < 300) {
clearTimeout(that.lastTapTimeoutFunc); // 成功触发双击事件时，取消单击事件的执行
that.setData({
cleantext: '',
duValue: '',
dufenmiao: ''
})
} else { //双击清空
// 单击事件延时300毫秒执行，这和最初的浏览器的点击300ms延时有点像。
that.lastTapTimeoutFunc = setTimeout(function () {
that.calculations()
}, 300);
}
}
})
其中最主要的部分为以下的部分这里实现了角度到度分秒的实现，小程序中都是用的js代码实现，你也可以用各种编程语言去实现，此处仅作为抛砖引玉。
var duValue = Math.abs(that.data.duValue) //角度
var du = Math.floor(duValue) //度
var fen = Math.floor((duValue - du) * 60) //分
var miao = ((duValue - du) * 3600 % 60).toFixed(0) //秒四舍六入
that.setData({
resultShow: false,
dufenmiao: du + '°' + fen + '′' + miao + '″'
})
02、度分秒➙角度代码实现
dfmtodeg.wxml
<mynavbar back="true" home="true" tourl="../../../../../pageBar/component/index" color="rgba(0,0,0,.5)" titleText="度分秒转角度"></mynavbar>
<view class="header-text">
<image src="../../../../../icon/deg1.png" style=""></image> 60进制角度
</view>
<block wx:for="{{list}}" wx:key="id">
<view class="centralmerid" id="{{item.id}}">
<view class="centralmerid-border {{item.border ? 'selected-border' : '' }}">
<view class="centralmerid-left-icon">
<image class="img-icon" src="{{item.url}}"></image>
<text class="left-text">{{item.text}}</text>
</view>
<input class="{{item.border ? 'selected-border' : '' }}" type="digit" value="{{cleantext}}" bindfocus="{{item.focous}}" bindblur="{{item.name}}" maxlength="{{item.maxlength}}"></input>
<view class="centralmerid-right-text">{{item.unit}}</view>
</view>
</view>
</block>
<!-- 计算按钮 -->
<view class="result-btn" bindtap="multipleTap">
<view class="results">
<button type="primary" style="width:90%;">计算</button>
</view>
</view>
<scroll-view class="footer" hidden="{{resultShow}}" scroll-y="true">
<view class="result-inner">
<view class="header-text close fixed-header">
<view class="close">
<image src="../../../../../icon/other.png"></image>结果
</view>
<image src="../../../../../icon/close.png" bindtap="myclose"></image>
</view>
<view class="result-inner-inner">角度：<text class="resultColor">{{resultDeg}}</text>°</view>
</view>
</scroll-view>
<view class="footer-text" wx:if="{{resultShow}}">
<view class="footer-text-inner">
<view class="footer-inner">小贴士：单击为计算，双击则为清空。</view>
<view class="footer-inner">我国领土跨22个3度投影带，即第24~45带。</view>
</view>
</view>
dfmtodeg.json
{
"usingComponents": {
"mynavbar":"../../../../../common/resources/navbar/navbar"
}
}
dfmtodeg.js
Page({
/**
* 页面的初始数据
*/
data: {
duValue: '',
fenValue: '',
miaoValue: '',
resultShow: true,
list: [{
id: 0,
name: 'duValue',
focous: 'dufocous',
unit: '°',
url: '../../../../../icon/ed.png',
text: "度",
maxlength: 3,
border: false
},
{
id: 1,
name: 'fenValue',
focous: 'fenfocous',
unit: '′',
url: '../../../../../icon/ed.png',
text: "分",
maxlength: 2,
border: false
},
{
id: 2,
name: 'miaoValue',
focous: 'miaofocous',
unit: '″',
url: '../../../../../icon/ed.png',
text: "秒",
maxlength: 5,
border: false
}
]
},
// 关闭答案
myclose() {
this.setData({
resultShow: true
})
},
// 当前获取焦点改变边框颜色
dufocous() {
this.setData({
'list[0].border': true
})
},
fenfocous() {
this.setData({
'list[1].border': true
})
},
miaofocous() {
this.setData({
'list[2].border': true
})
},
// 获取度
duValue: function (e) {
this.setData({
duValue: e.detail.value,
'list[0].border': false
})
},
// 获取分
fenValue: function (e) {
this.setData({
fenValue: e.detail.value,
'list[1].border': false
})
},
// 获取秒
miaoValue: function (e) {
this.setData({
miaoValue: e.detail.value,
'list[2].border': false
})
},
// 计算
calculations() {
var that = this
if (that.data.duValue == '' || that.data.fenValue == '' || that.data.miaoValue == '') {
wx.vibrateShort() //开启震动
wx.showModal({
title: '友情提示！',
content: '请您输入完整值再进行计算！😂',
showCancel: false,
cancelText: "确定"
})
} else {
var du = Number(that.data.duValue)//获取度
var fen = Number(that.data.fenValue)//获取分
var miao = Number(that.data.miaoValue)//获取秒
var resultDeg = (du + fen / 60 + miao / 3600).toFixed(9)
that.setData({
resultShow: false,
resultDeg: resultDeg
})
}
},
// 调用最终计算
//单击计算
multipleTap: function (e) {
var that = this
let curTime = e.timeStamp;
let lastTime = that.lastTapDiffTime;
that.lastTapDiffTime = curTime;
//两次点击间隔小于300ms, 认为是双击
let diff = curTime - lastTime;
if (diff < 300) {
clearTimeout(that.lastTapTimeoutFunc); // 成功触发双击事件时，取消单击事件的执行
that.setData({
cleantext: '',
duValue: '',
fenValue: '',
miaoValue: ''
})
} else { //双击清空
// 单击事件延时300毫秒执行，这和最初的浏览器的点击300ms延时有点像。
that.lastTapTimeoutFunc = setTimeout(function () {
that.calculations()
}, 300);
}
}
})
其中最主要的代码为以下部分
var du = Number(that.data.duValue)//获取度
var fen = Number(that.data.fenValue)//获取分
var miao = Number(that.data.miaoValue)//获取秒
var resultDeg = (du + fen / 60 + miao / 3600).toFixed(9)
that.setData({//提交结果改变初始数据
resultShow: false,
resultDeg: resultDeg
})
03、界面展示
如何验证我们的计算是否准确？这是编写计算类的程序都会遇到的问题，在角度与度分秒的相互转换中可以很简单的验证，你只需要把互相计算出的结果用于互相计算，如果结果一样就OK。
图 3-1 角度转度分秒
图 3-2 度分秒转角度
-END-
-预告-
以下小程序是本教程最终要开发的产品可以点击体验，下一篇为从0开发《工程测绘大师》小程序之玩转角度与弧度转换篇（十）
1420
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
