传单地图添加栅格

Question

我想在传单地图中添加一个栅格文件，从搜索后找到该示例 ，我需要在哪里找到我想为传单示例的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。

Answer 2

面临同样的问题！

解决问题的步骤：

1）您可以通过将其发布在本地Web服务器（例如apache tomcat）上来解决此问题（默认情况下，您的文件URL将类似于： http：// localhost：8080 / file_name.tif ）。

2）现在，如果您尝试加载地图地理图层，则会出现如下错误：

从源'null'的' http：// localhost：8080 / file_name.tif '处的访存访问已被CORS策略阻止：所请求的资源上没有'Access-Control-Allow-Origin'标头。 如果不透明的响应满足您的需求，请将请求的模式设置为“ no-cors”，以在禁用CORS的情况下获取资源。

3）要解决上述问题，请将扩展名Allow-Control-Allow-Origin到您的Chrome浏览器中并启用它。

那就可以了！