传单中的Geotiff

Question

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

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

Answer 1

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

它使用模块

georaster-layer-for-leaflet

。

var map = L.map('map').setView([38.736946, -9.142685], 12);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    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(response => response.arrayBuffer())
  .then(arrayBuffer => {
    parseGeoraster(arrayBuffer).then(georaster => {

      var layer = new GeoRasterLayer({
          georaster: georaster,
          opacity: 0.7,
          resolution: 100 // optional parameter for adjusting display resolution
      });
      layer.addTo(map);

      map.fitBounds(layer.getBounds());

  });
});

#map { height: 500px; }

<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>

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