思路: 先輸入經緯度，然后判斷經緯度的格式，如果格式正確的話 就拿到輸入的經緯度 在地球上對應的位置去標點 並且相機的位置中心也飛往該點
先實現標點 相機中心點
showPoints(lng, lat) { // 接受兩個參數 lng經度 lat緯度
this.viewer.entities.removeAll() //先清除地球上的標點 console.log(this.viewer.entities) if(this.viewer.entities.values.length === 0) { //清除完成后地球上沒有其他點位了 var entity = this.viewer.entities.add({ position: this.Cesium.Cartesian3.fromDegrees(lng, lat), /*point: { color: Cesium.Color.RED, //點位顏色 pixelSize: 10 //像素點大小 },*/ billboard: { image: marker }, label : { text : '測試名稱', font : '14pt Source Han Sans CN', //字體樣式 fillColor: this.Cesium.Color.BLACK, //字體顏色 backgroundColor: this.Cesium.Color.AQUA, //背景顏色 showBackground:true, //是否顯示背景顏色 style: this.Cesium.LabelStyle.FILL, //label樣式 outlineWidth : 2, verticalOrigin: this.Cesium.VerticalOrigin.CENTER,//垂直位置 horizontalOrigin: this.Cesium.HorizontalOrigin.LEFT,//水平位置 pixelOffset:new this.Cesium.Cartesian2(10,0) //偏移 } }) this.viewer.camera.flyTo({ //相機飛往該點 destination: this.Cesium.Cartesian3.fromDegrees(lng, lat, 500000), //攝像機的最終位置 duration: 2 }) } },
再實現搜索功能
我的需求是接受兩種格式 ①120,30 ②120°11'11",30°11'11" 前面是經度 后面是緯度 經度范圍是 -180——180 緯度方位是-90——90
需要驗證的東西比較多
search() {
//定位的實現
console.log(this.inputText) var times = (this.inputText.match(/,/g)||[]).length; if(times === 1) { // 判斷 ',' 出現的次數 console.log('可以繼續') console.log(this.inputText.split(',')) var timesArr = this.inputText.split(',') if(timesArr.length === 2) { if(timesArr[0] !== '' && timesArr[1] !== '') { //判斷兩個值是否為空開始 // 判斷截取的數組的每個值是否為空 /*var lng = Number(timesArr[0]) var lat = Number(timesArr[1])*/ if(isNaN(timesArr[0]) || isNaN(timesArr[1])) { // 判斷截取的兩個值是否為數字 var lngTimes1 = (timesArr[0].match(/°/g)||[]).length; var lngTimes2 = (timesArr[0].match(/'/g)||[]).length; var lngTimes3 = (timesArr[0].match(/"/g)||[]).length; var latTimes1 = (timesArr[1].match(/°/g)||[]).length; var latTimes2 = (timesArr[1].match(/'/g)||[]).length; var latTimes3 = (timesArr[1].match(/"/g)||[]).length; console.log(lngTimes1) console.log(lngTimes2) console.log(lngTimes3) console.log(latTimes1) console.log(latTimes2) console.log(latTimes3) if(lngTimes1 === 1 && lngTimes2 === 1 && lngTimes3 ===1 && latTimes1 === 1 && latTimes2 === 1 && latTimes3 === 1) { //若截取的兩個數不為數字,判斷是否為第二種定位寫法 //判斷 ° ' " 出現的次數 必須所有的符號出現的次數為1 console.log('已過第一關') console.log(timesArr[0].indexOf('°')) console.log(timesArr[0].indexOf('"')) console.log(timesArr[0].indexOf("'")) var lngs1 = timesArr[0].indexOf('°') var lngs2 = timesArr[0].indexOf("'") var lngs3 = timesArr[0].indexOf('"') var lats1 = timesArr[1].indexOf('°') var lats2 = timesArr[1].indexOf("'") var lats3 = timesArr[1].indexOf('"') if(lngs1 < lngs2 && lngs2 < lngs3 && lats1 < lats2 && lats2 < lats3) { //三個符號出現的順序開始 //符號的出現順序得是 ° ' " 否則不行 //32°23'23",23°23'23" if(!isNaN(Number(timesArr[0].split('°')[0])) && !isNaN(Number(timesArr[1].split('°')[0]))) { //判斷度數為數字開始 //判斷第二種定位的 ° 前面是否為數字 //是 if(Number(timesArr[0].split('°')[0]) > 180 || Number(timesArr[0].split('°')[0]) < -180 || Number(timesArr[1].split('°')[0]) >= 90 || Number(timesArr[1].split('°')[0]) <= -90) { //第二種定位的經緯度度數也要在 -180 —— 180 ，緯度 -90 —— 90之間 //不是在此區間 this.$Message.warning('經度的范圍是 -180 —— 180 。緯度的范圍是 -90 —— 90'); }else { //是在此區間 if(Number(timesArr[0].split('°')[0]) === 180 || Number(timesArr[0].split('°')[0]) === -180) { //start123456 //判斷經度度數是否等於180 //是 if(Number(timesArr[0].split('°')[1].split("'")[0]) === 0 && Number(timesArr[0].split('°')[1].split("'")[1].split('"')[0]) === 0) { //若經度為180或-180 分秒只能為0 var lngData = 180; var latData; var lat_du = timesArr[1].split('°')[0] var lat_fen = timesArr[1].split('°')[1].split("'")[0] var lat_miao = timesArr[1].split('°')[1].split("'")[1].split('"')[0] if(lat_du >= 0) { //緯度為正數 北經 latData = Number(lat_du) + Number(lat_fen/60) + Number(lat_miao/3600) }else { //緯度為負數 南經 latData = '-' + (Math.abs(Number(lat_du)) + Number(lat_fen/60) + Number(lat_miao/3600)) } this.showPoints(lngData, latData) }else { this.$Message.warning('經度為180或-180時，對應的分秒必須為0'); } }else { //經度度數大於-180小於180 緯度度數大於-90小於90的時候 if(!isNaN(Number(timesArr[0].split('°')[1].split("'")[0])) && !isNaN(Number(timesArr[1].split('°')[1].split("'")[0]))) { //判斷 ° 后面 ' 前面的內容是否為數字 //是 if(Number(timesArr[0].split('°')[1].split("'")[0]) <= 60 && Number(timesArr[0].split('°')[1].split("'")[0]) >= 0 && Number(timesArr[1].split('°')[1].split("'")[0]) <= 60 && Number(timesArr[1].split('°')[1].split("'")[0]) >= 0) { //為數字后還要判斷區間范圍 判斷分的范圍是否在0-60之間 if(!isNaN(Number(timesArr[0].split('°')[1].split("'")[1].split('"')[0])) && !isNaN(Number(timesArr[1].split('°')[1].split("'")[1].split('"')[0]))) { //判斷 " 前面的內容是否為數字 //是 if(Number(timesArr[0].split('°')[1].split("'")[1].split('"')[0]) <= 60 && Number(timesArr[0].split('°')[1].split("'")[1].split('"')[0]) >= 0 && Number(timesArr[1].split('°')[1].split("'")[1].split('"')[0]) <= 60 && Number(timesArr[1].split('°')[1].split("'")[1].split('"')[0]) >= 0) { //若秒數為數字 判斷其范圍是否在0-60之間 if(timesArr[0].split('°')[1].split('"')[1] === '' && timesArr[1].split('°')[1].split('"')[1] === '') { //判斷 " 后面是否還有內容 //沒有 var lng_du = timesArr[0].split('°')[0] var lng_fen = timesArr[0].split('°')[1].split("'")[0] var lng_miao = timesArr[0].split('°')[1].split("'")[1].split('"')[0] var lat_du = timesArr[1].split('°')[0] var lat_fen = timesArr[1].split('°')[1].split("'")[0] var lat_miao = timesArr[1].split('°')[1].split("'")[1].split('"')[0] var lngData; var latData; if(lng_du >= 0) { //經度為正數 東經 lngData = Number(lng_du) + Number(lng_fen/60) + Number(lng_miao/3600) }else { //經度為負數 西經 lngData = '-' + (Math.abs(Number(lng_du)) + Number(lng_fen/60) + Number(lng_miao/3600)) } if(lat_du >= 0) { //緯度為正數 北經 latData = Number(lat_du) + Number(lat_fen/60) + Number(lat_miao/3600) }else { //緯度為負數 南經 latData = '-' + (Math.abs(Number(lat_du)) + Number(lat_fen/60) + Number(lat_miao/3600)) } this.showPoints(lngData, latData) }else { this.$Message.warning('格式錯誤——秒數后面不能再出現內容'); } }else { this.$Message.warning('經緯度秒數的范圍必須是在0-60之間'); } }else { this.$Message.warning('經緯度秒數必須為數字'); } }else { this.$Message.warning('經緯度的分數的范圍必須是在0-60之間'); } }else { this.$Message.warning('經緯度的分數必須為數字'); } } //end123456 } }else { this.$Message.warning('經緯度度數必須為數字'); } //判斷度數為數字結束 }else { this.$Message.warning('格式錯誤——請參考定位格式'); } //三個符號出現的順序結束 }else { this.$Message.warning('格式錯誤——請參考定位格式'); } }else { if(timesArr[0]>180 || timesArr[0]<-180 || timesArr[1]>90 || timesArr[1]<-90) { //判斷經緯度值的范圍 this.$Message.warning('經度的范圍是 -180 —— 180 。緯度的范圍是 -90 —— 90'); }else { console.log('區定位吧') this.showPoints(timesArr[0], timesArr[1]) } } }else { this.$Message.warning('經緯度不能為空'); } //判斷兩個值是否為空結束 }else { this.$Message.warning('格式錯誤——請參考定位格式'); } }else { //判斷times===1 this.$Message.warning('格式錯誤——請參考定位格式'); } },