JavaScript 代碼不會 output geojson 數據到 leaflet Z1D78DC8ED5121444018B5114AEZ2

Question

I am trying to output geojson data onto a leaflet.js map but the console output in browser outputs the following line: "Uncaught TypeError: Cannot read property 'features' of null"

geojson 大約有 300,000 個緯度和經度點。 我確實將 geojson 減少到 95 個點，並且我能夠對 map 上的那些進行 plot。 但是，當我嘗試使用較大的 geojson 文件時，它不會是 plot。

這是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
        ]
      }
    },

瀏覽器中的控制台 output 輸出以下行：

未捕獲的類型錯誤：無法讀取 null 的屬性“功能”

我相信js代碼無法讀取geojson。 我預計會有幾千分，但我什么也沒得到。

Answer 1

如果您的錯誤是“Uncaught TypeError: Cannot read property 'features' of null”，則數據集未正確存儲在文件 'brazilian_fires2008.txt' 中。 請再次檢查文件名或文件路徑，並確保它指向文件的正確路徑。

您當前的代碼仍然有錯誤：'Cannot read property 'geometry' of undefined' You 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>