上一篇我们讲了如何实现3°带中央子午线的计算。在该篇中我们会讲如何实现6°带中央子午线的计算，其实6°带的计算和3°带的计算程序设计差别不是太大，我们只需改一下公式即可。

目录

  • 01、公式
  • 02、代码实现
  • 03、界面展示

侃侃而谈

为了做这个小程序其实我尝试着在网上找了很多关于测绘计算相关的资料，但是你会发现网上基本上找不到跟测绘相关计算的程序，即使有也基本上是需要付钱买的，买了有可能也没有你需要的程序。

所以干脆还是决定自己做，因为做了所以你也才能看见今天的这个小程序，虽然目前功能并不是很多，但也一直在完善中，希望每次都有一定的突破，能带给大家更实用的一些功能，快速解决繁琐的计算。

如果计算有错误的地方大家可以通过公众号或者小程序的客服联系到我，我会第一时间纠正。如果你也想加入《工程测绘大师》小程序的开发，我也很乐意我们一起去维护，如果你有意向可以通过我的邮箱：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 = thisif (that.data.duValue == '' || that.data.fenValue == '' || that.data.miaoValue == '') {wx.vibrateShort({}) //开启震动wx.showModal({title: '友情提示！',content: '请您输入完整的值在进行计算！												


											

从0开发《工程测绘大师》小程序之6°带中央子午线计算篇（八）相关推荐
	

    
						
  1. 已知两点坐标如何快速增加其他坐标_从0开发工程测绘大师小程序之坐标正算篇（十一）...
		
    上一篇我们讲了如何进行实现角度与弧度的互相转化.在该篇中我们会讲解如何进行实现坐标正算的程序. 目录      1.什么是坐标正算 2.代码实现 3.界面展示 侃侃而谈 从该篇开始程序就会慢慢的越往后 ...
    
		
    2. 
						
  2. 工程测绘大师小程序已经上线
		
    工程测绘计算大师今天已经发布上线,界面UI可能有点丑不过后续会改进,里面集成了一些测绘计算和工程测量中的一些计算,解决繁琐的计算过程提高工作效率,目前只有16个计算功能如下图放出了几个功能,更多的功能 ...
    
		
    3. 
						
  3. 开发库存管理SaaS小程序（1） - 公司注册篇
		
    库存管理SaaS小程序的开发目的是让中小企业可以使用小程序来管理库存,省去开发.部署系统的成本. 为了让同一个公司的用户能看见共享的数据,他们需要有一个共同的companyId,具体的实现方法是,某一 ...
    
		
    4. 
						
  4. thinkphp开发的活动报名小程序源码带后台管理完整的报名小程序源码
		
    介绍: 活动报名小程序源码,基于thinkphp开发的报名小程序源码,带有后台管理,用户发布活动信息.报名可以后台管理,简单测试了一下,基本都还是可以的. 不过需要注意的是,用户注册部分是发送手机短信 ...
    
		
    5. 
						
  5. 最新WIFI分销大师小程序源码+带后端/亲测可用
		
    正文: 这程序本人实测搭建成功,有需要的朋友自行去体验吧. 大家最近都在找这类的小程序,网上很多下载下来就是缺胳膊少腿的,大家自己清楚,所以我自己花Q,找人高价拿了一个完整版的,百分百能搭建成功. 分 ...
    
		
    6. 
						
  6. 从0开发《工程测绘大师》小程序之什么是微信小程序篇（一）
		
    我们今天来讲讲如何从0开发<工程测绘大师>小程序之什么是微信小程序篇.先来说说什么是微信小程序,什么是微信小程序?为什么会有微信小程序诞生?它到底解决了什么痛点?与传统的网页开发和APP相 ...
    
		
    7. 
						
  7. 从0开发《工程测绘大师》小程序之程序列表实现篇（六）
		
    人生一世,也不过是一个又一个二十四小时的叠加,在这样宝贵的光阴里,我必须明白自己的选择.–三毛 上一篇我们讲了如何实现首页布局,在这一篇中我们会讲如何实现小程序的测绘列表(也就是点击测绘进入展现的那个 ...
    
		
    8. 
						
  8. 2022最新 wifi大师小程序独立版3.0.8
		
    简介: wifi大师小程序独立版3.0.8,安装源码到根目录 1.网站运行目录public 2.PHP7.2,开通SSL 3.导入数据库文件 4.修改数据库文件里application/databas ...
    
		
    9. 
						
  9. douchat 4.0 新版发布，助力小程序后台开发
		
    douchat是什么 douchat(中文名:豆信)是一款专为微信开发而创造的php开源框架,具有简洁.高效.优雅等特点. 新版本功能 douchat V4.0.0版本主要新增了小程序开发支持,具体包 ...
    
		
    10. 
						
  10. 只需20小时，让0基础的你掌握小程序云开发！这个暑假，约否？
		
    今天的故事要从小开和小发这对好基友的假期说起...... 没错!他来了,他来了,云开发带着小程序开发夏令营最新情报向我们走来了! 为了让更多的童鞋享受高效率."在云上"掌握小程序开 ...
    
		
    11. 
		


					

最新文章
	

    
						
  1. RxJava的初步认识
		
    2. 
						
  2. 定义国际贸易术语(Incoterms)
		
    3. 
						
  3. python自动抓取指定信息_使用python自动转发抓取的网页信息
		
    4. 
						
  4. xtrabackup 9.0备份出错的解决方法
		
    5. 
						
  5. 全栈深度学习第5期: 神经网络调试技巧
		
    6. 
						
  6. php繁体输出,PHP输出控制功能在简繁体转换中的应用
		
    7. 
						
  7. AirFlow常见问题汇总
		
    8. 
						
  8. 视讯稳定的程序在gpu 那台电脑上没有问题 在自己的电脑上一直报一个错误
		
    9. 
						
  9. MongoDB　Replica Set 选举过程
		
    10. 
						
  10. 左右边界二分查找小总结
		
    11. 
						
  11. pthread_detach()与pthread_join的区别？
		
    12. 
						
  12. c语言程序设计会出现什么问题,计算机C语言程序设计过程中的常见问题分析和研究...
		
    13. 
						
  13. Word修改标题样式缩进不起作用原因
		
    14. 
						
  14. python如何读取dbf文件_Python如何读取DBF文件
		
    15. 
						
  15. idea在 keymap下的eclipse的快捷键
		
    16. 
						
  16. FillRect、FrameRect与Rectangle矩形绘制函数使用对比分析
		
    17. 
						
  17. DDR的Controller、Channel、Chip、Rank、Bank、Row、Column、Sided
		
    18. 
						
  18. 在 Win10系统，所有程序默认都以管理员身份运行
		
    19. 
						
  19. 攻防世界misc 新手练习区 高手进阶区 wp
		
    20. 
						
  20. 【图像处理】双线性插值法扩展图像像素及其代码实现（亚像素）
		
    21. 
		

	


热门文章
	

    
									
  1. 图论，回路，旅行商、邮递员问题。
			
    2. 
						
  2. android iphone滑动解锁,苹果iOS10锁屏详解:“滑动来解锁”已成为过去
			
    3. 
						
  3. Useful webs
			
    4. 
						
  4. 必修的十堂电影课（男人篇）
			
    5. 
						
  5. 软件测试是不是IT行业最容易学的 ，大概需要多长时间，就业前景好吗？
			
    6. 
						
  6. 计算机网络 --- 网络编程
			
    7. 
						
  7. 开源OA项目：办公用品如何管理？
			
    8. 
						
  8. Language Models are Unsupervised Multitask Learners翻译
			
    9. 
						
  9. PHP爬虫的三种方法
			
    10. 
						
  10. 手工制作学数学——三维空间八个象限
			
    11.