上一篇我們講了如何進行實現角度與弧度的互相轉化。在該篇中我們會講解如何進行實現坐標正算的程序。

目錄?

? ??1.什么是坐標正算

? ? 2.代碼實現

????3.界面展示

侃侃而談

從該篇開始程序就會慢慢的越往后越開始有點難度了，所以我想大家應該是蠻期待的，很高興的是今天我終于把水準測量的程序寫出來了，我每天會抽出兩個小時來完善它，你會發現抽出再多的時間來做同一件事情會很低效，你也不可能一天就將程序設計出來。

我想讓你知道的是盡量每天規劃好做幾樣事情，而且每件事情都要有確定的時間點，比如該事情做兩個小時，然后時間到立馬再做另外一件事情，我發現這樣是最高效的，至少現在是這樣，你也可以試試。

水準計算這個程序是我開發這些程序中耗時最長的一個，因為它看起來的確很簡單，然而你需要讓用戶自己添加任意個測站，因為你是不清楚用戶會需要幾個測站，所以你要動態的獲取到用戶輸入的值然后在一個一個遍歷后計算，聽起來似乎是有點難的。

其實《工程測繪大師》這個小程序的代碼優化的空間還很大，為什么這么說呢？上一個暑假為了能夠快速上線很多東西是可以做成組件來進行復用，這樣可以優化代碼也增加了較好的可讀性，為后期的代碼維護和升級做一個鋪墊。

組件的復用就是把相同的代碼抽取出來，將其作為一個單獨的模塊組件，在哪個頁面需要該組件引入即可。

什么時候應該將其作為組件？

當頁面中需要很多地方需要用到該組件時，我們就應該把它封裝成一個組件便于使用。比如目前的這個小程序頭部導航用的就是一個獨立的組件，因為它在每個頁面中都要用到，所以這種情況就適合將其封裝為一個組件。

組件的好處就是能夠復用，而且我們還可以給組件傳值提高組件的靈活性。比如說在坐標反算這個界面的頭部，我們就需要把坐標正算 titleText="坐標正算"值傳入進去給父組件，在組件中根據需要我們可以傳很多所需值提高組件的靈活性。

<mynavbar back="true" home="true" tourl="../../../../../pageBar/component/index" color="rgba(0,0,0,.5)" titleText="坐標正算">mynavbar>

圖0??頭部組件

后期我會將代碼進行優化，如果不進行優化隨著程序的增加，代碼變得異常的難以維護。

---

01、什么是坐標正算

坐標正算其實就是已知距離(兩點間的距離)、方位角和該點的坐標，求另一個點坐標的過程。

圖1-1? 坐標正算圖解

計算公式

Xb = Xa + Sab * CosαAB

Yb = Ya + Sab * SinαAB

我們可以從公式中發現坐標正算其實很簡單，但是在測繪中他的用途特別廣泛，如果你是從事傳統測繪的測量，那么你很幸運，因為你天天都在和這個公式打交道。

---

02、代碼實現

因為代碼中都有相應注釋，這里我不會做過多的說明。你只需要在微信中任意創建一個page頁面就可以編寫運行，以下文件的名字只是一個參考。其中樣式還是與之前第七篇的樣式(centralmeridianis.wxss)一致，由于篇幅有限樣式不再做過多說明。

該篇主要的難點在于用split('.')來進行實現用戶輸入度分秒時要根據? . ?來獲取到度、 分、 秒的值，只有我們拿到了值才能進行后續的計算。(方法不止一種，這里我用的split('.')方法來實現)split(' ')函數方法主要是字符串方法，用于將字符串根據括號里面的符號進行分割成以該符號隔開的數組。//例如：var str = '三/葉/雨';var??arr?=?str.split('/')//通過查找到/來進行分割這里我們也可以是其他符號，根據要輸入的值來確定。//輸出數組：['三'，'葉','雨']//如果我們需要獲取數組中的'三'就需要通過以下方式獲取arr[0]//'三'arr[1]//'葉'arr[2]//'雨'//一般編程語言中下標都是從'0'開始

具體請看下面的代碼

coordbeing.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/start.png">image>起點坐標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}}" placeholder="{{item.tips}}">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/end.png">image>終點坐標 view> <image src="../../../../../icon/close.png" bindtap="myclose">image> view> <view class="result-inner-inner">Xb：<text class="resultColor"> {{xb}}text> ?view> <view class="result-inner-inner">Yb：<text class="resultColor">{{yb}}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>

coordbeing.json

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

coordbeing.js

