在Leaflet中渲染GeoTIFF文件

Question

我正在使用传单创建网络地图，我需要显示 tif 光栅图像。我查阅了所有类型的方法来显示这些数据；但是，我不太明白，所以我遇到了一些困难。 我已经尝试从 github 安装 leaflet-geotiff，但无法使用它。我也尝试了 georaster-layer-for-leaflet，但我也无法使用它。

有人可以帮助我吗？ 谢谢你

Answer 1

这里有一个我刚刚为里斯本市的海拔高度制作的工作示例。

它使用模块

georaster-layer-for-leaflet

。

var map = L.map('map')

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map)

var url_to_geotiff_file = "https://contabo.joaopimentel.com/img/tif/1106.tif"

fetch(url_to_geotiff_file)
  .then(res => res.arrayBuffer())
  .then(arrayBuffer => {
    parseGeoraster(arrayBuffer).then(georaster => {    
      const numberOfItems = Math.round(georaster.maxs[0])
      const rainbow = new Rainbow()
      rainbow.setNumberRange(1, numberOfItems)
      rainbow.setSpectrum('white', 'red')

      const layer = new GeoRasterLayer({
        georaster: georaster,
        opacity: 0.7,
        pixelValuesToColorFn: vals => '#' + rainbow.colourAt(Math.round(vals[0])),
        resolution: 512 // optional parameter for adjusting display resolution
      }).addTo(map)

      map.fitBounds(layer.getBounds())
    })
  })

#map { height: 250px; }

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
   integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
   crossorigin=""/>
  
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/georaster.browser.bundle.min.js"></script>
<script src="https://unpkg.com/georaster-layer-for-leaflet/dist/georaster-layer-for-leaflet.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/rainbowvis.js"></script>

<div id="map"></div>