1.最終效果預覽

2.計算兩點之間的距離

let dis = this.utilsTools.returnDisByCoorTrans(qdXYData, zdXYData, "4549")

當距離小于我們在配置文件中預設(shè)置的值時調(diào)用我們自定義開發(fā)的導航，大于預設(shè)值則調(diào)用百度或者高德導航

在utilsTools工具類中我們封裝了如下方法

returnDisByCoorTrans(curxy, tarxy, wikid) {let dis = "0";let pxy1 = this.coordinateUtil.coorConvert(curxy["latitude"], curxy["longitude"], wikid)let pxy2 = this.coordinateUtil.coorConvert(tarxy["y"], tarxy["x"], wikid)let pA = {x: pxy1.x,y: pxy1.y,}let pB = {x: pxy2.x,y: pxy2.y,}dis = this.returnDistanceByTwoPoint(pA, pB)return dis}

在坐標轉(zhuǎn)換工具類coordinateUtil中我們封裝了如下方法，參數(shù)以江蘇通州為例

 coorConvert(lat, lon, targetWikid): any {if (targetWikid == "4549") {this.aAxis_Target = 6378137;this.bAxis_Target = 6356752.31414;this.m_dbMidLongitude = 120;return this.gaussBLtoXY(lat, lon, this.aAxis_Target, this.bAxis_Target, this.m_dbMidLongitude);}    }public gaussBLtoXY(mX: number, mY: number, Axis_Target_a: number, Axis_Target_b: number, m_dbMidLongitude: number): any {let m_aAxis = Axis_Target_a; //參考橢球長半軸let m_bAxis = Axis_Target_b; //參考橢球短半軸//double m_dbMidLongitude = transParaSeven.daihao*3;//中央子午線經(jīng)度 濟南117 威海123 巴州 87 通州120let m_xOffset = 500000;let m_yOffset = 0.0;try {//角度到弧度的系數(shù)let dblD2R = Math.PI / 180;//代表e的平方let e1 = (Math.pow(m_aAxis, 2) - Math.pow(m_bAxis, 2)) / Math.pow(m_aAxis, 2);//代表e'的平方let e2 = (Math.pow(m_aAxis, 2) - Math.pow(m_bAxis, 2)) / Math.pow(m_bAxis, 2);//a0let a0 = m_aAxis * (1 - e1) * (1.0 + (3.0 / 4.0) * e1 + (45.0 / 64.0) * Math.pow(e1, 2) + (175.0 / 256.0) * Math.pow(e1, 3) + (11025.0 / 16384.0) * Math.pow(e1, 4));//a2                let a2 = -0.5 * m_aAxis * (1 - e1) * (3.0 / 4 * e1 + 60.0 / 64 * Math.pow(e1, 2) + 525.0 / 512.0 * Math.pow(e1, 3) + 17640.0 / 16384.0 * Math.pow(e1, 4));//a4let a4 = 0.25 * m_aAxis * (1 - e1) * (15.0 / 64 * Math.pow(e1, 2) + 210.0 / 512.0 * Math.pow(e1, 3) + 8820.0 / 16384.0 * Math.pow(e1, 4));//a6let a6 = (-1.0 / 6.0) * m_aAxis * (1 - e1) * (35.0 / 512.0 * Math.pow(e1, 3) + 2520.0 / 16384.0 * Math.pow(e1, 4));//a8let a8 = 0.125 * m_aAxis * (1 - e1) * (315.0 / 16384.0 * Math.pow(e1, 4));緯度轉(zhuǎn)換為弧度表示//Blet B = mX * dblD2R;//llet l = (mY - m_dbMidLongitude) * dblD2R;Xlet X = a0 * B + a2 * Math.sin(2.0 * B) + a4 * Math.sin(4.0 * B) + a6 * Math.sin(6.0 * B) + a8 * Math.sin(8.0 * B);//let ll = Math.pow(Math.cos(B), 2) * e2;let c = m_aAxis * m_aAxis / m_bAxis;//Nlet N = c / Math.sqrt(1 + ll);//tlet t = Math.tan(B);let p = Math.cos(B) * l;let dby = X + N * t * (1 + ((5.0 - t * t + (9.0 + 4.0 * ll) * ll) + ((61.0 + (t * t - 58.0) * t * t + (9.0 - 11.0 * t * t) * 30.0 * ll) + (1385.0 + (-31111.0 + (543 - t * t) * t * t) * t * t) * p * p / 56.0) * p * p / 30.0) * p * p / 12.0) * p * p / 2.0;let dbx;dbx = N * (1.0 + ((1.0 - t * t + ll) + ((5.0 + t * t * (t * t - 18.0 - 58.0 * ll) + 14 * ll) + (61.0 + (-479.0 + (179.0 - t * t) * t * t) * t * t) * p * p / 42.0) * p * p / 20.0) * p * p / 6.0) * p;let mTargetX = dbx + m_xOffset;let mTargetY = dby + m_yOffset;return { x: mTargetX, y: mTargetY };}catch (ex) {console.error(ex);return null;}}

3.將點線畫到地圖上

 this.utilsTools.navigationByPointsSelf(curXY, tarXY, 2, this.angleValue)

在utilsTools工具類中封裝了畫點及畫線的方法如下

navigationByPointsSelf(beginPoint, endPoint, expand, angle) {this.locatedByBeginNavigationPoint(beginPoint, ['pointerArrow'], 'navigationLayer', angle)this.locatedByEndNavigationPoint(endPoint, ['runendsymbol'], 'navigationPointLayer')this.drawNavigationFirstLine(beginPoint, endPoint, "navigationLayer", 'polylineDASH')this.drawNavigationLineFirstByLocation(beginPoint, endPoint, expand)}

畫當前點locatedByBeginNavigationPoint
畫終點locatedByEndNavigationPoint
畫當前點與終點的連線drawNavigationFirstLine
將點線的范圍縮放到頁面適當位置drawNavigationLineFirstByLocation

locatedByEndNavigationPoint(endPoint, endSymbol, layerName) {let pointEndObj = {x: Number(endPoint.longitude),y: Number(endPoint.latitude),spatialReference: { wkid: this.mapConfig.wkid, latestWkid: this.mapConfig.wkid }}let geoJson = JSON.stringify(pointEndObj)let attObj = ""let oneObj = { geomertyJSON: geoJson, attributes: attObj };let symbol = { "point": endSymbol };this.mapTool.AddGraphicToLayer(layerName, [oneObj], symbol);}locatedByBeginNavigationPoint(beginPoint, beginSymbols, layerName, angleValue) {let pointBeginObj = {x: Number(beginPoint.longitude),y: Number(beginPoint.latitude),spatialReference: { wkid: this.mapConfig.wkid, latestWkid: this.mapConfig.wkid }}let pgeoJson = JSON.stringify(pointBeginObj)let pattObj = {angle: angleValue}let beginObj = { geomertyJSON: pgeoJson, attributes: pattObj };let symbolpoint = { "point": beginSymbols };this.mapTool.AddGraphicToLayer(layerName, [beginObj], symbolpoint)}drawNavigationLineFirstByLocation(beginPoint, endPoint, expand) {let geoObj = {type: "polyline",paths: [[[Number(beginPoint.longitude), Number(beginPoint.latitude)],[Number(endPoint.longitude), Number(endPoint.latitude)]]],spatialReference: { wkid: this.mapConfig.wkid, latestWkid: this.mapConfig.wkid }}this.mapTool.setExtentByGeo(geoObj, expand)}drawNavigationFirstLine(beginPoint, endPoint, layerName, lineSymbol) {let geoObj = {paths: [[[Number(beginPoint.longitude), Number(beginPoint.latitude)],[Number(endPoint.longitude), Number(endPoint.latitude)]]],spatialReference: { wkid: this.mapConfig.wkid, latestWkid: this.mapConfig.wkid }}let geoJson = JSON.stringify(geoObj)let attObj = {}let oneObj = { geomertyJSON: geoJson, attributes: attObj };let symbol = { "polyline": [lineSymbol] };this.mapTool.AddGraphicToLayer(layerName, [oneObj], symbol);}

在mapTool工具類中封裝了將點或者線添加到地圖上的操作

4.動態(tài)展示點線的變化

 this.navigationInterval = setInterval(() => {this.setIntervalData(curXY, tarXY)}, 1500);

async setIntervalData(curXY, tarXY) {this.angleValue = await this.utilsTools.getAngleData()curXY = await this.utilsTools.getDynamicCurXY(curXY)this.topNavigationMsg = this.utilsTools.getTopNavigationBoxMgs(curXY, tarXY)this.utilsTools.getCaluShowNavigationByInterval(curXY, tarXY, this.angleValue, 2)}

在工具類utilsTools中封裝了獲取當前設(shè)備角度的方法getAngleData
在工具類utilsTools中封裝了動態(tài)獲取當前位置的方法getDynamicCurXY
在工具類utilsTools中封裝了動態(tài)展示導航頂部彈框數(shù)據(jù)方法getTopNavigationBoxMgs
在工具類utilsTools中封裝了動態(tài)畫點及線的方法getCaluShowNavigationByInterval

動態(tài)獲取當前設(shè)備旋轉(zhuǎn)角度

getAngleData() {return new Promise((resolve, reject) => {let value = 0if (this.mapConfig.isTestData) {value = this.getRandomInt(0, 360)resolve(value)} else {this.deviceOrientation.getCurrentHeading().then((data: DeviceOrientationCompassHeading) => {value = data["magneticHeading"]resolve(value)},(error: any) => {reject(value)});}});}

動態(tài)獲取當前坐標

async getDynamicCurXY(xyData) {if (this.mapConfig.isTestData) {xyData.longitude = xyData.longitude - 0.0008xyData.latitude = xyData.latitude - 0.0008} else {let obj = Object.assign({}, this.mapConfig.mapLocationObj)obj.isKeepCallBack = falsexyData = await this.getXYLocationDataByDeviceType(obj)}return xyData}

導航頂部信息展示

getTopNavigationBoxMgs(beginPoint, endPoint) {let topNavigationMsg = {up: true,upDistance: "",down: false,downDistance: "",left: true,leftDistance: "",right: false,rightDistance: "",difDistance: "",lineDistance: "",}let pxy1 = this.coordinateUtil.coorConvert(beginPoint.latitude, beginPoint.longitude, "4549")let pxy2 = this.coordinateUtil.coorConvert(endPoint.latitude, endPoint.longitude, "4549")let pA = {x: pxy1.x,y: pxy1.y,}let pB = {x: pxy2.x,y: pxy2.y,}let dis: any = this.returnDistanceByTwoPoint(pA, pB)let dx = (pA.x - pB.x)let dy = (pA.y - pB.y)if (dx >= 0) {topNavigationMsg.right = falsetopNavigationMsg.left = truetopNavigationMsg.leftDistance = Math.abs(dx).toFixed(2)} else {topNavigationMsg.right = truetopNavigationMsg.left = falsetopNavigationMsg.rightDistance = Math.abs(dx).toFixed(2)}if (dy > 0) {topNavigationMsg.down = truetopNavigationMsg.up = falsetopNavigationMsg.downDistance = Math.abs(dy).toFixed(2)} else {topNavigationMsg.down = falsetopNavigationMsg.up = truetopNavigationMsg.upDistance = Math.abs(dy).toFixed(2)}topNavigationMsg.lineDistance = distopNavigationMsg.difDistance = "0"return topNavigationMsg}

動態(tài)畫當前點與線的變化

getCaluShowNavigationByInterval(curxy, tarxy, angle, expand) {this.drawNavigationLineDynamic(curxy, tarxy, "navigationLayer", 'polylineDASH', expand)this.locatedByBeginNavigationPoint(curxy, ['pointerArrow'], "navigationLayer", angle)}

5.動態(tài)畫線

drawNavigationLineDynamic(beginPoint, endPoint, layerName, lineSymbol, expand) {let geoObj = {type: "polyline",paths: [[[Number(beginPoint.longitude), Number(beginPoint.latitude)],[Number(endPoint.longitude), Number(endPoint.latitude)]]],spatialReference: { wkid: this.mapConfig.wkid, latestWkid: this.mapConfig.wkid }}let geoJson = JSON.stringify(geoObj)let attObj = {}let oneObj = { geomertyJSON: geoJson, attributes: attObj };let symbol = { "polyline": [lineSymbol] };this.mapTool.ClearGraphicLayerById(layerName)this.mapTool.AddGraphicToLayer(layerName, [oneObj], symbol);this.mapTool.setCenterByGeo(geoObj, expand, 0.0001)

每次畫線前需要將之前圖層的起點與線清除ClearGraphicLayerById
畫完點線后根據(jù)設(shè)定的距離判斷是否進行縮放setCenterByGeo，0.0001度大約是11米，在mapTool工具類中封裝了所有的地圖方面的操作，方法基本都是集成的arcgis中的方法

6.動態(tài)畫點

畫帶有角度的當前位置點

locatedByBeginNavigationPoint(beginPoint, beginSymbols, layerName, angleValue) {let pointBeginObj = {x: Number(beginPoint.longitude),y: Number(beginPoint.latitude),spatialReference: { wkid: this.mapConfig.wkid, latestWkid: this.mapConfig.wkid }}let pgeoJson = JSON.stringify(pointBeginObj)let pattObj = {angle: angleValue}let beginObj = { geomertyJSON: pgeoJson, attributes: pattObj };let symbolpoint = { "point": beginSymbols };this.mapTool.AddGraphicToLayer(layerName, [beginObj], symbolpoint)}