mapbox加载tif（利用geotiff.js）

有玉微凉，是为樱琅

于 2024-05-11 14:00:32 发布

阅读量275

点赞数 3

分类专栏： mapbox+leaflet 文章标签： javascript mapbox gis vue

本文链接：https://blog.csdn.net/Sakura1998gis/article/details/138713010

版权

mapbox+leaflet 专栏收录该内容

61 篇文章 4 订阅

订阅专栏

贴个群号

WebGIS学习交流群461555818，欢迎大家

源码

代码我也是从网上抄的，所以此处不做介绍了，自己记录一下我遇到的问题。

记得要注意coordinates中的bbox的取值顺序，顺序会导致其旋转或者镜像的展示，文中顺序为正常顺序。
还有颜色的区分要根据灰度值那里自己选择范围取色，文中颜色的取值为全白。

      let url = './static/测试.tif'
      console.log(GeoTIFF)
      // async function getData() {
      GeoTIFF.fromUrl(url).then(tiff => {
        console.log(tiff)
        this.getImage(tiff)
      });

    async  getImage(tiff) {
      const image = await tiff.getImage();
      let bbox = await image.getBoundingBox();
      console.log(bbox)
      let data = await image.readRasters({
        // samples: rgbBands // 波段数量，一个波段：[0]，三个波段：[2,1,0]
        
        samples: [0] // 波段数量，一个波段：[0]，三个波段：[2,1,0]
      });
      let base64Image = this.getBase64Image(data)
      this.addToMapboxgl(base64Image,bbox)
    },
    getBase64Image(data) {
      console.log('tiff',data)
      let thumbnailPixelHeight = data.height
      let thumbnailPixelWidth = data.width
      let canvas = document.createElement('canvas')
      canvas.width = thumbnailPixelWidth
      canvas.height = thumbnailPixelHeight
      let ctx = canvas.getContext("2d")
      let totalPixelCount = 0
      for (let y = 0; y < thumbnailPixelHeight; y++) {
        for (let x = 0; x < thumbnailPixelWidth; x++) {
          let colour = 'rgb(0, 0, 0, 0)' // let the default be no data (transparent)
          // 根据灰度值所在范围渲染颜色
          if (data[0][totalPixelCount] > 0) {
            colour = 'rgb(255, 255, 255, 1)'
            // if (data[0][totalPixelCount] > 0 && data[0][totalPixelCount] <= 1) {
            //   colour = `rgb(0, 0, 0, 1)`
            // } else if (data[0][totalPixelCount] > 2 && data[0][totalPixelCount] <= 3) {
            //   colour = `rgb(64, 64, 64, 1)`
            // } else if (data[0][totalPixelCount] > 3 && data[0][totalPixelCount] <= 4) {
            //   colour = `rgb(128, 128, 128, 1)`
            // } else {
            //   colour = `rgb(191, 191, 191, 1)`
            // }
          }
          ctx.fillStyle = colour
          ctx.fillRect(x, y, 1, 1)
          totalPixelCount++
        }
      }
      let canvasImage = canvas.toDataURL("image/png")
      return canvasImage
    },
    // 将图片添加到地图
    addToMapboxgl(image,bbox) {
      // bbox = [120,20,140,40]
      if(!this.map.getSource('tiff-test')){
        this.map.addSource('tiff-test', {
          "type": "image",
          "url": image,
          "coordinates": [
            [bbox[0],bbox[3]],
            [bbox[2],bbox[3]],
            [bbox[2],bbox[1]],
            [bbox[0],bbox[1]],
          ]
        });
        this.map.addLayer({
          id: 'tiff-test',
          'type': 'raster',
          'source': 'tiff-test',
          'paint': {
            'raster-fade-duration': 0
          }
        });
      }else{
        this.map.getSource('tiff-test').updateImage({
          url:image,
          coordinates: [
            [bbox[0],bbox[3]],
            [bbox[2],bbox[3]],
            [bbox[2],bbox[1]],
            [bbox[0],bbox[1]],
          ]
        })
      }
      mapFunction.controlLayerLocation({
        type:'image',
        id:'tiff-test'
      },this.map)

    },