web端用canvas把航拍图片实际场景渲染在高德卫星地图上面

1、效果展示
原始照片

照片显示在卫星地图上的效果

2、源码

在这里插入代码片<template>
  <div id="home">
    <div id="map">
      <div style="z-index:100;position:absolute;left:30px;top:30px;color:red">
        <div>
          <input type="file" id="upload" accept="image" @change="upload" />
        </div>
        <!-- <el-upload action="#" :http-request="httpRequest" :before-upload="handleBefore" :multiple="true">
          <el-button size="small" type="primary">点击上传</el-button>
         
        </el-upload> -->
        <div style="position:absolute;top:50px">
          <button type="success" @click="showImg">显示图片</button>
          <button type="success" @click="photoFuWei">拍摄范围</button>
          <button type="success" @click="test">测试</button>
        </div>

        <div style="position:absolute;top:100px;left:30px;">
          <canvas id="canvas"></canvas>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import EXIF from 'exif-js' // 引入exif-js读取图片exif信息
export default {
  data() {
    return {
      map: null,
      imgFile: [],
      // picValue: {},
      pointArray: [],
      altitudeArray: [],
      angleArray: [],
      photoView: [],
      pointArrayMars: [],
      base64: '',
    }
  },

  mounted() {
    this.loadMap()
  },

  methods: {
    //初始化地图
    loadMap() {
      var map = new AMap.Map('map', {
        center: [114.33842, 30.575509],
        zoom: 30,
        layers: [new AMap.TileLayer.Satellite()],
      })
      this.map = map
    },

    // 选择文件
    upload(e) {
      let files = e.target.files || e.dataTransfer.files
      if (!files.length) return
      this.imgFile.push(files[0])
      this.getExifInfo(files[0])
    },

    // 选择文件
    handleBefore(changeFile) {
      // console.log('执行')
      // var reader = new FileReader()
      // if (changeFile) {
      //   reader.readAsBinaryString(changeFile)
      // }
      // reader.addEventListener('load', function () {
      //   console.log(reader.result)
      //   var obj = JSON.parse(reader.result)
      //   console.log(obj)
      // })
      // this.load(changeFile)
    },

    load(changeFile) {
      let self = this
      var reader = new FileReader()
      if (changeFile) {
        reader.readAsArrayBuffer(changeFile)
      }
      reader.addEventListener('load', function () {
        const view = new DataView(reader.result)
        let dataOrgin = new Int16Array(reader.result)
        let dataArr = []
        let tempValueArr = [] //温度数值
        let tempIndex = 0
        for (let index = 0; index < dataOrgin.length; index++) {
          if (index < dataOrgin.length - 1) {
            if (dataOrgin[index] == 25972 && dataOrgin[index + 1] == 28749) {
              tempIndex = index + 1
            }
          }
          if (tempIndex > 0) {
            dataArr.push(dataOrgin[index])
          }
        }
        // console.log(dataArr)
        let teMp = dataArr.splice(0, 2) //teMp
        let headFile = dataArr.splice(0, 64) //帧文件头
        let stepArea = dataArr.splice(0, 8192) //保留区
        let tempHead = dataArr.splice(0, 64) //温度数据帧头
        let imgW = tempHead[0] //红外图像数据宽度
        let imgH = tempHead[1] //红外图像数据高度
        let slop = tempHead[6] //步长
        let offset = tempHead[7] //偏移量
        console.log(tempHead)
        let dataCode = dataArr.splice(dataArr.length - 2, 2) //数据块校验码00 00 00 00
        let pngTempHead = dataArr.splice(dataArr.length - 16, 16) //png温度头
        let tempData = dataArr //温度数据区

        for (let index = 0; index < tempData.length; index++) {
          const temp = Number(
            (tempData[index] / slop + offset).toString().match(/^\d+(?:\.\d{0,1})?/)
          ) //保留一位小数，不进行四舍五入操作
          tempValueArr.push(temp)
        }

        console.log(tempValueArr)
      })
    },

    //字符串转16进制字符
    stringToHex(str) {
      var val = ''
      for (var i = 0; i < str.length; i++) {
        if (val == '') val = str.charCodeAt(i).toString(16)
        val += str.charCodeAt(i).toString(16)
      }
      return val
    },

    httpRequest() {},

    //加载本地静态资源
    dealData() {
      var url =
        '../../static/out2/gps.js' /*json文件url，本地的就写本地的位置，如果是服务器的就写服务器的路径*/
      var request = new XMLHttpRequest()
      request.open('get', url) /*设置请求方法与路径*/
      request.send(null) /*不发送数据到服务器*/
      request.onload = function () {
        /*XHR对象获取到返回信息后执行*/
        if (request.status == 200) {
          /*返回状态为200，即为数据获取成功*/
          var json = JSON.parse(request.responseText)
          for (let key in json) {
            let src = './out/' + key

            let imageLayer = new AMap.ImageLayer({
              url: src,
              bounds: new AMap.Bounds(json[key][0], json[key][1]),
              //bounds: new AMap.Bounds(wgs84togcj02(114.33565, 30.578261),wgs84togcj02(114.337784, 30.580095)),
              zooms: [10, 20],
            })
            // imageLayer.setMap(map)
          }
        }
      }
    },

    //获取图片的exif信息
    getExifInfo(file) {
      let self = this

      // 获取exif信息,EXIF.getAllTags(this)
      EXIF.getData(file, function () {
        console.log(EXIF.getAllTags(this))
        var tagLong = EXIF.getTag(this, 'GPSLongitude') //经度
        var tagLat = EXIF.getTag(this, 'GPSLatitude') //纬度
        let lngLatGps = [
          tagLong[0] + tagLong[1] / 60 + tagLong[2] / 60 / 60,
          tagLat[0] + tagLat[1] / 60 + tagLat[2] / 60 / 60,
        ]
        self.pointArray.push(lngLatGps)

        if (self.pointArray.length > 1) {
          let pointArray = self.pointArray
          for (let index = 0; index < pointArray.length - 1; index++) {
            const angle = self.getAngle(
              pointArray[index][0],
              pointArray[index][1],
              pointArray[index + 1][0],
              pointArray[index + 1][1]
            )
            // console.log(angle)
            self.angleArray.push(angle)
          }
        }

        var altitudePrototype = EXIF.getTag(this, 'GPSAltitude') //相对高度
        let altitudeGps = altitudePrototype.numerator / altitudePrototype.denominator
        self.altitudeArray.push(altitudeGps)
      })
    },

    //获取图片信息
    imgPreview(file, rotate, altitude, lng, lat, flag) {
      let self = this
      if (!file || !window.FileReader) return

      if (/^image/.test(file.type)) {
        let reader = new FileReader() // 创建一个reader
        reader.readAsDataURL(file) // 将图片2将转成 base64 格式
        // 读取成功后的回调
        reader.onloadend = function (e) {
          var canvas = document.createElement('canvas') //创建canvas元素
          var context = canvas.getContext('2d') //获取canvas上下文
          var img = new Image() //创建图片对象
          img.src = e.target.result //获取图片
          img.onload = function () {
            let width = img.width //原始图像宽
            let height = img.height //原始图像高
            let radius = Math.round(Math.sqrt(width ** 2 + height ** 2)) //内接圆半径
            canvas.width = radius / 2 //设置canvas宽
            canvas.height = radius / 2 //设置canvas高
            context.clearRect(0, 0, canvas.width, canvas.height) //清空canvas

            // context.fillStyle = 'white' //fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。
            // context.fillRect(0, 0, canvas.width, canvas.width) //绘制已填充矩形fillRect(左上角x坐标, 左上角y坐标, 宽, 高)

            context.translate(canvas.width / 2, canvas.height / 2) //平移canvas
            // context.fillStyle = 'black' //fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。
            // context.fillRect(0, 0, canvas.width, canvas.width) //绘制已填充矩形fillRect(左上角x坐标, 左上角y坐标, 宽,
            context.rotate((rotate * Math.PI) / 180)
            // context.fillStyle = 'yellow' //fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。
            // context.fillRect(0, 0, canvas.width, canvas.width) //绘制已填充矩形fillRect(左上角x坐标, 左上角y坐标, 宽,
            context.translate(-canvas.width / 2, -canvas.height / 2)
            // context.fillStyle = 'red' //fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。
            // context.fillRect(0, 0, canvas.width, canvas.width) //绘制已填充矩形fillRect(左上角x坐标, 左上角y坐标, 宽,
            context.drawImage(
              img,
              canvas.width / 2 - img.width / 4,
              canvas.height / 2 - img.height / 4,
              img.width / 4,
              img.height / 4
            ) //设置图像位置、大小,缩小8倍
            context.translate(canvas.width / 2, canvas.height / 2)
            context.rotate((-rotate * Math.PI) / 180)
            context.translate(-canvas.width / 2, -canvas.height / 2)
            context.restore()

            let base64 = canvas.toDataURL('image/jpg', 1) //把图片转成base64,并使用png格式图片使背景透明
            self.base64 = base64

            //self.downloadFile('1.png', base64) //下载图片

            self.addImgOnMap(base64, rotate, altitude, lng, lat, flag)
          }
        }
      }
    },

    //显示图片
    async showImg() {
      if (this.pointArray.length < 2) {
        this.$message('上传图片数量不够,至少保证有两张！')
        return
      }
      var pointArray = this.pointArray

      for (let index = 0; index < pointArray.length - 1; index++) {
        if (index > 0) {
          this.imgPreview(
            this.imgFile[index],
            this.angleArray[index],
            this.altitudeArray[index],
            this.pointArray[index][0],
            this.pointArray[index][1],
            true
          )
        } else {
          this.imgPreview(
            this.imgFile[index],
            this.angleArray[index],
            this.altitudeArray[index],
            this.pointArray[index][0],
            this.pointArray[index][1],
            false
          )
        }
      }
    },

    //在地图上显示图片图层
    addImgOnMap(base64, rotate, altitude, lng, lat, flag) {
      //图片拍摄范围经纬度点
      let photoView = this.calculationOfAerialPointCoordinates(0, 0, rotate, altitude, lng, lat)
      this.photoView = photoView

      //左上角开始逆时针正方形。拍摄范围的最小外接正方形
      let dian1 = [photoView[0][0], photoView[2][1]],
        dian2 = [photoView[0][0], photoView[1][1]],
        dian3 = [photoView[3][0], photoView[1][1]],
        dian4 = [photoView[3][0], photoView[2][1]]
      let bounds_1 = [dian2[0] * 2 - dian3[0], dian2[1]],
        bounds_2 = [dian4[0], dian4[1] * 2 - dian3[1]]

      let bounds_2_1 = photoView[2][0] - (bounds_2[0] + bounds_1[0]) / 2
      let ts = []
      let th = []
      if (flag) {
        ts = [bounds_1[0] + bounds_2_1, bounds_1[1]]
        th = [bounds_2[0] + bounds_2_1, bounds_2[1]]
      } else {
        ts = [bounds_1[0] + bounds_2_1, bounds_1[1]]
        th = [bounds_2[0] + bounds_2_1, bounds_2[1]]
      }

      console.log(ts, th)
      this.map.setCenter(dian1)
      // console.log(bounds_1, bounds_2)
      let imageLayer = new AMap.ImageLayer({
        url: base64,
        // url: '../../static/222.jpg',
        // bounds: new AMap.Bounds(dian2, dian4),
        bounds: new AMap.Bounds(ts, th),
        zooms: [10, 20],
      })
      imageLayer.setMap(this.map)
    },

    //拍摄范围
    photoFuWei() {
      let map = this.map
      // let dian1 = [this.photoView[0][0], this.photoView[2][1]],
      //   dian2 = [this.photoView[0][0], this.photoView[1][1]],
      //   dian3 = [this.photoView[3][0], this.photoView[1][1]],
      //   dian4 = [this.photoView[3][0], this.photoView[2][1]]
      var path = [this.photoView[0], this.photoView[2], this.photoView[3], this.photoView[1]]
      // var path = [dian1, dian2, dian3, dian4]
      // var polygon = new AMap.Polygon({
      //   path: path,
      //   strokeColor: '#FF33FF',
      //   strokeWeight: 6,
      //   strokeOpacity: 0.2,
      //   fillOpacity: 0.4,
      //   fillColor: '#1791fc',
      //   zIndex: 50,
      // })
      var polygon = new AMap.Polygon({
        path: path,
        strokeColor: '#FF33FF',
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
        fillColor: '#1791fc',
        zIndex: 50,
      })
      // map.add(polygon)
      map.add(polygon)
      // map.setFitView([polygon])
      map.setFitView([polygon])
    },

    test() {
      this.dealData()
      //获取图片信息
      let self = this
      let base64 = ''
      var canvas = document.createElement('canvas') //创建canvas元素
      var context = canvas.getContext('2d') //获取canvas上下文
      var img = new Image() //创建图片对象
      img.src = '../../static/out2/0.png' //获取图片
      img.onload = function () {
        let width = img.width //原始图像宽
        let height = img.height //原始图像高
        let radius = Math.round(Math.sqrt(width ** 2 + height ** 2)) //内接圆半径

        canvas.width = 1324
        canvas.height = 1314

        let rotate = 223.4
        context.clearRect(0, 0, canvas.width, canvas.height)
        // context.fillStyle = 'red' //fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。
        // context.fillRect(0, 0, canvas.width, canvas.width) //绘制已填充矩形fillRect(左上角x坐标, 左上角y坐标, 宽, 高)

        //context.translate(canvas.width / 2, canvas.height / 2) //如果平移之后再绘制img,img会作用在平移之后的canvas上
        //context.fillStyle = 'green'
        // context.fillRect(0, 0, canvas.width, canvas.width)

        //context.rotate((rotate * Math.PI) / 180)
        //context.fillStyle = 'yellow'
        //context.fillRect(0, 0, canvas.width, canvas.width)

        //context.translate(-canvas.width / 2, -canvas.height / 2) //平移之后以平移之后的canvas作为参考对象
        // context.fillStyle = 'blue'
        // context.fillRect(0, 0, canvas.width, canvas.width)

        //.drawImage(img, canvas.width / 2 - img.width / 2, canvas.height / 2 - img.height / 2)
        // context.translate(canvas.width / 2, canvas.height / 2)
        // context.rotate((-rotate * Math.PI) / 180)
        // context.translate(-canvas.width / 2, -canvas.height / 2)
        // context.restore()

        //分析canvas绘制图片
        context.translate(canvas.width / 2, canvas.height / 2) //第一次变换正平移
        // context.fillStyle = 'black'
        context.fillRect(0, 0, canvas.width, canvas.width)

        context.rotate((10 * Math.PI) / 180) //第二次变换正旋转
        context.fillStyle = 'green'
        context.fillRect(0, 0, canvas.width, canvas.width)

        context.translate(-canvas.width / 2, -canvas.height / 2) //第三变换负平移
        context.fillStyle = 'yellow' //
        context.fillRect(0, 0, canvas.width, canvas.width)

        context.drawImage(img, canvas.width / 2 - img.width / 2, canvas.height / 2 - img.height / 2)

        context.translate(canvas.width / 2, canvas.height / 2) //第四次正平移
        context.fillStyle = 'blue' //fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。
        context.fillRect(0, 0, canvas.width, canvas.width)

        context.rotate((-10 * Math.PI) / 180) //第五次负旋转
        context.fillStyle = 'gray' //fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。
        context.fillRect(0, 0, canvas.width, canvas.width)

        context.translate(-canvas.width / 2, -canvas.height / 2) //第六次负平移
        context.fillStyle = 'bule' //fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。
        context.fillRect(0, 0, canvas.width, canvas.width)

        context.restore() //恢复画布，也就是清除平移、旋转坐标系

        base64 = canvas.toDataURL('image/jpg', 1) //把图片转成base64,并使用png格式图片使背景透明
        self.base64 = base64

        let imageLayer = new AMap.ImageLayer({
          url: base64,
          //url: '../../static/222.jpg',
          // bounds: new AMap.Bounds(dian2, dian4),
          bounds: new AMap.Bounds([114.33842, 30.575509], [114.340556, 30.57734]),
          zooms: [10, 20],
        })
        imageLayer.setMap(self.map)

        //self.downloadFile('1.png', base64) //下载图片
      }

      console.log(base64)
    },

    //计算航向角
    getAngle(lng_a, lat_a, lng_b, lat_b) {
      var a = ((90 - lat_b) * Math.PI) / 180
      var b = ((90 - lat_a) * Math.PI) / 180
      var AOC_BOC = ((lng_b - lng_a) * Math.PI) / 180
      var cosc = Math.cos(a) * Math.cos(b) + Math.sin(a) * Math.sin(b) * Math.cos(AOC_BOC)
      var sinc = Math.sqrt(1 - cosc * cosc)
      var sinA = (Math.sin(a) * Math.sin(AOC_BOC)) / sinc
      var A = (Math.asin(sinA) * 180) / Math.PI
      var res = 0
      if (lng_b > lng_a && lat_b > lat_a) res = A
      else if (lng_b > lng_a && lat_b < lat_a) res = 180 - A
      else if (lng_b < lng_a && lat_b < lat_a) res = 180 - A
      else if (lng_b < lng_a && lat_b > lat_a) res = 360 + A
      else if (lng_b > lng_a && lat_b == lat_a) res = 90
      else if (lng_b < lng_a && lat_b == lat_a) res = 270
      else if (lng_b == lng_a && lat_b > lat_a) res = 0
      else if (lng_b == lng_a && lat_b < lat_a) res = 180
      return res
    },

    // WGS84转GCj02 (地球坐标系转火星坐标系)
    wgs84togcj02: function (lng, lat) {
      const PI = 3.1415926535897932384626
      const a = 6378245.0
      const ee = 0.00669342162296594323
      let dlat = transformlat(lng - 105.0, lat - 35.0)
      let dlng = transformlng(lng - 105.0, lat - 35.0)
      let radlat = (lat / 180.0) * PI
      let magic = Math.sin(radlat)
      magic = 1 - ee * magic * magic
      let sqrtmagic = Math.sqrt(magic)
      dlat = (dlat * 180.0) / (((a * (1 - ee)) / (magic * sqrtmagic)) * PI)
      dlng = (dlng * 180.0) / ((a / sqrtmagic) * Math.cos(radlat) * PI)
      let mglat = parseFloat(lat) + parseFloat(dlat)
      let mglng = parseFloat(lng) + parseFloat(dlng)
      return [mglng, mglat]

      // 经度坐标转换
      function transformlng(lng, lat) {
        const PI = 3.1415926535897932384626
        let ret =
          300.0 +
          lng +
          2.0 * lat +
          0.1 * lng * lng +
          0.1 * lng * lat +
          0.1 * Math.sqrt(Math.abs(lng))
        ret += ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0) / 3.0
        ret += ((20.0 * Math.sin(lng * PI) + 40.0 * Math.sin((lng / 3.0) * PI)) * 2.0) / 3.0
        ret +=
          ((150.0 * Math.sin((lng / 12.0) * PI) + 300.0 * Math.sin((lng / 30.0) * PI)) * 2.0) / 3.0
        return ret
      }

      // 纬度坐标转换
      function transformlat(lng, lat) {
        const PI = 3.1415926535897932384626
        let ret =
          -100.0 +
          2.0 * lng +
          3.0 * lat +
          0.2 * lat * lat +
          0.1 * lng * lat +
          0.2 * Math.sqrt(Math.abs(lng))
        ret += ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0) / 3.0
        ret += ((20.0 * Math.sin(lat * PI) + 40.0 * Math.sin((lat / 3.0) * PI)) * 2.0) / 3.0
        ret +=
          ((160.0 * Math.sin((lat / 12.0) * PI) + 320 * Math.sin((lat * PI) / 30.0)) * 2.0) / 3.0
        return ret
      }
    },

    /**
     * 航拍影像四角点坐标计算
     * @param {*} hogAngle 俯仰角
     * @param {*} rogAngle 横滚角
     * @param {*} rowAngle 航向角
     * @param {*} realH 相对高度
     * @param {*} lng 经度
     * @param {*} lat 纬度
     * @returns 投影到地面的四个点的经纬度坐标
     */
    calculationOfAerialPointCoordinates: function (
      hogAngle = 0,
      rogAngle = 0,
      rowAngle,
      realH,
      lng,
      lat
    ) {
      var sw = 0.0074 // 感光元件尺寸7.4*5.6mm
      var sh = 0.0056 // 感光元件尺寸23.5*15.6mm
      var sl = 0.00638 // 相机镜头焦距mm
      var camAngle = 90 // 相机安装角（默认值 30度）
      // realH = 180; // 无人机距地高度（默认值 180米）

      realH = 139
      var swh = Math.sqrt(Math.pow(sw, 2) + Math.pow(sh, 2)) / 2 //
      var angleCOM = (Math.atan(swh / sl) * 180) / Math.PI
      var whanchor = (Math.asin(sw / 2 / swh) * 180) / Math.PI
      var p0x1 = realH * Math.tan(((angleCOM + hogAngle) * Math.PI) / 180) //距离
      var angleX1 = whanchor + rogAngle + rowAngle //角度
      var p0x2 = realH * Math.tan(((angleCOM + hogAngle) * Math.PI) / 180)
      var angleX2 = -whanchor - rogAngle + rowAngle
      var p0x3 = realH * Math.tan(((angleCOM - hogAngle + 180) * Math.PI) / 180)
      var angleX3 = whanchor - 180 - rogAngle + rowAngle
      var p0x4 = realH * Math.tan(((angleCOM - hogAngle + 180) * Math.PI) / 180)
      var angleX4 = -whanchor - 180 + rogAngle + rowAngle
      var lngLatObj = this.getLonAndLat(
        lng,
        lat,
        rowAngle,
        (realH * Math.tan(camAngle) * Math.PI) / 180
      )
      var lngLatObj1 = this.getLonAndLat(lngLatObj[0], lngLatObj[1], angleX1, p0x1, false)
      var lngLatObj2 = this.getLonAndLat(lngLatObj[0], lngLatObj[1], angleX2, p0x2, false)
      var lngLatObj3 = this.getLonAndLat(lngLatObj[0], lngLatObj[1], angleX3, p0x3, false)
      var lngLatObj4 = this.getLonAndLat(lngLatObj[0], lngLatObj[1], angleX4, p0x4, false)
      return [lngLatObj1, lngLatObj2, lngLatObj4, lngLatObj3]
    },

    /**
     * 根据A点的坐标，AB之间的距离，以及方位角，计算B点的坐标
     * @param {*} lng 经度
     * @param {*} lat 纬度
     * @param {*} brng 方位角
     * @param {*} dist 距离(米)
     *
     */
    getLonAndLat: function (lng, lat, brng, dist, isRectification = true) {
      function deg(x) {
        return (x * 180) / Math.PI
      }
      // 度转换成弧
      function rad(d) {
        return (d * Math.PI) / 180.0
      }
      //大地坐标系资料WGS-84 长半径a=6378137 短半径b=6356752.3142 扁率f=1/298.2572236
      var a = 6378137
      var b = 6356752.3142
      var f = 1 / 298.257223563

      var lon1 = lng * 1
      var lat1 = lat * 1
      var s = dist
      var alpha1 = rad(brng)
      var sinAlpha1 = Math.sin(alpha1)
      var cosAlpha1 = Math.cos(alpha1)

      var tanU1 = (1 - f) * Math.tan(rad(lat1))
      var cosU1 = 1 / Math.sqrt(1 + tanU1 * tanU1),
        sinU1 = tanU1 * cosU1
      var sigma1 = Math.atan2(tanU1, cosAlpha1)
      var sinAlpha = cosU1 * sinAlpha1
      var cosSqAlpha = 1 - sinAlpha * sinAlpha
      var uSq = (cosSqAlpha * (a * a - b * b)) / (b * b)
      var A = 1 + (uSq / 16384) * (4096 + uSq * (-768 + uSq * (320 - 175 * uSq)))
      var B = (uSq / 1024) * (256 + uSq * (-128 + uSq * (74 - 47 * uSq)))

      var sigma = s / (b * A),
        sigmaP = 2 * Math.PI
      while (Math.abs(sigma - sigmaP) > 1e-12) {
        var cos2SigmaM = Math.cos(2 * sigma1 + sigma)
        var sinSigma = Math.sin(sigma)
        var cosSigma = Math.cos(sigma)
        var deltaSigma =
          B *
          sinSigma *
          (cos2SigmaM +
            (B / 4) *
              (cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM) -
                (B / 6) *
                  cos2SigmaM *
                  (-3 + 4 * sinSigma * sinSigma) *
                  (-3 + 4 * cos2SigmaM * cos2SigmaM)))
        sigmaP = sigma
        sigma = s / (b * A) + deltaSigma
      }

      var tmp = sinU1 * sinSigma - cosU1 * cosSigma * cosAlpha1
      var lat2 = Math.atan2(
        sinU1 * cosSigma + cosU1 * sinSigma * cosAlpha1,
        (1 - f) * Math.sqrt(sinAlpha * sinAlpha + tmp * tmp)
      )
      var lambda = Math.atan2(sinSigma * sinAlpha1, cosU1 * cosSigma - sinU1 * sinSigma * cosAlpha1)
      var C = (f / 16) * cosSqAlpha * (4 + f * (4 - 3 * cosSqAlpha))
      var L =
        lambda -
        (1 - C) *
          f *
          sinAlpha *
          (sigma + C * sinSigma * (cos2SigmaM + C * cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM)))
      // var revAz = Math.atan2(sinAlpha, -tmp)
      return isRectification
        ? this.wgs84togcj02(lon1 + deg(L), deg(lat2))
        : [lon1 + deg(L), deg(lat2)]
    },
  },
}
</script>


<style scoped>
#home {
  height: 100%;
  width: 100%;
  padding: 0%;
}

#map {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  margin: 0%;
  padding: 0%;
}
</style>