首页 > 技术文章 > Cesium搜索经纬度并标点

reround 2020-04-21 15:37 原文

思路: 先输入经纬度,然后判断经纬度的格式,如果格式正确的话 就拿到输入的经纬度 在地球上对应的位置去标点 并且相机的位置中心也飞往该点

先实现标点 相机中心点

  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('格式错误——请参考定位格式');
        }
    },

推荐阅读