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) {
   </