传单 - 地图图层未加载答案

【问题标题】：Leaflet - map layers not loading传单 - 地图图层未加载
【发布时间】：2018-06-28 02:30:35
【问题描述】：

我正在尝试创建一个 choropleth，根据 2010 年的病例率对状态进行着色。我收到错误：Uncaught TypeError: Cannot read property 'features' of null at Object.t.choropleth.n.exports [作为等值线]。这是从geojson读取和提取数据的问题吗？

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>

picture of tilelayer and console

【问题讨论】：

标签： leaflet geojson choropleth

【解决方案1】：

对我来说，错误似乎很明显。

您正在从本地存储中加载您的 geojson：file:///Users... 这是不可能的。如果您有服务器（apache、nginx）或使用 github 获取原始文件 url，则必须从 url 访问它。

你也可以使用这个功能：

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

【讨论】：

谢谢，我有一种感觉是因为试图从本地存储中读取它。 github 的方式奏效了。