JavaScript 代码不会将 geojson 数据输出到传单地图上

Question

我正在尝试将 geojson 数据输出到 leaflet.js 地图，但浏览器中的控制台输出会输出以下行：“未捕获的 TypeError：无法读取 null 的属性‘特征’”

geojson 大约有 300,000 个纬度和经度点。我确实将 geojson 减少到 95 个点，并且能够在地图上绘制这些点。但是，当我尝试使用较大的 geojson 文件时，它不会绘图。

这里是js代码：

var myMap = L.map("map", {
  center: [-10.01194, -51.11583],
  zoom: 5
});


// Adding tile layer

L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}", {
  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>",
  maxZoom: 20,
  id: "mapbox.streets",
  accessToken: API_KEY
}).addTo(myMap);

var newtry = "brazilian_fires2008.txt";

// Grab the data with d3

d3.json(newtry, function(response) {

  // Create a new marker cluster group

  var markers = L.markerClusterGroup();

  // Loop through data

  var lon;
  var lat;

  for(var a = 0; a < 10; a++)
  {
     lon = response.features[a].geometry.coordinates[1];
     lat = response.features[a].geometry.coordinates[0];

     markers.addLayer(L.marker([lon, lat]));
  }
        // Add our marker cluster layer to the map
    myMap.addLayer(markers);
  });

这是geojson的第一部分：

var dataset = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "acq_date": "2008-01-01",
        "latitude": -9.2096,
        "longitude": -36.8779,
        "brightness": 360.2,
        "confidence": 100,
        "bright_t31": 314.7,
        "frp": 92.0
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -36.8779,
          -9.2096
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "acq_date": "2008-01-01",
        "latitude": -6.0089999999999995,
        "longitude": -38.3049,
        "brightness": 362.1,
        "confidence": 100,
        "bright_t31": 313.4,
        "frp": 109.5
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -38.3049,
          -6.0089999999999995
        ]
      }
    },

浏览器的控制台输出如下：

未捕获的类型错误：无法读取 null 的属性“特征”

我认为 js 代码无法读取 geojson。我预计会有几千分，但我什么也没得到。

Answer 1

如果您的错误是“Uncaught TypeError: Cannot read property 'features' of null”， 然后数据集它没有正确存储在文件'brazilian_fires2008.txt'中。 请再次检查文件名或文件路径，并确保它指向文件的正确路径。

您当前的代码仍然有错误：'无法读取未定义的属性'几何'' 你a被迭代到10。所以把它改成response.features.length;

var dataset = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "acq_date": "2008-01-01",
        "latitude": -9.2096,
        "longitude": -36.8779,
        "brightness": 360.2,
        "confidence": 100,
        "bright_t31": 314.7,
        "frp": 92.0
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -36.8779,
          -9.2096
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "acq_date": "2008-01-01",
        "latitude": -6.0089999999999995,
        "longitude": -38.3049,
        "brightness": 362.1,
        "confidence": 100,
        "bright_t31": 313.4,
        "frp": 109.5
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -38.3049,
          -6.0089999999999995
        ]
      }
    },
 ]
};

var myMap = L.map("map", {
  center: [-10.01194, -51.11583],
  zoom: 5
});


// Adding tile layer

L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}", {
  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>",
  maxZoom: 20,
  id: "mapbox.streets",
  accessToken: 'pk.eyJ1Ijoic21hcnRuZWd1cnkiLCJhIjoiY2p5aGFjdTVzMDI2NzNjbDdyYjhjZDdmeSJ9.Zl1LGRGQsFAxUP_jBqkZBQ'
}).addTo(myMap);

var response = dataset;

// Grab the data with d3


  // Create a new marker cluster group

  var markers = L.markerClusterGroup();

  // Loop through data

  var lon;
  var lat;

  for(var a = 0; a < response.features.length; a++)
  {
     lon = response.features[a].geometry.coordinates[1];
     lat = response.features[a].geometry.coordinates[0];

     markers.addLayer(L.marker([lon, lat]));
  }
        // Add our marker cluster layer to the map
    myMap.addLayer(markers);
    
<html>

<head>
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
   integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
   crossorigin=""></script>
 <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"
   ></script>
</head>
<body>
<div id="map" style="height:180px;"></div>

</body>
</html>