传单地图添加栅格

Question

我想在传单地图中添加一个光栅文件，在搜索之后我发现这个example我需要的地方是georaster-layer-for-leaflet-example。

代码看起来简单js：

var parse_georaster = require("georaster");

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

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

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

var url_to_geotiff_file = "example_4326.tif";

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
      */
      var layer = new GeoRasterLayer({
          georaster: georaster,
          opacity: 0.7
      });
      layer.addTo(map);

      map.fitBounds(layer.getBounds());

  });
});

错误：

GeoTIFF: Object
bundle.js:16 Fetch API cannot load file:///C:/Users/username/Downloads/georaster-layer-for-leaflet-example-master/example_4326.tif. URL scheme must be "http" or "https" for CORS request.
1.georaster @ bundle.js:16
bundle.js:16 Uncaught (in promise) TypeError: Failed to fetch
    at Object.1.georaster (bundle.js:16)
    at s (bundle.js:1)
    at e (bundle.js:1)
    at bundle.js:1

任何想法如何解决它？

Answer 1

错误消息是说tiff应该在线托管：“URL方案必须是”http“或”https“。尝试将你的tiff放在某个地方，例如github或你计划托管你的地图的服务器，就行了var url_to_geotiff_file = "example_4326.tif";，使用tiff的完整URL。