从0开发《工程测绘大师》小程序之3°带中央子午线计算篇（七）

实际上，恒心也是一种修为，是可以通过对自己的认识和了解去挖掘培养的。

上一篇我们讲了如何实现测绘程序的列表页。终于到了测绘程序的设计阶段，前面说了那么多感觉大部分都是一些比较基础的东西，说的东西都比较杂七杂八的。

侃侃而谈

一开始我信誓旦旦的准备做这个小程序其实还是遇到了很多问题，如当前输入值的获取、如何将输入的值按需要格式进行分割、如何更好的保留规定的小数位数、如何四舍六入等等等。

不过这些问题都已全部解决，因为这些相对来说都是比较简单的问题。你不要指望程序设计不会遇到你解决不了的问题，相反它每天都会让你痛不欲生、苦不堪言、头皮发麻的状态，当你遇到解决不了的问题时你会一直想解决这个问题，当你解决不了这个问题的时候你的心理就会有一种挫败感。

幸好我们都像是一只打不死得小强一般，屡败屡战，屡战屡败。这几天其实我每天都会拿出两个小时的时间来完善《工程测绘大师》这个小程序，但是这几天一直卡在了如何获取不确定输入框的这个问题上，比如说符合导线我们不确定有几个测站，所以我们必须让用户自己添加每一个测站。

那这里就遇到了一个问题，因为数据时动态添加的，我们无法获取到当前用户输入的值，即使能获取到你也没有办法在计算的时候准确的获取到，不过后续都会解决的。其实说这个我只想说明一点，做程序设计你每分每秒都有可能遇到各种问题，而且有可能好几天你都解决不了这个问题，所以想要做程序设计必须要有超级强耐心和毅力不然你会觉得寸步难行的感觉，当然话说回来你应该庆幸你遇到了这样的问题，因为这种问题一旦解决你就会更加自信更加有动力走下去。

好了进入今天的正题吧，中央子午线的计算其实应该算是测绘计算里面特别简单的计算了，这里面最需要注意的地方是取整（INT），如果这里处理好了就没有太大问题了。

01、公式

基本概念

3度带：以6度带的中央子午线和分界子午线为其中央子午线，即自东经1.5度子午线起，每隔经差3度自西向东分带，依次编号1，2，3，…，120。东经1.5_{4.5度为第一带，其中央经线的经度为东经3度，东经4.5}7.5度为第二带，其中央经线的经度为6度，以此类推。我国领土跨22个3度投影带，即第24~45带。 [1]

3°带公式

3度带：带号N=round(L/3)，即对(L/3)的值四舍五入取整数，L为当地经度；则中央子午线经度L0=3 × N。但是如果你向上面这样编写的话永远算不对，正确的算法看以下代码centralmeridianis.js中编写的代码。

02、代码实现

因为代码中都有相应注释，这里我不会做过多的说明。你只需要在微信中任意创建一个page页面就可以编写运行，以下文件夹名字只是一个参考。

centralmeridianis.wxml

<mynavbar back="true" home="true" tourl="../../../../../pageBar/component/index" color="rgba(0,0,0,.5)" titleText="3°带计算"></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">我国领土跨22个3度投影带，即第24~45带。</view>
  </view>
</view>

centralmeridianis.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;
}

​

centralmeridianis.json

注：这里的组件目前还没有写出来，这个组件后续会在“微信小程序玩转自定义头部导航栏（各种机型完美适配版）”中进行说明。

{
  "usingComponents": {
    "mynavbar":"../../../../../common/resources/navbar/navbar"
  }
}

centralmeridianis.js

Page({
​
    /**
     * 页面的初始数据
     */
    data: {
        duValue: '',
        fenValue: '',
        miaoValue: '',
        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
        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 / 3) + 0.5) //获得带号
        if (that.data.duValue == '' || that.data.fenValue == '' || that.data.miaoValue == '') {
            wx.vibrateShort({}) //开启震动
            wx.showModal({
                title: '友情提示！',
                content: '请您输入完整的值在进行计算！😂',
                showCancel: false,
                cancelText: "确定"
            })
        } else {
            that.setData({
                resultShow: false,
                daihao: daihao,
                radial: daihao * 3, //中央子午线
                longitudeStart: (3 * daihao) - 1.5, //经度起始范围
                longitudeEnd: (3 * daihao) + 1.5
            })
        }
    },
    // 调用最终计算
    //单击计算 
    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);
        }
    }
})

03、界面展示

图3-1 点击微信开发者工具–>预览—>打开微信扫一扫二维码测试

图3-2 开发现场

参考：

[1]：3°带基本概念（百度百科）

-END-

-预告-
以下小程序是本教程最终要开发的产品可以点击体验，下一篇为从0开发《工程测绘大师》小程序之6°带中央子午线计算篇（八）