Question

看不到传单地图.... 我想做的是创建地图，并使用http://naturalearthdata.com中的SPH文件添加通过QGIS应用程序已经创建的外部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%;
}

Answer 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指向一个新层，并为其分配功能值（feature，latlng）。功能允许我从geoJSON文件中命名某些属性以显示在弹出窗口中，latlng从geoJSON文件中提取坐标以生成标记的位置（latlng是必需的）。然后，我分配另一个称为标记的变量，在这里，您只需使用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的专家，所以如果我的措辞不对，我会很乐意进行编辑以使其更加清晰。

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

1 个答案: