Shapefile未显示在传单地图中[重复]答案

【问题标题】：Shapefile not Showing up in Leaflet Map [duplicate]Shapefile未显示在传单地图中[重复]
【发布时间】：2021-07-10 15:56:03
【问题描述】：

我有一个非常简单的示例地图，我想在其中添加一个 shapefile。 shapefile 已压缩，我已检查它是否显示在此处http://leaflet.calvinmetcalf.com/#3/32.69/10.55，但它没有显示在我的示例地图上。对此的任何帮助将不胜感激。

代码

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />
  <script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script>
  <script src="Plugins//shp.js"></script>
  <script src="Plugins//leaflet.shpfile.js"></script>

  <!--
Needed?
-->
  <style>
    #map {
      position: relative;
      margin: 0 0 0 0;
      height: 650px;
      width: 700px;
    }
  </style>

</head>

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

    var map = L.map('map', {
      minZoom: 1,
      maxZoom: 9
    });

    map.setView([34.15, -112.0], 7)
    map.setMaxBounds(map.getBounds());

    Streets = L.tileLayer(
      'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYXVzdGluY2FyZXkiLCJhIjoiY2thanlmdGU4MGFjeTJ5bGJqcHgzZTB3NiJ9.qkuctvbWSIpVLidV8ptKcg', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
      }).addTo(map);

      var shpfile = new L.Shapefile('TestShapefile.zip');

      shpfile.addTo(map);

      var overlayMaps = {
            "TestShapefile": shpfile
        };

      L.control.layers(overlayMaps).addTo(map);

  </script>
</body>
</html>

在我引用的插件文件夹中，我有以下 javascript：

leaflet.shpfile.js 和 shp.js

【问题讨论】：

浏览器控制台有错误吗？
是的。我应该去那里看看。从源“null”访问“file:///XXXX”处的 XMLHttpRequest 已被 CORS 策略阻止：跨源请求仅支持协议方案：http、data、chrome、chrome-extension、chrome-untrusted、https。 TestShapefile.zip:1 加载资源失败：net::ERR_FAILED
不确定这些错误的确切含义...

标签： html leaflet shapefile

【解决方案1】：

如果您包含的 url 的域与您的域不同，则可能会发生这种情况，然后您会收到 CORS 错误。它纯粹是为了控制一个域可以从另一个域请求什么。 f.i

var shpfile = new L.Shapefile("https://someOtherDomain.com/congress.zip");

所以尝试将文件放在本地。 F.i 你也有像这样的 .js 文件：

var shpfile = new L.Shapefile("./congress.zip");

这是demo

还请注意，您必须在 Web 服务器中运行 index.html，而不是通过在浏览器上打开 html 文件来通过文件系统运行。另一种方法是通过类似于演示的 webpack 或 parcel 等模块捆绑器运行它。

【讨论】：

这是有道理的。我将您的演示示例与我的 shapefile 一起使用，并且能够得到我想要的（尽管由于某种原因，没有实现范围和缩放限制）。关于通过网络服务器打开，如果我要将这个上传到 github，是否只是我需要上传到存储库的 index.html 文件和 zip 文件？
是的，除非您将 js 部分拆分为单独的脚本文件，因此您还需要包含它们。同样适用于样式和 css 文件。如果你在演示中使用它，你只需要这两个。