上一篇我们讲了如何实现3°带中央子午线的计算。在该篇中我们会讲如何实现6°带中央子午线的计算，其实6°带的计算和3°带的计算程序设计差别不是太大，我们只需改一下公式即可。
侃侃而谈
为了做这个小程序其实我尝试着在网上找了很多关于测绘计算相关的资料，但是你会发现网上基本上找不到跟测绘相关计算的程序，即使有也基本上是需要付钱买的，买了有可能也没有你需要的程序。
所以干脆还是决定自己做，因为做了所以你也才能看见今天的这个小程序，虽然目前功能并不是很多，但也一直在完善中，希望每次都有一定的突破，能带给大家更实用的一些功能，快速解决繁琐的计算。
如果计算有错误的地方大家可以通过公众号或者小程序的客服联系到我，我会第一时间纠正。如果你也想加入《工程测绘大师》小程序的开发，我也很乐意我们一起去维护，如果你有意向可以通过我的邮箱：2446875775@qq.com联系到我。所有强大的应用都是几个人一点一滴开发出来的，也许我不能解决的问题恰好你能解决，节省了更多的时间，更快的帮助更多的人解决了计算繁琐的问题，何乐而不为呢。
01、公式
基本概念
6度带：从零度子午线开始，每隔经差6度自西向东分带，依次编号1，2，3，…，60，每带中间的子午线称为轴子午线或中央子午线，各带相邻子午线叫分界子午线。东经06度为第一带，其中央经线的经度为东经3度，东经612度为第二带，其中央经线的经度为9度，以此类推。我国领土跨11个6度投影带，即第13~23带。[1]
3°带公式
6度带：带号N=round[(L+3)/6]，即对(L+3)/6的值四舍五入取整数，L为当地经度；则中央子午线经度L0=6 × N-3。你也会发现根据这个公式去计算，答案永远算不对，正确的计算方法请看centralmeridiancounter.js中的计算代码。
02、代码实现
因为代码中都有相应注释，这里我不会做过多的说明。你只需要在微信中任意创建一个page页面就可以编写运行，以下文件的名字只是一个参考。
centralmeridiancounter.wxml
<mynavbar back="true" home="true" tourl="../../../../../pageBar/component/index" color="rgba(0,0,0,.5)" titleText="6°带计算"></mynavbar>
<view class="header-text">
<image src="../../../../../icon/deg1.png"></image> 经度L
</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">中央子午线经度(L₀)：<text class="resultColor"> {{radial}}</text></view>
<view class="result-inner-inner">带号(N)：<text class="resultColor">{{daihao}}</text></view>
<view class="result-inner-inner">经度范围：<text class="resultColor">{{longitudeStart}}</text> ~ <text class="resultColor">{{longitudeEnd}}</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">一悲一喜一惘然，一草一木一红颜。</view>
</view>
</view>
centralmeridiancounter.wxss
/* 内容填充滚动 */
.mycontent-fill {
width: auto;
height: 410rpx;
}
/* 头部程序描述 */
.header-text {
height: 90rpx;
padding: 10rpx 20rpx 10rpx;
box-sizing: border-box;
display: flex;
align-items: center;
}
/* 关闭按钮 */
.close {
display: flex;
justify-content: space-between;
align-items: center;
}
/* 固定头部 */
.fixed-header {
width: 100%;
position: fixed;
background-color: #fff;
}
/* 头部主图标 */
.header-text image {
width: 64rpx;
height: 64rpx;
margin-right: 10rpx;
}
/* 输入框列表 */
.centralmerid {
padding: 0 10rpx 0 20rpx;
box-sizing: border-box;
}
/* 输入框列表内容 */
.centralmerid-border {
display: flex;
justify-content: center;
align-items: center;
transition: .2s linear;
opacity: .6;
box-sizing: border-box;
}
/* 让输入框外边的整体内容选中后透明度为1 */
.centralmerid-border.selected-border {
opacity: 1;
}
/* 输入框 */
.centralmerid-border input {
flex: 1;
width: 500rpx;
height: 100rpx;
margin-left: 16rpx;
margin-right: 16rpx;
border-bottom: 1rpx solid rgb(163, 163, 163);
transition: .2s linear;
opacity: .6;
}
/* 输入框选中后效果 */
.centralmerid-border input.selected-border {
border-bottom: 1px solid #07c160;
opacity: 1;
}
/* 输入框左边的图标 */
.centralmerid-border .centralmerid-left-icon .img-icon {
width: 51rpx;
height: 51rpx;
}
/* 输入框左边内容 */
.centralmerid-border .centralmerid-left-icon {
flex: 0 0 150rpx;
display: flex;
justify-content: center;
align-items: center;
}
/* 输入框左边的文字 */
.centralmerid-border .centralmerid-left-icon .left-text {
font-weight: bold;
}
/* 输入框右边内容 */
.centralmerid-border .centralmerid-right-text {
flex: 0 0 60rpx;
display: flex;
justify-content: center;
align-items: center;
}
/* 计算 */
.result-btn {
width: 100%;
position: fixed;
left: 0;
bottom: 280rpx;
z-index: 1000;
}
.result-btn button{
box-shadow: 0rpx 0rpx 2rpx 6rpx #eee;
}
.results {
width: 100%;
}
/* 计算结果列表 */
.footer {
width: 100%;
height: 532rpx;
position: fixed;
left: 0;
bottom: 0;
border-top: 1px solid #eee;
box-sizing: border-box;
box-shadow: -10rpx 0rpx 10rpx 5rpx #eee;
background-color: #fff;
z-index: 1000;
}
/* 知识点 */
.footer-inner {
padding: 20rpx 10rpx 20rpx;
text-align: center;
opacity: .5;
}
.result-inner-inner {
padding: 20rpx 20rpx 20rpx;
box-sizing: border-box;
font-size: 36rpx;
}
.result-inner-inner:nth-child(2){
padding-top: 44px;
}
/* 全局输出结果颜色 */
.resultColor {
color: #07c160;
}
/* 全局点击后背景颜色 */
.coord-hover-bg-color {
background-color: #eee;
}
/* 最底部的文字 */
.footer-text{
width: 100%;
position: fixed;
left: 0;
bottom: 0;
display: flex;
justify-content: center;
flex-direction: column;
background-color: #eee;
border: 1px solid #eee;
box-sizing: border-box;
}
centralmeridiancounter.json
注：这里的组件目前还没有写出来，这个组件后续会在“微信小程序玩转自定义头部导航栏（各种机型完美适配版）”中进行说明。
{
"usingComponents": {
"mynavbar":"../../../../../common/resources/navbar/navbar"
}
}
centralmeridiancounter.js
Page({
/**
* 页面的初始数据
*/
data: {
duValue: '',
fenValue: '',
miaoValue: '',
results: '',
radial: '',
daihao: '',
cleantext:'',
selecteBorder: false,
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: function () {
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 deg = du + fen / 60 + miao / 3600 //度
var daihao = parseInt((deg / 6) + 1)
that.setData({
resultShow: false,
radial: (6 * daihao) - 3, //中央子午线
daihao: daihao,//带号
longitudeStart: (6 * daihao) - 6, //经度起始范围
longitudeEnd: (6 * daihao)
})
}
},
// 调用最终计算
//单击计算
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: '',
niaoValue: '',
results: '',
radial: '',
daihao: ''
})
} else { //双击清空
// 单击事件延时300毫秒执行，这和最初的浏览器的点击300ms延时有点像。
that.lastTapTimeoutFunc = setTimeout(function () {
that.calculations()
}, 300);
}
}
})
03、界面展示
图3-1 点击微信开发者工具–>预览—>打开微信扫一扫二维码测试
图3-2 开发现场
参考：
[1]：6°带基本概念（百度百科）
-END-
-预告-
以下小程序是本教程最终要开发的产品可以点击体验，下一篇为从0开发《工程测绘大师》小程序之玩转角度与弧度转换篇（九）
6650
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
