传单地图添加栅格答案

【问题标题】：leaflet maps add raster传单地图添加栅格
【发布时间】：2018-10-06 22:46:19
【问题描述】：

我想在传单地图中添加一个光栅文件，在搜索后我找到了这个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

知道怎么解决吗？

【问题讨论】：

标签： javascript html leaflet maps

【解决方案1】：

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

【讨论】：

【解决方案2】：

面临同样的问题！

解决问题的步骤：

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

2) 现在，如果您尝试加载地图 georaster 图层，您将收到如下错误：

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

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

这样就可以了！

【讨论】：