Page({ /** * 頁面的初始數據 */ data: { xValue: '', yValue: '', azimuthValue: '', twoValue: '', selecteBorder: false, resultShow: true, list: [{ id: 0, name: 'xValue', focous: 'xfocous', unit: '?', url: '../../../../../icon/coordinate.png', text: "X?", border: false }, { id: 1, name: 'yValue', focous: 'yfocous', unit: '?', url: '../../../../../icon/coordinate.png', text: "Y?", border: false }, { id: 2, name: 'azimuthValue', focous: 'azimuthfocous', unit: '°′″', url: '../../../../../icon/angle.png', text: "α", tips: "請您以 度.分.秒 形式輸入方位角", border: false }, { id: 3, name: 'twoValue', focous: 'twofocous', unit: '?', url: '../../../../../icon/twopoint.png', text: "D", border: false } ] }, // 關閉答案 myclose() { this.setData({ resultShow: true }) }, // 獲取焦點顯示邊框 xfocous() { this.setData({ 'list[0].border': true }) }, yfocous() { this.setData({ 'list[1].border': true }) }, azimuthfocous() { this.setData({ 'list[2].border': true }) }, twofocous() { this.setData({ 'list[3].border': true }) }, // 獲得焦點當前選中的邊框改變顏色 // 獲取X xValue(e) { this.setData({ xValue: e.detail.value, 'list[0].border': false }) }, // 獲取y yValue(e) { this.setData({ yValue: e.detail.value, 'list[1].border': false }) }, // 獲取秒 azimuthValue(e) { this.setData({ azimuthValue: e.detail.value, 'list[2].border': false }) }, twoValue(e) { this.setData({ twoValue: e.detail.value, 'list[3].border': false }) }, // 失去焦點邊框改變顏色 // 計算 calculations: function () { const PI = Math.PI var that = this var xa = Number(that.data.xValue) // x var ya = Number(that.data.yValue) //y var azimuthValue = that.data.azimuthValue //方位角 var d = Number(that.data.twoValue) //兩點距離 var dufenmiao = azimuthValue.split('.'); //獲取輸入的數組 if (azimuthValue.indexOf(".") < 0) { var du = Number(dufenmiao[0]) var fen = 0 var miao = 0 } else { var du = Number(dufenmiao[0]) var fen = Number(dufenmiao[1]) var miao = Number(dufenmiao[2]) } var deg = du + fen / 60 + miao / 3600 var xb = getApp().fomatFloat((xa + d * Math.cos(deg * PI / 180)), 5) //保留5位小數 var yb = getApp().fomatFloat((ya + d * Math.sin(deg * PI / 180)), 5) if (that.data.xValue == '' || that.data.yValue == '' || that.data.azimuthValue == '' || that.data.twoValue == '') { wx.vibrateShort({}) //開啟震動 wx.showModal({ title: '友情提示', content: '請您輸入完整的值在進行計算！?', showCancel: false, cancelText: "確定" }) } else if (azimuthValue.indexOf(".") < 0) { wx.vibrateShort({}) //開啟震動 wx.showModal({ title: '友情提示', content: '您當前沒有以點號隔開，默認按 度.00.00 計算 ?', success(res) { if (res.confirm) { that.setData({ resultShow: false, xb: xb, yb: yb }) } } }) } else { if (azimuthValue.indexOf(".") == -1 || azimuthValue.split(".").length - 1 !== 2) { wx.vibrateShort({}) //開啟震動 wx.showModal({ title: '友情提示！', content: '角度請您按照所給格式輸入，如23.23.1中間必須以點隔開。！?', success(res) { if (res.confirm) { that.setData({ 'list[2].border': true, 'list[3].border': false }) } } }) } else { that.setData({ resultShow: false, xb: xb, yb: yb }) } } }, // 調用最終計算 //單擊計算 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: '', xValue: '', yValue: '', azimuthValue: '', twoValue: '' }) } else { //雙擊清空 // 單擊事件延時300毫秒執行，這和最初的瀏覽器的點擊300ms延時有點像。 that.lastTapTimeoutFunc = setTimeout(function () { that.calculations() }, 300); } }})

其中最主要的部分為以下的部分這里實現了角度到度分秒的實現，小程序中都是用的JS代碼實現，你也可以用各種編程語言去實現，此處僅作為拋磚引玉。

const PI = Math.PI var that = this var xa = Number(that.data.xValue) // x var ya = Number(that.data.yValue) //y var azimuthValue = that.data.azimuthValue //方位角 var d = Number(that.data.twoValue) //兩點距離 var dufenmiao = azimuthValue.split('.'); //獲取輸入的數組 if (azimuthValue.indexOf(".") < 0) { var du = Number(dufenmiao[0]) var fen = 0 var miao = 0 } else { var du = Number(dufenmiao[0]) var fen = Number(dufenmiao[1]) var miao = Number(dufenmiao[2]) } var deg = du + fen / 60 + miao / 3600 var xb = getApp().fomatFloat((xa + d * Math.cos(deg * PI / 180)), 5) //保留5位小數 var yb = getApp().fomatFloat((ya + d * Math.sin(deg * PI / 180)), 5)

---

03、展示

圖3-1? 開發現場

圖3-2? 開發現場

自從回來雨似乎沒有停止過它的呼吸，也許這個世界應該也需要晴女，讓陽光溫暖這片故土。

-END-

-預告-

以下小程序是本教程最終要開發的產品可以點擊體驗，下一篇為從0開發《工程測繪大師》小程序之坐標反算(十二)

●從0開發《工程測繪大師》小程序之6°帶中央子午線計算篇(八)

●從0開發《工程測繪大師》小程序之玩轉角度與度分秒相互轉換篇(九)

●從0開發《工程測繪大師》小程序之玩轉角度與弧度的互相轉化篇(十)

“雨”見美好 - “雨”見你?

我就知道你“在看”

總結

以上是生活随笔為你收集整理的已知两点坐标如何快速增加其他坐标_从0开发工程测绘大师小程序之坐标正算篇（十一）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。