Leaflet 地图中的 Socrata 视图

Question

我是编程新手，我正在尝试在传单地图中显示许可信息。许可数据来自 Socrata 中的一个视图。我按照 http://fire.seattle.io/ 代码弄清楚如何执行此操作并设法自行重新创建地图，但是当我尝试使用所需的视图时，我不断收到错误 "Uncaught Error: Invalid LatLng object: (null, null)"。

视图有几条没有坐标信息的记录；我想过滤视图，以便我只能收到有效记录，但到目前为止我还没有弄清楚如何。在 API 端点中使用 where 子句（将 url 与资源一起使用）我可以执行过滤器，但我收到未定义的警告和指向我的 jquery 的错误 "Uncaught TypeError: Cannot read property 'length' of undefined"。

我正在关注的应用程序中的代码使用另一个 url 来访问数据（使用 url 和 api/views），但我无法进行任何过滤或选择（继续获取空坐标的记录）。

如何去除那些空值的记录，以便我可以在传单地图中显示数据？感谢任何帮助...

代码是...

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Just a test</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.js'></script>
<script src='http://fire.seattle.io/js/leaflet/leaflet.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.css' rel='stylesheet' />

<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>

<div id='map'></div>
<script>
$.getJSON('https://data.pr.gov/api/views/93ae-6ffm/rows.json?jsonp=?&max_rows=2', function(results) {
  console.log(results.data);

var map = L.map('map').setView([18.25,-66.45], 9);

   // add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

   $.each(results.data, function(index, value) {
     L.marker([value[28], value[29]]).addTo(map)
     .bindPopup('<h6>' + value[6] + '</h6>' + value[7] + '<br>');
   });

 });

</script>


</body>
</html>

谢谢

Answer 1

您遇到的结果似乎没有与其关联的有效经纬度位置。对于这些记录，您的纬度和经度字段将为 null。在您的 $.each 循环中，您可以检查并跳过它们。

我还建议改用 Chris Whong 的新 soda-leaflet 示例。它利用了我们现代的 SODA 2.0 API，还包括一些用于过滤和设置数据样式的功能。

Leaflet 地图中的 Socrata 视图

Socrata views in Leaflet maps

javascript

socrata

leaflet