leaflet 加载 tif,tiff文件

依托偶尔宁

于 2024-08-29 18:03:11 发布

阅读量27

点赞数

分类专栏： leaflet 文章标签： javascript 前端

本文链接：https://blog.csdn.net/xy1580/article/details/141685094

版权

leaflet 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

leaflet 加载 tif,tiff文件

通过tiff地址渲染


var parse_georaster = require("georaster");

var GeoRasterLayer = require("georaster-layer-for-leaflet");

// initalize leaflet map
var map = L.map('map').setView([0, 0], 5);

var url_to_geotiff_file = "xxxx.tif"; //或者 xxxx.tiff

fetch(url_to_geotiff_file)
  .then(response => response.arrayBuffer())
  .then(arrayBuffer => {
    parse_georaster(arrayBuffer).then(georaster => {
      console.log("georaster:", georaster);

      /*
          GeoRasterLayer is an extension of GridLayer,
          which means can use GridLayer options like opacity.

          Just make sure to include the georaster option!

          http://leafletjs.com/reference-1.2.0.html#gridlayer
      */
     let layer = new GeoRasterLayer({
              georaster: georaster,
              opacity: 0.7,
              resolution: 256,
            });
      layer.addTo(map);

      map.fitBounds(layer.getBounds());

  });
});

本地文件上传


// html  <input type="file" id="geotiff-file">
 

// js

  var map = L.map('map').setView([0, 0], 5);

  document.getElementById("geotiff-file").addEventListener("change", function(event) {
    var file = event.target.files[0];
    console.log("file:", file);

    var reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onloadend = function() {
      var arrayBuffer = reader.result;
      parseGeoraster(arrayBuffer).then(georaster => {

        console.log("georaster:", georaster);
        /*
            GeoRasterLayer is an extension of GridLayer,
            which means can use GridLayer options like opacity.

            Just make sure to include the georaster option!

            http://leafletjs.com/reference-1.2.0.html#gridlayer
        */
        var layer = new GeoRasterLayer({
            georaster: georaster,
            opacity: 0.7,
            resolution: 256
        });
        console.log("layer:", layer);
        layer.addTo(map);

        map.fitBounds(layer.getBounds());
        document.getElementById("overlay").style.display = "none";
      });
    };
  });