传单地图不显示外部 GeoJSON 数据答案

【问题标题】：Leaflet map not displaying external GeoJSON data传单地图不显示外部 GeoJSON 数据
【发布时间】：2018-08-08 23:53:23
【问题描述】：

传单地图不可见.... 我想要做的是创建一个地图并添加我已经通过 QGIS 应用程序使用来自http://naturalearthdata.com 的 SPH 文件创建的外部 GeoJSON 文件不知何故，我的地图在那里不可见，我还尝试将 mapbox 和 google API 密钥与传单库和窗台一起使用有谁知道解决方案？？我无法在此处添加我的 GeoJSON 文件，因为它是一个巨大的文件

这是我的 HTML 文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="biewport" content="width=device-width, initial-scale=1" />
    <title>GeoJSON</title>
    <!-- leflet links -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"></script>

</head>
<body>

    <div id="map"></div>
    <!-- <script src="CA_Bulletin_118_Groundwater_Basins.geojson"></script> -->
    <script src="test.geojson"></script>                            
    <!-- script file -->
    <script src="js/script.js"></script>

</body>
</html>

我的 script.js 文件：

//creating a new map
 var map = new L.Map('map').setView([51.505, -0.09], 13);

//create a new Geojason layer and set it up to basins var ....
// var test;
var test = L.tileLayer('basins');
var basinslayer = L.geoJson(basins).addTo(map);

这是我的 CSS 文件：

/*General CSS */
html, body, #map {
    height: 100%;
    width: 100%;
    font-family: sans-serif;
}

#map {
    width: 50%;
    height: 50%;
}

【问题讨论】：

欢迎来到 SO！您当前共享的代码看起来不错。但是假设您的 .geojson 文件实际上是一个普通的 JS 文件，您可以在其中在全局范围内定义您的 basins 变量。您的test 切片图层的 URL 模板也很奇怪，尽管您可能只是为了在这里分享而对其进行了简化。如果您仍然卡住，您可能应该分享您的 GeoJSON 文件内容示例。
是地图根本没有显示，还是geoJSON图层没有出现？如果没有地图，可能值得在开发人员工具中检查页面上的元素，以了解您的容器大小是如何调整的。
感谢您回复@ghybs 我将我的文件保存为 GeoJSON 文件，然后我给了它 var 称为 test 首先它说 var undefined 然后我解决了这个问题现在我没有任何错误它只是显示灰色背景没有地图层然后我做了一些研究我将此代码添加到我的 script.js 文件中并且工作正常现在我有一张地图。现在我正在尝试添加我的外部文件，即 GeoJSON 文件如果您需要更多解释，请告诉我。
感谢回复@peeebeee 我将我的文件保存为 GeoJSON 文件，然后我给它 var 称为 test 首先它说 var undefined 然后我解决了这个问题现在我没有任何错误它只是显示灰色背景没有地图层然后我做了一些研究我将此代码添加到我的 script.js 文件中并且工作正常现在我有一张地图。现在我正在尝试添加我的外部文件，即 GeoJSON 文件如果您需要更多解释，请告诉我。
这是我的脚本文件 _______________________________________________ //创建一个新地图 var map = L.map('map').setView([51.505, -0.09], 13); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© osm.org/copyright">OpenStreetMap</a> 贡献者', //其他属性。}).addTo(map);

标签： javascript jquery leaflet geojson

【解决方案1】：

我还导入了一个 geojson 文件以在我的地图上生成点。我使用$.getJSON from jquery 导入geojson 文件、加载数据并创建点。

如果你想尝试这个方法，你必须在你的html头部添加jQuery，像这样（也是found here for the latest cdn）：

<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>

我的 $.getJSON 看起来像这样：

var getjson = $.getJSON("map-v2.geojson",function(data){
  var bev = L.geoJson(data,{
    pointToLayer: function(feature,latlng){
      var marker = L.marker(latlng);
      marker.bindPopup('<p align=center>' + '<strong>Title: </strong>' + feature.properties.Title + '<strong>Date: </strong>' + feature.properties.Date + '<br/>' + '<strong>Creator: </strong>' + feature.properties.Creator);
      return marker;
    }
  });
  bev.addTo(map);
});

首先，我设置了一个调用$.getJSON的变量，它带有几个参数，第一个是geoJSON文件的名称，第二个是函数（数据），它表示我们要使用此文件中的数据。第二行我分配变量 bev 来调用 L.geoJson 函数，传递参数数据（它将使用 geoJSON 文件中的数据）。然后我使用 pointToLayer 指向一个新层并为其分配函数的值（特征，latlng）。功能允许我从我的 geoJSON 文件中命名某些属性以显示在弹出窗口中，latlng 从 geoJSON 文件中提取坐标以生成标记的位置（latlng 是强制性的）。然后我分配了另一个名为 marker 的变量，这里是您在地图上生成标记的地方，只需使用 L.marker(latlng)。之后，marker.bindPopup 会从我在 geoJson 文件中每个点的属性数据中绑定我想在弹出窗口上显示的所有内容。这是我的 geoJSON 示例：

{
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.714055,
          38.440429
        ]
      },
      "properties": {
        "Title": "Santa Rosa. Sonoma County. California. 1885.",
        "Date": "1885",
        "Creator": "W.W. Elliot & Co., lithographer."
      }
    },

然后我返回标记，将变量 bev 添加到地图中，它们就在那里！

*我不是 JavaScript 或 Leaflet 方面的专家，所以如果我的措辞不正确，我很乐意进行编辑以使其更清晰。

【讨论】：