Код JavaScript не будет выводить данные геойсона на карту листовки - PullRequest
Новая
       17

Код JavaScript не будет выводить данные геойсона на карту листовки

0 голосов
/ 25 октября 2019

Я пытаюсь вывести данные geojson на карту leaflet.js, но вывод консоли в браузере выводит следующую строку: "Uncaught TypeError: Невозможно прочитать свойство 'features' of null"

Геойсон имеет примерно300 000 точек широты и долготы. Я сократил геойсон до 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);
  });

А вот первая часть геойсона: 

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

Вывод консоли в браузере выводит следующую строку:

Uncaught TypeError: Невозможно прочитать свойство 'features' с нулевым значением

Я считаю, что код js неумеет читать геойсон. Я ожидаю, что будет несколько тысяч очков, но ничего не получаю.

1 Ответ

2 голосов
/ 25 октября 2019

Если вы допустили ошибку «Uncaught TypeError: Невозможно прочитать свойство« features »с нулевым значением», то набор данных неправильно хранится в файле «brazilian_fires2008.txt». Пожалуйста, проверьте имя файла или путь к файлу еще раз и убедитесь, что он указывает на правильный путь к файлу.

В вашем текущем коде все еще есть ошибка: «Невозможно прочитать свойство« geometry »из undefined« Вы повторяете до 10Так что измените его на response.features.length; 


<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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>
...