Leaflet - слои карты не загружаются - PullRequest
Новая
       26

Leaflet - слои карты не загружаются

0 голосов
/ 28 июня 2018

Я пытаюсь создать хороплет, который затеняет состояния в зависимости от частоты случаев в 2010 году. Я получаю сообщение об ошибке: Uncaught TypeError: Невозможно прочитать свойство 'features' null в Object.t.choropleth.n.exports [ как хороплет. Это проблема чтения и извлечения данных из геойсона? 

var myMap = L.map('map', {
	center: [39.8283, -98.5795],
	zoom: 11
});

APIKEY = "pk.eyJ1Ijoic2NvdHRtY2FsaXN0ZXIxMyIsImEiOiJjamlhdWd2bzMxYjU1M3Ztcm54N2kxaDQ2In0.mGtR6lttrtiEpIqHVEIAtQ"

L.tileLayer("https://api.mapbox.com/styles/v1/mapbox/outdoors-v10/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic2NvdHRtY2FsaXN0ZXIxMyIsImEiOiJjamlhdWd2bzMxYjU1M3Ztcm54N2kxaDQ2In0.mGtR6lttrtiEpIqHVEIAtQ").addTo(myMap)



var GEOLINK = "state_data_modified.geojson";

var geojson_0;

d3.json(GEOLINK, function(data){
	geojson_0=L.choropleth(data, {
		valueProperty: "Rate_2010",
		scale: ['white', 'red'],
		steps: 5,
		mode: "q",
		style:{
			color:'#fff',
			weight: 1,
			fillOpacity: .8
		},
		onEachFeature: function(feature, layer){
			layer.bindPopup(feature.properties.State + "<br>Number of cases:<br>" + feature.properties.Cases_2010)
		}
	}).addTo(myMap);

	var legend = L.control({ position: "bottomright" });
  	legend.onAdd = function() {
    	var div = L.DomUtil.create("div", "info legend");
    	var limits = geojson.options.limits;
    	var colors = geojson.options.colors;
    	var labels = [];

    // Add min & max
    var legendInfo = "<h1>Cases and Rates</h1>" +
      "<div class=\"labels\">" +
        "<div class=\"min\">" + limits[0] + "</div>" +
        "<div class=\"max\">" + limits[limits.length - 1] + "</div>" +
      "</div>";

    div.innerHTML = legendInfo;

    limits.forEach(function(limit, index) {
      labels.push("<li style=\"background-color: " + colors[index] + "\"></li>");
    });

    div.innerHTML += "<ul>" + labels.join("") + "</ul>";
    return div;
  };

	legend.addTo(myMap);

});
body {
  padding: 0;
  margin: 0;
}

#map,
body,
html {
  height: 100%;
}

.leaflet-popup-content {
  text-align: center;
}

/* CSS from the Leaflet-Choropleth documentation */
.legend {
  padding: 6px 8px;
  font: 12px Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #555;
  background: #fff;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 5px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

.legend ul {
  padding: 0;
  margin: 0;
  clear: both;
  list-style-type: none;
}

.legend li {
  display: inline-block;
  width: 30px;
  height: 22px;
}

.legend .min {
  float: left;
  padding-bottom: 5px;
}

.legend .max {
  float: right;
}

h1 {
  text-align: center;
}
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="UTF-8">
    <title>Test Choropleth</title>

    <!-- Leaflet CSS & JS-->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>

    <!-- d3 JavaScript -->
    <script src="https://d3js.org/d3.v4.min.js"></script>

    <!-- Leaflet-Choropleth JavaScript -->
    <script type="text/javascript" src="choropleth.js"></script>

    <!-- Our CSS -->
    <link rel="stylesheet" type="text/css" href="style.css">

  </head>
  <body>

    <!-- The div where we will inject our map -->
    <div id="map"></div>

    <script type="text/javascript" src="test_choro.js"></script>

  </body>
</html>

изображение плиточника и консоли

1 Ответ

0 голосов
/ 28 июня 2018

Для меня ошибка кажется довольно ясной.

Вы загружаете geojson из локального хранилища: file:///Users... Это невозможно. Вы должны сделать его доступным из URL, если у вас есть сервер (apache, nginx) или использовать github для получения необработанного URL файла.

Вы также можете использовать эту функцию: 

$.getJSON("your_path/to/state_data.json", function(json) {
    console.log(json);
});
...